cft

Short-Circuiting in JavaScript

In JavaScript short-circuiting, an expression is evaluated from left to right and each section is evaluated before moving to the next. If any of the sections in the expression provides the desired output, the evaluation will be stopped and it won't check the rest of the expression. Read More...


user

Jeffrin Mathew Benny

3 years ago | 2 min read

In JavaScript short-circuiting, an expression is evaluated from left to right and each section is evaluated before moving to the next. If any of the sections in the expression provides the desired output, the evaluation will be stopped and it won't check the rest of the expression.

Before going to short-circuiting, we can go through the concept of truthy and falsy values.



Falsy values

Falsy values are values that are not false but become false if we convert them to Boolean.

There are mainly 5 falsy values in JavaScript. They are 0, '' *(empty string)*, undefined, null, NaN.


console.log(Boolean(0)) // false
console.log(Boolean('')) // false
console.log(Boolean(undefined)) // false
console.log(Boolean(null)) // false
console.log(Boolean(NaN)) // false

Truthy values

The values that are not falsy are truthy values. They will become true if we convert them to Boolean.

console.log(Boolean(1)) // true
console.log(Boolean('Sample')) // true
console.log(Boolean([])) // true
console.log(Boolean({})) // true
console.log(Boolean(-1)) // true



Logical OR (||)

In the Logical OR expression, the sections in the expression are divided using the || symbol. In the OR expression, if the first value is a truthy value. It will return the first value and do not evaluate the next values.

And, if the first value is a falsy value, it will look the second part of the expression and if it is also a falsy one, it goes to the next and goes on like that. If every value in the expression is a falsy one, it will return the last section.

console.log(true || "Sample") // true
console.log(false || "Sample") // Sample
console.log(undefined || null) // null
console.log(1 || '') // 1
console.log(undefined || 0|| '' || "Hello" || 23 || null) // Hello

This can be used in various scenarios in code. A sample situation is given below. Consider we have to check whether a particular variable exists, and if it exists, we have to move the value to another variable. If not, we have to assign a default value to the new variable.

This can be done with the conditional operator.

// Conditional Operator
const newVar = oldVar ? oldVar : 10;
// Short Circuiting
const newVar = oldVar || 10;

Logical AND (&&)

In Logical AND expression, each of the sections is separated by the && symbol.

In Logical AND, if the first value is falsy, it immediately returns that value and does not validate the rest of the expression. If the first value is truthy, it goes to the second one and if it is also truthy, it goes to next, and so on. If all the values are truthy, it will return the last value.

We can consider it like this, for an AND expression to be true, all the values in that expression should be true. If any of the value is false, the entire expression is false and we don't need to evaluate further.

console.log(true && "Sample") // Sample
console.log(false && "Sample") // false
console.log(undefined && null) // undefined
console.log(1 && '') // ''
console.log(1 && true && -1 && 0 && 23 && null) // 0

Let us consider the below practical example. Consider invoking a function based on a variable value.

// Normal Method
if (isValid){
sampleFunction();
}
// Short Circuiting
isValid && sampleFunction();


The Nullish Coalescing Operator (??)

There is a condition in the Logical OR operator short-circuiting which doesn't provide the desired output. Consider the below code snippet.

const a = 0;
const val = a || 10; // val => 10

Here in this condition, even though the variable exists, it is not fetching the value of a to val, since 0 is a falsy value.

This can be corrected by using the Nullish Coalescing operator.

It will check for the nullish values (null and undefined) for short-circuiting and not zero or the empty string.

const a = 0;
const val = a ?? 10; // val => 0

Upvote


user
Created by

Jeffrin Mathew Benny


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles