What is Nullish Coalescing in TypeScript and How to Use It?

Hey there! If you find this story intriguing and helpful, feel free to like or share it with others who might enjoy it too.

---

So, let me take you on a quick journey using the analogy of a spaceship control panel to explain the concept of nullish coalescing in TypeScript. I am an astronaut on a mission to explore distant galaxies. My spaceship is equipped with a sophisticated control panel full of switches and dials that help me navigate through the ness of space.

Now, each switch on this panel is like a variable in my TypeScript code. Sometimes, I need to check if a switch is flipped to a specific setting before I make a decision, like engaging the hyperdrive. However, space can be unpredictable, and some switches might not be set at all—they could be in a ‘null’ or ‘undefined’ state, leaving me in a tricky situation.

This is where the nullish coalescing operator, represented by ??, becomes my trusty co-pilot. it as a smart assistant that tells me, “If this switch isn’t set, let’s use the backup setting instead.” It’s like having a contingency plan for when things don’t go as expected.

For instance, if I’m looking at the “oxygen level” switch and it’s not set (null or undefined), I don’t want to take any chances. I can use the nullish coalescing operator to say, “If the oxygen level switch isn’t set, default to safe mode.” This ensures that I always have a reliable fallback and my journey remains smooth and secure.

In my code, it would look something like this: let oxygenLevel = controlPanel.oxygenLevel ?? "safe mode";. Here, if controlPanel.oxygenLevel is null or undefined, my spaceship will automatically switch to “safe mode,” allowing me to continue my mission without any hiccups.

And that’s how nullish coalescing helps me make sure I always have a reliable path forward, even in the uncertainty of space. It’s a small yet powerful tool that keeps my journey steady. If you find this analogy helpful, feel free to share it with fellow space explorers!

---

My spaceship’s control panel is now a JavaScript object, which I’ll call controlPanel. Each property on this object represents a different system on the ship:

let controlPanel = {
  oxygenLevel: undefined,
  fuelGauge: 100,
  navigationSystem: null,
};

In JavaScript, I need to ensure that even if some of these properties are unset (null or undefined), my spaceship systems continue to function safely. This is where the nullish coalescing operator ?? comes in handy.

Let’s say I want to display the oxygen level. If it’s not set, I want to default to a “safe mode”:

let oxygenLevel = controlPanel.oxygenLevel ?? "safe mode";
console.log(oxygenLevel); // Output: "safe mode"

Here, since controlPanel.oxygenLevel is undefined, the nullish coalescing operator steps in and assigns “safe mode” as the default value.

Similarly, for the navigation system:

let navigation = controlPanel.navigationSystem ?? "manual control";
console.log(navigation); // Output: "manual control"

Again, the nullish coalescing operator detects that controlPanel.navigationSystem is null and provides “manual control” as a fallback.

The beauty of ?? is that it only checks for null or undefined, unlike the logical OR operator ||, which would consider any falsy value (like 0 or an empty string) as a trigger for the fallback. This makes ?? perfect for scenarios where I specifically want to handle nullish values without affecting other falsy values.

Key Takeaways:

• The nullish coalescing operator (??) in JavaScript is used to provide default values for null or undefined scenarios.
• It ensures that my code has a reliable fallback, similar to how a spaceship switches to backup systems when primary ones aren’t set.
• ?? is more precise than || because it only considers null and undefined as reasons to use the fallback, allowing other falsy values to remain unaffected.