This content originally appeared on DEV Community and was authored by Nithish Kumar
Nullish coalescing is new Javascript feature of ES11 (aka ECMA Script 2020).The nullish coalescing operator looks like this ??
Truthy and Falsy values
Before proceeding further,, you need to know about truthy and falsy values in Javascript to understand better. Basically, false, 0, -0, BigInt(0n), empty string('' or "" ), NaN, null, undefined are considered as falsy values in Javascript.
Other than this, as you guessed, is truthy.
It's important to remember this , not only for nullish coalescing but also it will be very useful as you dive more deeper in Javascript. To prove you that these are treated as falsy values, try to console.log every falsy values mentioned above. Like this ?,
console.log(Boolean(0)) // would return false
The Traditional || operator
Have you ever used logical OR (||) operator for setting a default value if the varible doesn't exist? Let me give an quick example,
const obj = {
name : undefined
age : 45
}
console.log(obj.name || 'default name') // default name
From the above example, it is pretty straightforward that we set a default value if the name doesn't exist. This technique is called as fallback mechanism, and it is often used by developers out there.
But it is important to know how || operator works. Its simple.
The || operator checks for first truthy value. Take a close look at the example below
let firstName = undefined
let secondName = null
let age = 0
let nickName = ''
let orignalName = 'Miller'
console.log(firstName || secondName || age || nickName || orignalName || true) // Miller
Now, you might think, why does it return Miller instead of 0? ??
It is because, except orignalName variable and Boolean true, every other variable is considered as falsy value as i said before.
Think ?
originalNameis returned eventhoughtrueis also a truthy value
But, if u try to replace the || operator with ?? operator, it would return 0.
console.log(firstName ?? secondName ?? age ?? nickName ?? orignalName) // 0
What does ?? do ?
According to MDN docs, nullish coalescing is "a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand".
For example,
const result = x ?? y ;
// In the above code,
// -> y is returned , only if x has null or undefined (not '').
// -> x is returned if it has values other than null or undefined (including '').
The syntax looks confusing at first. the above example is same as below :
const result = (x!== undefined && x!== null) ? x : y;
This should make sense if you are familiar with ternary operator in Javascript. If not, refer this MDN docs.
The most common usecase of ?? is to set or provide a default value for a potentially undefined varibles. What do u mean by that ? Lets look at some more examples ,
Note ?
There are only two nullish values (null and undefined)
console.log(0 ?? 10) // 0 since neither of them is a nullish value
console.log(2 ?? 3) // 2 , since neither of them is a nullish value
console.log( null ?? 'john') // john , since null is a nullish value
console.log( undefined ?? 'john') // john , since undefined is also a nullish value
However, here is the case where it differs from ||
console.log(0 || 10) // 10 since, || operator looks for first truthy value, `0` being a falsy value is ignored and so 10 is printed
Ok, then , why does the code below (from one of the previous example) returns 0 ?
console.log(firstName ?? secondName ?? age ?? nickName ?? orignalName) // 0
Let me breakdown ,
firstName is undefined , a nullish value ,so it moves to secondName
secondName is null , a nullish value , so it moves to age
age is 0 , which is not a nullish value , so it returns age.
Make sense ? I know it looks confusing at first, it will make more sense as you get used to it.
|| vs ??
The main difference is,
-
||returns the firsttruthyvalue -
??returns the firstdefinedvalue
Challenge ?
To test your understanding , try to guess the correct answer for the below exercise before scrolling down to see the solution
let groceries = {
item1: {
name: 'apple'
color: 'red',
quantity: 5
},
item2 : {
name: ''
color: undefined
quantity: null
}
}
console.log((groceries.item2.color ?? groceries.item1.price ?? groceries.item1.name) || groceries.item1.color)
Solution ✔️
If your answer is apple, congrats ?, You are correct. Don't worry if you guessed it wrong. This will make more sense when you get used to it. Also, I will provide some additional resources to learn more about Nullish coalescing if this tutorial confuses you.(hopefully not ?? , ig)
Thanks for reading my post ??
Additional Resources ?
This content originally appeared on DEV Community and was authored by Nithish Kumar
Nithish Kumar | Sciencx (2021-05-23T11:25:30+00:00) Everything you need to know about nullish coalescing. Retrieved from https://www.scien.cx/2021/05/23/everything-you-need-to-know-about-nullish-coalescing/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.