The Elvis operator, also known as the ternary null coalescing operator, is a shorthand way of writing an if-else statement in JavaScript that checks for null or undefined values. The operator is represented by a question mark (?) followed by a colon (:). It is used to provide a default value for a variable if the variable is null or undefined. This operator can help to make your code more concise and easier to read.
The basic syntax of the Elvis operator is as follows:
variable = condition ? value_if_true : value_if_false;
The above code can be read as "If the condition is true, then assign the value_if_true to the variable, otherwise assign the value_if_false to the variable."
For example, if you have a variable named "user" that may be null or undefined, you can use the Elvis operator to provide a default value:
let user = fetchUser(); // suppose we are fetching the user info from server let username = user ? user.name : 'Guest';
Here, we first fetch the user object, if it exist we access the property "name" otherwise we assign "Guest" as the default value.
The Elvis operator can also be used to access nested properties of an object, without having to check for null or undefined values at each level
let user = fetchUser(); let address = user?.address?.street;
Here we are trying to access the street of the address of the user. The operator checks for each level if it is defined or not, if not it will return undefined. This can be a very helpful technique for avoiding TypeError when trying to access properties of complex object structures.
It's important to note that the Elvis operator is a short-circuit operator, which means that it will only evaluate the second and third expressions (value_if_true and value_if_false) if the first expression (condition) is null or undefined.
let user = null;
let name = user?.name; // return undefined
let user = {name: "John"}
let name = user?.name; // return "John"Another use case for the Elvis operator is when working with function arguments. Imagine that you have a function that takes in a parameter, but you want to set a default value if the parameter is not provided. Here is an example:
function sayHello(name = "User") {
console.log(`Hello, ${name}!`);
}This is a very basic example and this is already covered by the default parameters, however, the Elvis operator provides a more elegant solution for these cases.
In summary, the Elvis operator is a useful shorthand method in JavaScript for checking for null or undefined values and providing a default value. It can be used to access nested properties of an object, as well as for providing default values for function parameters. It can help to make your code more concise and easier to read. However, it should be used carefully, as it could make your code harder to understand for other developers who are not familiar with this operator. It is always a good practice to add comments to explain the purpose of the operator when you use it in your code.