JavaScript: Short Circuit evaluation

Are you using short-circuit evaluation yet, this beautiful concept of JavaScript can increase your codes productivity

JavaScript: Short Circuit evaluation

Short-circuit evaluation happen when the conditionals use && or ||

You must have seen some JavaScript code such as:

user.email && sendEmail()

So, what does the above code mean?

We can also write above code as:

if (user.email) {
    sendEmail()
}

Wow, what just happened there!!!

Well, this concept is called Short Circuit evaluation.(Explained later)

Let us take one more example:

let name = user.name || 'No name'

Translated code:

let name = ''
if (!user.name) { 
 name = 'No name'
}
else {
 name = user.name
}

We always look for errors first, and then execute the code

So, what is going on over here.

AND (&&) operator

We know that for an AND operator to be true, both the values must be true.

To understand how short-circuiting works with AND operator, we need to understand how it works in JavaScript.

a && b

1. Check a
2. if a is false, then
3. return a, don’t move forward
4. if a is true
5. return b

In JavaScript AND operation, short-circuiting means if the first operand is false then don’t even bother look at the second operand, just return the first operand (Short-circuit it)

Understanding the previous example

user.email && sendEmail()

The above example says that,

if user.email is truthy, then execute sendEmail() function.

If user.email is falsy, then sendEmail() will never execute.

Examples

true1 && true2
// true2
true1 && false1
// false1
false1 && true1
// false1
false1 && false2
// false1

More Examples

let a = 1 && '2'
// a = '2'
let a = 1 && 0
// a = 1
let a = '' && 1
// a = ''
let a = 0 && null
// a = 0

But what about this:

let a = -1 && 0

Type your answers in the responses.

For this you need to all the Truthy and Falsy values in JavaScript.

OR (||) operator

We know that for an OR operator to be true, only one of the values must be true.

To understand how short-circuiting works with OR operator, we need to understand how it works in JavaScript.

a || b

1. Check a
2. if a is false, then
3. return the b
4. if a is true, then
5. return the a, don’t move forward

In JavaScript OR operation, short-circuiting means if the first operand is true then don’t even bother look at the second operand, just return the first operand (Short-circuit it)

Understanding the previous example

let name = user.name || 'No name'

The above example says that,

if user.name is truthy, then set name as user.name .

if user.name is falsy, then set name as 'No Name' .

Examples

true1 || true2
// true1
true1 || false1
// true1
false1 || true1
// true1
false1 || false2
// false2

More Examples

let a = 1 || '2'
// a = 1
let a = 1 || 0
// a = 1
let a = '' || 1
// a = 1
let a = 0 || null
// a = null

But what about this:

let a = -1 || 0

Type your answers in the responses.

Cheat Table

JavaScript — Short-circuit evaluation in table form

I have prepared a little cheat table for you guys.

Tricky

Ready to take up a challenge?

Solve the below problems and put your answers in responses.

null || undefined || 3 || 0 || 1;

1 && '' && true && 4;

'' || 5 && null || -1 && -Infinity;

Conclusion

JavaScript short-circuit is a great way to decrease your effort of writing code and increase your proficiency.

People coming from other languages might not have this feature.

This is one of the w̶e̶i̶r̶d̶ awesomely weird parts of JavaScript