Logical Operators in JavaScript

Hey Programmers, we are back with another article. Today we will look at logical operators in JavaScript in detail.

Let's get started...

There are four logical operators in JavaScript.

AND ( && )
OR ( || )
NOT ( ! )
Nullish Coalescing ( ?? )

Before getting started with logical operators, first understand the truthy and falsy values in JavaScript. There are 6 values that are evaluated as falsy values, they are null undefined NaN 0 '' ( Empty String ) and the Boolean false. Everything else is truthy value.

So, why do we need to know about truthy and falsy values? You will get your answer as you read the article further.

&& ( AND )

Normally, we use the logical && operator to check if all the given conditions are true.

Let's understand with an example,

let currentHour = 11;

if ( currentHour > 10 && currentHour < 18 ) {
    console.log('We are open');
}

Here, we are checking for two conditions, first currentHour should be greater than 10 and currentHour should also be smaller than 18. If both the condition becomes true, then only we will execute the if block. If one of the condition is evaluated to be false, the if block won't get executed.

If we give multiple operands to the && operator, it returns the first falsy value. Let's see how it evaluate.

const answer = value1 && value2 && value3;

The && operator evaluates each operand from left to right. That means, value1 will first get evaluated, then value2, and so on...

If any one of the operands is evaluated to be false, it stops there and returns it and no further evaluation is done. We will understand this using an example.

const answer = 1 && 2 && null && 'Junaid';

Consider the above example, the && operator will first check the value 1 which is true. The next value 2 which is also true. Now, it will look at the third value null. Remember, we said that null is evaluated to be false. So here null will get returned and the && operator will never check for the string Junaid and our answer variable will hold the value of null.

console.log(answer);    // null

Now, what if all operands are truthy? Hmm, what the && operator will do now? It turns out that, if all the operands are truthy, it returns the last operand.

const value = 1 && 2 && 3 && 4;

console.log(value);     // 4

|| ( OR )

The || operator is kind of opposite to the && operator. Given two conditions, the || operator returns true if any one of the given conditions is true.

let currentHour = 8;

if ( currentHour < 10 || currentHour > 18 ) {
    console.log( 'We are closed' );
}

In the code above, the value of currentHour is 8 which satisfies the first condition currentHour < 10. The || operator will not look at the second condition as the first one is true and it returns true which results in execution of the if block.

The || operator returns the first truthy value, unlike && operator which return the first falsy value

const name = '';
const lastName = 'shaikh';
const nickName = null;

const value = name || lastName || nickName;

console.log(value);     // shaikh

Just like the && operator, the || operator evaluates from left to right, when it finds any truthy value, it returns it and does not evaluate further. In the above example, the name is evaluated to be false, then it will check the second operand lastName which is true, hence it returns it.

`||` operator has lower precedence than the `&&` operator

What is precedence?

Think of it, like the numerical weightage given to the operators. Every operator in JavaScript has precedence.

Why it is important?

Usually, we use more than one operator in an expression. So, precedence decides which operator will execute first. The operator with higher precedence is executed before the operator with lower precedence.

What if we use an operator with the same precedence?

In that case, the expression is evaluated from left to right.

Learn more about operator precedence

Consider this example,

const value = 1 && 2 || 2 && 3;

console.log(value)

What the above code will print to the console? We said that the || operator has lower precedence than the && operator. First, 1 && 2 will get evaluated, then our expression becomes

const value = 2 || 2 && 3

Then 2 && 3 will get evaluated, our expression becomes

const value = 2 || 3

We know, || returns first truthy value, hence

const value = 2;

! ( NOT )

The ! operator accepts only one argument. The ! operator does the two things.

Convert the operand into boolean type
Reverse it and return the value.

const value = !0;

console.log(value)   // true

0 when converted into boolean, returns false then the ! operator returns the reversed value, hence we get true printed to the console.

One shortcut we can use is to convert the value into boolean type using the double NOT operator ( !! ). It reverses the value two times, hence we get the boolean conversion.

const convertedIntoBoolean = !!'Junaid';    // same as Boolean('Junaid')

console.log(convertedIntoBoolean)   // logs true

The ! operator has the highest precedence among other logical operators. In any logical expression, it will get executed first.

const result = !0 || 1 && 2;

console.log(result);    // true

In the above expression !0 || 1 && 2, the order of execution will be !, &&, and ||

?? ( Nullish coalescing )

The ?? operator returns the first defined value.

What is a defined value?

Any value which is not null or undefined is defined

const height = 0;

const result = height ?? 100;

console.log(result);    // 0

height in the code above is defined, hence we get 0 printed to the console. If height was set to null or undefined we would get 100 as a result.

Difference between `??` and `||` operator

The || operator returns the first truthy value. It considers all the falsy values as same. This means 0 or '' ( empty string ) also evaluated to be false ( because they are falsy ) but 0 is a valid value and we want the operator to return it, if it the variable has a value of 0.

To tackle such cases we use ?? operator. The ?? operator has the lowest operator precedence among other logical operators.

That's all for this article, folks. If you liked this article, you will love my tweets. I tweet about HTML, CSS, JavaScript, and everything in between.

Connect with me

Thank you for reading this, I will see you in the next post. Till then, keep coding! 😉

People vector created by vectorjuice - www.freepik.com