ELI5 JavaScript: Nullish Coalescing (??) & Logical Nullish Assignment (??=)
Tags: javascript, webdev, beginners, programming
Published: 2021-11-06 12:45:34

Nullish Coalescing and Logical Nullish Assignment... they sure do sound scary!

<center>
![Scared gif](https://media.giphy.com/media/3o6wrfTsqfAepbiHZe/giphy.gif)
</center>

This was my reaction when I first heard the words 'Nullish Coalescing' and 'Logical Nullish Assignment' 😂

But don't worry! Both of these are some of the simplest yet powerful concepts introduced in modern JavaScript!
Read the article till the end to learn more about those :)

Without further ado...

<center>
![Let's start gif](https://media.giphy.com/media/64aBXTVfd90zyUH2da/giphy.gif)
</center>

<h2> Table of Contents: </h2>
1. <a href="#nullish-coalescing">Nullish Coalescing</a>

   &nbsp;&nbsp;&nbsp; 1.1  &nbsp;&nbsp;&nbsp;<a href="#difference-between">Difference between OR (||) & Nullish Coalescing (??)</a> 

   &nbsp;&nbsp;&nbsp; 1.2  &nbsp;&nbsp;<a href="#short-circuiting">Short-circuiting</a> 

   &nbsp;&nbsp;&nbsp; 1.3  &nbsp;&nbsp;<a href="#assign-default-values">Assign default values</a> 

2. <a href="#logical-nullish-assignment">Logical Nullish Assignment</a>

<hr>

<h3 id="nullish-coalescing">1. Nullish Coalescing</h3> 

It is a logical operator that
- returns the first argument if it is 'defined' (not null/undefined)
- returns the second argument if the first argument isn't defined 

```javascript 
let person1
console.log( person1 ?? "Nisarg" ) //output = Nisarg

let person2 = null
console.log( person2 ?? "Nisarg" ) //output = Nisarg

let person3 = "Kapkar"
console.log( person3 ?? "Nisarg") //output = Kapkar
```

- The output of the first two console.log statements would be the second argument ("Nisarg") as the first arguments are either undefined (person1) or null (person2).
- The output of the third console.log will be person3 ("Kapkar") as the first argument is not null or undefined.


<h4 id="difference-between"> 1.1 Difference between OR (||) and Nullish Coalescing (??) </h4>

- OR operator does not distinguish between a null/undefined, false, empty string, and 0. All of these are treated as falsy values.
- If the first argument of OR is one of the above values, the second argument is returned as the output.
- Whereas Nullish Coalescing will only return the second argument if the first argument is either null or undefined.

```javascript 
let n1 = 0
console.log( n1 || 10 )     //output = 10
console.log( n1 ?? 10 )     //output = 0

let n2 
console.log ( n2 || 10 )    //output = 10
console.log (n2 ?? 10 )     //output = 10
```

- For n1: 0 is a falsy value. So OR returns 10. Since n1 is not null or undefined, Nullish Coalescing returns the first argument. 
- For n2: undefined is a falsy value. So OR returns 10. Since n2 is undefined, Nullish Coalescing returns the second argument. 

<h4 id="short-circuiting"> 1.2 Short-circuiting </h4>

Nullish Coalescing can also be used for 'Short-circuit' evaluation.
The second argument is only evaluated if the first argument is null or undefined! 

```javascript
let a
let b = 10
function c() {
    console.log("c called")
    return 1
}
console.log( a ?? c() ) //Output: c called 1
console.log( b ?? c() ) //Output: 10
```

- For the first expression (a ?? c()), since a is undefined, the right-hand side of the expression is also evaluated (function c). Function c logs "c called" and returns 1, which is then logged by the console.
- For the second expression (b ?? c()), since b is neither undefined nor null, the right-hand side of the expression is not evaluated. So the console logs the value of b (10)

<h4 id="assign-default-values"> 1.3 Assign default values </h4> 

Use Nullish Coalescing to assign default values to a variable. Suppose we want to assign a variable to 10 if the number is null or undefined.

```javascript 
let number = 0 
let a = number || 10 
let b = number ?? 10
console.log(a)   //Output: 10
console.log(b)   //Output: 0
``` 

Using OR to assign default values can have unexpected outcomes! 
- OR assigns variable a to 10 even though the number is not null or undefined (as stated in section 1.1, OR considers 0 as a falsy value)
- Nullish Coalescing will assign 10 if and only if the number is null or undefined. 
 
<h3 id="logical-nullish-assignment"> 2. Logical Nullish Assignment </h3>

```javascript
let a 
let b = 10
a ??= 100
b ??= 100
console.log(a)   //Ouput = 100
console.log(b)   //Ouput = 10
```

Logical Nullish is an assignment operator which assigns value if the variable is null or undefined.

In the above example, since a is undefined, it is assigned 100. b is already defined (10), so the value is not assigned to b!

<hr>

Woooo! Thank you for reading 😄

<center>
![wooo Gif](https://media.giphy.com/media/2E6OYt2yphlWTGZeYK/giphy.gif)
</center>

If you have any questions about Nullish Coalescing or Logical Nullish Assignment (or about JavaScript in general), feel free to ask them in the comments 👇

<hr>

This article is part of my ELI5 JavaScript series.
If you want to read & learn more about JavaScript, don't forget to subscribe (more articles coming soon!)

Follow me 👇 for more content on full-stack development, software engineering & data structures/algorithms.

- <a href="https://twitter.com/nnkkaapp">Twitter</a>
- <a href="https://www.linkedin.com/in/nisarg-kapkar/">Linkedin</a>
- <a href="https://github.com/Nkap23">Github</a>

Thank you again :)

Have an awesome day and happy coding 😄