DEV Community

Cover image for ELI5 JavaScript: Nullish Coalescing (??) & Logical Nullish Assignment (??=)
Nisarg Kapkar
Nisarg Kapkar

Posted on • Originally published at nisargkapkar.hashnode.dev

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

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

  1. 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 😄

Discussion (4)

Collapse
siddharthshyniben profile image
Siddharth

Hey, quick note: The ELI5 tag is for asking for help, not for tutorials.

Collapse
nkap profile image
Nisarg Kapkar Author

Hi! Thanks for letting me know!
I haven't used any ELI5 tags for the article. 'ELI5 JavaScript' is just the name of the series!

Collapse
siddharthshyniben profile image
Siddharth

Oh really? I thought i saw it somewhere. Sorry my bad 🤦