Forem: Nithish Kumar

Everything you need to know about nullish coalescing

Nithish Kumar — Sun, 23 May 2021 11:25:30 +0000

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 💡
originalName is returned eventhough true is 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 first truthy value
?? returns the first defined value

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 👉

3 ways to clone an object in Javascript

Nithish Kumar — Mon, 17 May 2021 08:38:10 +0000

Before proceeding, let me explain very briefly about Primitive and Reference types in Javascript.

Primitive and Reference type

Javascript has 5 data types that can contain values. Number, string, Boolean , null and undefined. These are referred to as primitive data types. Basically these are passed by value.
Javascript has 3 data types that are passed by reference. Object,Functions and Arrays. Technically, these are all objects and called as reference data types
Primitive data types are immutable, which means their value cannot be modified once created.
Whereas, objects and arrays are mutable , meaning their value can be altered after creation.

Consider the following examples.

Let us start by copying/cloning a string

let message1 = 'hello everyone'
let message2 = message1
message2 = 'hello world'

console.log(message1) // 'hello everyone' ✅
console.log(message2) // 'hello world' ✅

So for so good,, everything is working as expected .
Let us implement the same logic for object

let myObj1 = {
  name : 'John Doe',
  age: 34
}

let myObj2 = myObj1
myObj2.name = 'Michael'

console.log(myObj1) //{name: 'Michael', age: 34} 😲 -> why does the original object `myObj2` got affected ?
console.log(myObj2) //{name: 'Michael', age: 34} ✅

🤔🤔
That's because objects are reference type(passed by reference). So, when you use '=', the pointer to the memory address of myObj1 is copied to myObj2. Not the actual value is copied. Since, reference type don't hold values, they are pointer to the value in memory space.

So,, how do you clone an object?

We can use variety of techniques such as the spread operator(...) or Object.assign() or with JSON.parse() and JSON.stringify().

1. Using spread (...)

let myObj1 = {
  name: 'John Doe',
  age: 34
}
let myObj2 = {...myObj1} 
myObj2.name = 'Michael'

console.log(myObj1) // {name: "John Doe", age: 34} ✅ Original object `myObj1` is not changed
console.log(myObj2) // {name: "Michael", age: 34} ✅

2. Using Object.assign()

let item1 = {
  pen: 23,
  pencil: 45
}

let item2 = Object.assign({}, item1)
item2.pen = 100
console.log(item1) // {pen: 23, pencil: 45} ✅ Original object `item1` is not changed
console.log(item2) // {pen: 100, pencil: 45} ✅

Note

Both of the above techniques only does a shallow copy(only the outer part). If you want to perform a deep copy(nested part), there are a few approaches to this problem. The simple technique is by using our well known friend JSON.parse() and JSON.stringify(). But, it is not recommended to do deep copy using this technique, instead , you can use libraries such
as lodash, which is easy to implement and also robust.

3. Using JSON (Not Recommended)

let obj1 = {a:1,b:2,c:{d :3}}
let obj2 = JSON.parse(JSON.stringify(obj1))
obj2.c.d = 45;

console.log(obj1) // {a: 1,b: 2,c: {d: 3}} ✅
console.log(obj2) // {a: 1,b: 2,c: {d: 45}} ✅