DEV Community: Nisarg Kapkar

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

Nisarg Kapkar — Sat, 06 Nov 2021 12:45:34 +0000

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

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 😄

ELI5 JavaScript: The Spread Operator

Nisarg Kapkar — Thu, 21 Oct 2021 16:51:52 +0000

One of the most useful features introduced in ES6 is the Spread Operator. It is denoted by three dots (...).

According to MDN Web Docs:

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Sounds complex right?
Don't worry, read this article till the end, and I will make sure you know the ins and outs of the Spread Operator :)

As the name suggests, the spread operator is used to 'spread' out the elements of an iterable (string, array, etc.). Let's look at an example:

let arr = ["This", "is", "an", "array"]
console.log(arr) 
console.log(...arr) //with spread operator

//output
["This", "is", "an", "array"]
This is an array

Okay! Now let's look at some use cases of the spread operator.

Table of Content

Passing arguments to functions
Copying arrays/objects

2.1 Arrays
2.2 Objects
Combining arrays/objects

3.1 Arrays
3.2 Objects
String to characters

1. Passing arguments to functions

let num = [1, 2, 3 ,4]
console.log(Math.min(num[0], num[1], num[2], num[3]))

Instead of passing each element separately, you can use the spread operator!

console.log(Math.min(...num))

2. Copying arrays/objects

Use the spread operator to create copies of arrays & objects.

2.1 Arrays

let arr1=["a", "b", "c", "d"]
let arr2 = arr1 
let arr3 = [...arr1]
arr1.push("e")
console.log("arr1 = ", arr1)
console.log("arr2 = ", arr2)
console.log("arr3 = ", arr3)

Can you guess the output?

//output 
"arr1 = " ["a", "b", "c", "d", "e"]
"arr2 = " ["a", "b", "c", "d", "e"]
"arr3 = " ["a", "b", "c", "d"]

Let's understand what happened...

The assignment operator (=) creates a reference to the original array. So here, arr2 is just a reference to arr1. Both arr1 and arr2 point to the same array in memory!
To make a copy, we use the spread operator! By using the spread operator we make a new copy of the array in the memory. Now changes made to arr1 will not be reflected in arr3 (and vice-versa)

2.2 Objects

let obj1 = {
    firstName: "Nisarg",
    lastName: "Kapkar",
    website: "Hashnode",
    twitter: "@nnkkaapp"
}
let obj2 = obj1 
let obj3 = {...obj1}
obj1.website = "Medium"

Similar to arrays, changing obj1 changes obj2 but not obj3.

NOTE:
While copying arrays/objects, the spread operator only goes one level deep.

let num1 = [[1, 2], [3, 4], [5, 6]]
let num2 = [...num1]
num1[0][0] = 100
console.log(num1)
console.log(num2)

Here, both num1 and num2 will be equal to [[100, 2], [3, 4], [5,6]].
A similar thing happens when you copy nested objects using the spread operator.
The nested arrays/objects inside an array/object are just references. So when you use the spread operator to copy, the nested arrays/objects are not copied (rather their references are copied)

3. Combining arrays/objects

Use the spread operator to combine arrays & objects (and insert elements in arrays & objects)

3.1 Arrays

let arr1 = [1, 2, 3, 4]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, 7, ...arr2, 8]
console.log(arr3)

arr3 will contain 1, 2, 3, 4, 7, 4, 5, 6, 8 (arr1 elements+7+arr2 elements+8)

3.2 Objects

let obj1 = {
    firstName: "Nisarg",
    lastName: "Kapkar",
    website: "Hashnode"
}
let obj2 = {
    twitter: "@nnkkaapp",
    website: "Medium"
}
let obj3 = {...obj1, ...obj2, dob: "23/12/2000"}
console.log(obj3)

//output
{
    firstName: "Nisarg",
    lastName: "Kapkar",
    website: "Medium",
    twitter: "@nnkkaapp",
    dob: "23/12/2000"
}

NOTE:
If there are multiple values for the same key (in the above example: 'website'), the last encountered value is assigned, and all the previous values are overwritten (in the above example, 'Hashnode' is overwritten by 'Medium')

4. String to characters

let firstName = "Nisarg" 
console.log([...firstName])

Since a string is iterable, we can use the spread operator on it. The output of above code will be ["N", "i", "s", "a", "r", "g"]