ELI5 JavaScript: Nullish Coalescing (??) & Logical Nullish Assignment (??=)

#webdev #programming #javascript #beginners

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

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.

Thank you again :)

Have an awesome day and happy coding 😄