Can you chain the Elvis operator in Javascript?

The short answer is yes, it is possible to chain the Elvis operator in JavaScript. This is done by including multiple Elvis operators in a single expression, each one checking for null or undefined values at different levels. Here's an example of chaining the Elvis operator to access a nested property of an object:

let user = fetchUser();
let street = user?.address?.street;

In this example, the Elvis operator is used twice to access the "street" property of the "address" object, which is a nested property of the "user" object.

The first Elvis operator checks if the user object exist, if yes it returns the address object and if not it return undefined. Then the second Elvis operator checks if the address object exist, if yes it returns the street property and if not it return undefined. This can be helpful when working with complex object structures, where you would otherwise have to check for null or undefined values at each level manually.

It's important to keep in mind 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.

Chaining the Elvis operator can also be useful when working with function arguments, it allows you to provide default values for multiple parameters in a concise way. Here's an example of chaining the Elvis operator to provide default values for multiple parameters of a function:

function sayHello(name = "User", age = "Unknown") {
    console.log(`Hello, ${name}, age ${age}!`);
}

It's also possible to chain the Elvis operator with logical operators like "or" (||) and "and" (&&), this allows you to chain together multiple expressions and check for null or undefined values in more complex situations.

let data = fetchData();
let result = data?.value1 || data?.value2 && data?.value3;

In this example, first we check if the data.value1 exists, if yes then we return it, otherwise we check for data.value2 and data.value3, if any one of these exists we return it otherwise we return undefined.

In conclusion, chaining the Elvis operator can be a powerful technique in JavaScript for checking for null or undefined values and providing default values in a concise way. It can be particularly useful when working with complex object structures and function arguments. However, it is important to be mindful of the short-circuit nature of the Elvis operator and the potential for confusion when chaining multiple expressions. It is always a good practice to add comments to explain the purpose of chaining the operator when you use it in your code, this way other developers can understand the reasoning behind the decision.

Additional resources
  • Frontend web development courses

    Beginner-friendly courses focusing on HTML, CSS, and JavaScript.

    View Courses
  • Frontend web development projects

    Beginner-friendly projects focusing on HTML, CSS, and JavaScript.

    View Projects
  • Free website templates

    Collection of free, high-quality website templates for your next project.

    View Templates