# Demystifying the Nullish Coalescing Operator in JavaScript

Nullish Coalescing Operator (`??`) is a relatively new addition to JavaScript, introduced with ES11. In this blog, we'll explore what it is, why it's useful, and how you can leverage it in your JavaScript projects.

**Syntax:**

```javascript
const defaultAge = age ?? 18;
```

In the above code snippet if `age` is not null or undefined `defaultAge` will be set to `age` otherwise it will be set to 18.

Before you start screaming that the logical OR (`||`) will do the exact same thing, hear me out.

**The problem with OR (**`||`**):**

```javascript
const age = 23;
const defaultAge = age || 18;
console.log(defaultAge); // Output: 23
```

The above code will work perfectly fine in this case as it will return 18 if age is a `falsy` value and `age` otherwise. The problem occurs when we are dealing with values that could be legitimate falsy values, such as the number `0` or an empty string `""`.

```javascript
const age = 0;
const defaultAge = age || 18;
console.log(defaultAge); // Output: 18
```

In this case, the default age is set to 18, even though `age` has a value of 0, which is a valid age. This unintended behaviour can lead to bugs and unexpected results in your code.

**Nullish Coalescing Operator to the rescue 🛟**

The Nullish Coalescing Operator (`??`) provides a solution to the problem mentioned above. It specifically checks for `null` or `undefined` values and doesn't treat other `falsy` values as null or undefined.

```javascript
const age = 0;
const defaultAge = age ?? 18;
console.log(defaultAge); // Output: 0
```

**Real-world example**

```javascript
export function generateMetadata({ params: { myParams } }) {
  const topic = myParams?.[0] ?? "curated";
  const page = myParams?.[1] ?? "1";

  return {
    title: `Results for ${topic} - Page ${page}`,
  };
}
```

The above example shows the setting of metadata using params in a next 13 server-component. The topic will show `general` only if we don't get data from params i.e. if it is null or undefined. Similarly for the page.

**Conclusion**

The Nullish coalescing operator is a great tool to resolve the issue of unintentional defaults when dealing with falsy values, ensuring that `null` and `undefined` are the only triggers for providing default values. By incorporating this operator into your code, you can write cleaner, more robust JavaScript applications with fewer surprises and bugs. So, the next time you find yourself setting default values, consider using the Nullish Coalescing Operator to make your code safer and more concise.