Nisarg Kapkar
Nisarg Kapkar

Nisarg Kapkar

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

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

ES2020 introduced a new logical operator called Nullish Coalescing (denoted by ??). Read the article to learn more about it!

Nisarg Kapkar
ยทNov 6, 2021ยท

4 min read

Subscribe to my newsletter and never miss my upcoming articles

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

Scared gif

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

Let's start gif

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 ๐Ÿ˜„

wooo Gif

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 ๐Ÿ˜„

ย 
Share this