These three operators will help you write clearer and less error-prone code.
The Nullish Coalescing Operator
??), as in the code below:
The double question mark is a logical operator that returns the expression on the right-hand side of the mark when the expression on the left-hand side is
undefined values in a more concise way.
Nullish Coalescing Operator Syntax
The syntax for the nullish coalescing operator is very simple. It consists of two question marks
?? placed between two operands.
Here’s an example:
The code above assigns the
firstName variable value as the value of the
firstName value is
undefined, then the value
Guest will be assigned to the
username variable instead:
You can also write it this way:
let username = undefined ?? "Guest";
console.log(username); // "Guest"
As you can see, you don’t need an
if-else statement to check for
The nullish coalescing operator was created as an improved alternative to the OR operator
The OR operator was originally created to provide a default or fallback value when the left-hand expression is falsy, or evaluates to
But after some real-world uses, it’s clear that there are times when developers want to return values that are considered falsy, such as
0 and an empty string (
The use of the OR operator will prevent you from returning any falsy values at all. Consider the following example:
By using the nullish coalescing operator, you will only replace exactly
undefined values with the right-hand value.
The nullish coalescing operator can be used with any type of value, including numbers, strings, and objects.
Nullish Coalescing Operator Use Cases
The nullish coalescing operator is useful in a variety of situations where you need to check for
undefined values and provide a default value.
Here are several examples of common use cases:
Handling Missing Function Arguments
When a function is called, it’s possible that some of the arguments may be omitted.
The Nullish Coalescing Operator can be used to provide default values for a missing argument as follows:
Accessing Object Properties
When working with objects, it’s possible that a property may not exist or is
The Nullish Coalescing Operator can be used to safely access object properties and provide a default value when the property is missing:
Choosing Between a Variable and a Constant
You may want to select a value from a variable or a constant if the variable is
As you can see, the Nullish Coalescing Operator is a great feature that can make your code more concise and reliable.
?? with the
||) and AND (
&&) operators without parentheses
() separating the operators.
For example, the following code tries to see if either
lastName variable can be used as the value of
username before using
"Guest" as its value:
The following code will first evaluate the expressions inside the parentheses:
And that’s how you combine the nullish coalescing operator with either AND or OR operator.
The Optional Chaining Operator
The optional chaining operator
?. gives you a safe way to access properties and methods of an object, avoiding an error in the process.
For example, suppose you have a
car object as follows:
In the example above, accessing the
manufacturer property returns
undefined, but when you try to access the
address property of the
undefined back, just like when we try to access the
This is why the optional chaining operator was created. The operator returns either the value of the property, or
undefined when the property is
To use the operator, just add a question mark in front of the dot
The optional chaining operator can be added anytime you use the dot notation to access a property or method.
This operator allows you to avoid the TypeError that occurs when accessing a property or calling a method from a non-existent property:
Note that the optional chaining operator only checks the value before it. If the
car variable can be
null, then you need to add the operator after when accessing the
car object as well.
See the following example:
And that’s how the optional chaining operator works. It’s really useful when you’re working with objects in your project.
Next, let’s learn about the destructuring assignment.
Destructuring Assignment Operator
- It helps you to avoid code repetition.
- It keeps your code clean and easy to understand.
Let’s see how you can destructure an array and an object next.
Here’s how you normally assign an array values to variables:
The code above works, but you need two lines of code to get two elements from an array. Using the destructuring assignment, you can assign array elements into variables in one short line:
The above code will return the same value for
secondIndex variable. No matter how many elements you have, the destructuring will start from the zero index.
To create a destructuring assignment, you need to add square brackets
 after the
const keyword. When you add square brackets after the assignment (
=) operator, it’s an array. If you add them before the assignment operator, it’s a destructuring assignment.
You can also use the rest operator
… to copy the rest of the values after your assignment. Take a look at the following example:
rest variable will contain an array with values of
You can also put default values for these variables when the extracted value is undefined:
You can also immediately assign the return of a function into assignments. This is frequently used in libraries like React:
a will return "John" and
b will return "Jack".
Finally, you can also ignore some variables by skipping the assignment for that index:
Destructuring assignment makes unpacking array values easier and shorter, with less repetition.
Just like arrays, you can destructure objects the same way, but instead of using the square brackets (
) you need to use the curly brackets (
You can use the colon delimiter (
:) to assign the property into a different name. The example below assign the value of
Note that you still only create two variables:
firstName is assigned to
name, so it won’t create a separate variable.
Just like arrays, you can destructure an object returned by a function immediately:
Also, you can destructure an object from the function parameters, exactly when you define the function:
Until next time!