Examples to learn Elvis Operator in JavaScript for Easy coding

Elvis Operator Javascript

The elvis operator in Javascript provides a concise and efficient way to handle conditional expressions and default values. It is also known as the nullish coalescing operator. It is a shorthand syntax introduced in ECMAScript 2020 to simplify conditional expressions and provide a concise way to assign values.

What is Elvis operator?

The Elvis operator represents double question marks (??). We can assign two values ​​to a variable using Elvis operator but only one of the two values ​​is assigned. If the first value contains ‘null or undefined’ then the second value is assigned otherwise the first value is assigned.

It works like a ternary operator, in a ternary operator (?:) if the condition is true then the statement before colon is executed and if false then the statement after a colon is executed. Similarly in the Elvis operator, if the first value is null or undefined then the value after the Elvis operator (??) is returned else the value before the Elvis operator (??) is returned

Syntax:

const name = Value1 ?? Value2;

Why should we use the Elvis operator?

  • It provides a straightforward syntax for handling null or undefined values and assigning default values.
  • Instead of writing multiple if-else statements or ternary expressions, we can use the Elvis operator to achieve the same result.
  • In scenarios where you need to assign a default value when a variable is null or undefined, the
  • Elvis operator eliminates the need for repetitive conditional checks.
  • When defining functions with optional parameters, the Elvis operator can be employed to assign default values when the optional parameters are omitted.
  • This Elvis operator allows us to handle these nullable values effectively and assign appropriate default values.
READ ALSO  4 Easy Ways to string substitution in JavaScipt

How to use the Elvis operator?

If we use elvis operator, we must give the variable name before the Elvis symbol (??) and don’t give the string directly, because then it will check whether a variable is null or undefined values. After Elvis symbol l (??), we can directly give a value or variable name.

Example 1

const user = null;

const name = user ?? "hello" ;
document.write(name);

//Output : hello

In this above code, we assign the value of ‘user’ to ‘name’ variable. If ‘user’ is null or undefined, the default value of ‘hello’ is assigned to the variable ‘name’ instead. However, we set the value ‘null’ to variable ‘user’. So the Elvis operator returns the value of ‘hello’ to the variable ‘name’ and the console will log ‘hello’.

Example 2

const score = 0;
const finalScore = score ?? 100;
console.log(finalScore);

In this above code, we assign the value of ‘0’ to variable ‘score’. Then we assign the value of ‘score’ to variable ‘finalScore’. If score is null or undefined, the default value of 100 is assigned instead. However, since score is 0 (a falsy value but not null or undefined), the Elvis operator returns the value of score itself, and the console will log 0.

Example 3

function getUsername(user) {
return user?.name ?? 'Guest';
}

// Example usage
const user1 = { name: 'John' };
const user2 = null;

console.log(getUsername(user1)); // Output: 'John'
console.log(getUsername(user2)); // Output: 'Guest'

In the above example, the getUsername function takes a user object as an argument. The ?. the operator is used to access the name property of the user object, and if the user object is null or undefined, it will return the default value ‘Guest’ using the ?? operator.

READ ALSO  How to Set Data Attribute using JavaScript?

Conclusion

So you can use the Elvis operator as in the above examples. By adopting the Elvis operator, you can enhance the readability of your code while ensuring robustness when dealing with potentially null or undefined values.

Leave a Reply