This content originally appeared on DEV Community and was authored by Nisarg Kapkar
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.1 Difference between OR (||) & Nullish Coalescing (??)
1.2 Short-circuiting
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.
Thank you again :)
Have an awesome day and happy coding 😄
This content originally appeared on DEV Community and was authored by Nisarg Kapkar
Nisarg Kapkar | Sciencx (2021-11-06T12:45:34+00:00) ELI5 JavaScript: Nullish Coalescing (??) & Logical Nullish Assignment (??=). Retrieved from https://www.scien.cx/2021/11/06/eli5-javascript-nullish-coalescing-logical-nullish-assignment/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.