Write beautiful and Elegant Javascript code with short-circuit evaluation.

Article posted using bloggu.io. Try it for free.

Imagine the scenario where you have a variable supposed to be an array and you want to get its length. But the variable could also be null or undefined for some reason that doesn’t depend on you. If the variable is not an array, trying to access its length will raise an exception:

Uncaught TypeError: Cannot read properties of null (reading 'length').

A very nasty thing for our end users to see. As we are good devs, we know we should prevent unexpected exceptions to be raised. To fix this one we might first try to verify if the data supposed to be an array is really an array, before accessing its length. Like this:

let length = 0
if Array.isArray(arr) {
	length = arr.length
}

And that is not bad. It’s even the normal way to do it.

But look at this instead:

let length = (arr || []).length

You agree with me, that is more beautiful, short and elegant. And that, that is short-circuit evaluation.

Now let’s dive into it.

We already know about logical operators in Javascript:

• logical AND (&&)
• logical OR (||)
• logical NOT (!)

But we can use them to do some tricks:

Return the first expression evaluated to false

You can use &&. Here are some examples:

50 && true && 1 && false // Return: false
1 && 0 // Return: 0

If all expressions are evaluated to true then it returns the last expression:

5 && 6 && true && 100  // Return: 100

Return the first expression evaluated to true

Then you can use ||. Here are few examples:

0 || false || 10 // return: 10

We can use it to display default value when trying to access attribute that might not exist, might be null or undefined.

So, instead of:

message = 'There is no information available'
if (website.data) {
    message = website.data
}

we can do this:

message = website.data || "There is no information available"

We are at the end. I hope you liked this article. Follows me for more tricks and tips about Javascript, Python, Django and React.