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

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...

Table of Contents:

1. Nullish Coalescing
   1.1    Difference between OR (||) & Nullish Coalescing (??)
   1.2   Short-circuiting
   1.3   Assign default values
   
2. Logical Nullish Assignment

---

1. Nullish Coalescing

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

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.

1.1 Difference between OR (||) and Nullish Coalescing (??)

• 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.

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.

1.2 Short-circuiting

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

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)

1.3 Assign default values

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.

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.

2. Logical Nullish Assignment

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!

---

Woooo! Thank you for reading 😄

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 👇

---

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.

• Twitter
• Linkedin
• Github

Thank you again :)
Have an awesome day and happy coding 😄