Search for Articles, Topics

# Logical operators in JavaScript

Challenge Inside! : Find out where you stand! Try quiz, solve problems & win rewards!
Learn via video course
JavaScript Course With Certification: Unlocking the Power of JavaScript
By Mrinal Bhattacharya
Free
4.8
Enrolled: 1000
JavaScript Course With Certification: Unlocking the Power of JavaScript
Mrinal Bhattacharya
Free
4.8
Enrolled: 1000

## Overview

In real life, when we want to make decisions, we prefer a logical way if we are given a choice between right and wrong, logically and morally, we choose right, in the same way during programming, we have to make decisions, and for that purpose, we use conditional statements in javascript like if-else but what if we have to make our decision based on two or more conditions? In such cases, where we have to make decisions based on multiple conditions, we use logical operators.

## Logical AND (&&) , OR (||) , NOT (!) operators

JavaScript's logical operators are powerful tools for comparing operands and executing tasks based on the comparison result. When comparing values, boolean values are returned. These operators, including AND (&&), OR (||), and NOT (!), are commonly used in decision-making and looping scenarios.

Note:

Truthy values: Truthy values in JavaScript are those that are evaluated as true in a Boolean context (e.g., conditions, loops). All values in JavaScript are truthy except false, NaN, 0, an empty string, undefined, and null, which are falsy.

Falsy values: The values which are considered false when they are used in a Boolean context (e.g. in conditions or loops) are said to be Falsy values.

This is due to the type coercion in JavaScript which is a process of converting a value from one type to another.

### 1. Logical AND (&&) operator

he logical "AND" operator in JavaScript, represented by "&&", evaluates two operands. If both operands are true, it returns true. Otherwise, it returns false. It is often used to combine multiple conditions in conditional statements, ensuring that all conditions must be true for the overall expression to be true. Please refer to the truth table given below:

Operand OneOperand TwoOne && Two
truefalsefalse
falsetruefalse
falsefalsefalse
truetruetrue

In the above-given table, you can see that we get false whenever any of the operands is false, and we get true only when both of the operands are true.

Examples:

Using && in a if condition

In the provided code, there are two variables: 'value_1' (10) and 'value_2' (20). The program checks if both values are positive. If true, the if block executes; otherwise, the else block executes. The console.log inside the else block ran since one value was negative.

### 2. Logical OR (||) operator

The || operator in JavaScript returns the first truthy operand encountered, or the value of the last falsy operand if all values are falsy. In short, it returns true if any operand is true and false only if all operands are false. Please refer to the truth table given below.

Operand OneOperand TwoOne && Two
truefalsetrue
falsetruetrue
truetruetrue
falsefalsefalse

In the above-given table, you can see that we get true whenever any of the operands is true, and we get false only when both of the operands are false.

Examples:

Using || in a if condition

Output:

In the code, we have two variables: value_1 with a value of 10 and value_2 with a value of -10. The program checks if both values are negative. If they are, the statements in the else block execute; otherwise, the if block executes. In this case, the console.log statement inside the else block executed, indicating that both values are negative

### 3. Logical NOT (!) operator

Whenever there is a need to inverse the boolean value, the logical NOT (!) operator is used. This logical operator in JavaScript is also called logical complement as it converts the truthy value to the falsy value and the falsy value to the truthy value. Please refer to the truth table given below:

Operand!Operand
truefalse
falsetrue

In the above-given table, we get false if we apply logical ! operator on boolean true and get false vice-versa.

Example:

Using ! in a if condition

Output:

Explanation:

In the given code, with one positive and one negative variable, we utilized the || operator in the if statement. By attaching a logical NOT (!) to the OR expression's result, the else block executed. The OR operator returns true if either or both operators are true. However, the NOT operator inverted the result, making it false. This led to the execution of the else block. Let's now explore short-circuit evaluation.

### Double NOT (!!) operator

Double NOT (!!) means Not of a Not. This logical operator in JavaScript is used to get the boolean value of any type of value.

Operand!!Operand
truetrue
falsefalse

Example:

Output:

To understand clearly, we are breaking down the conversion of the last example, For !!true, first we get !true, which is false then we do !false which is true. Hence the final result is true.

## Short-circuit evaluation

JavaScript's Logical AND "&&" and Logical OR "||" operators use short-circuit evaluation. When encountering a boolean value that doesn't meet their condition, they promptly return false or true (for logical AND and OR, respectively) without evaluating subsequent values. This efficient evaluation saves time, enabling faster decisions.

### 1. For Logical AND (&&) operator

As said above, the Logical AND (&&) operator in JavaScript is a short-circuit operator and we know that the Logical AND (&&) operator returns true only when both of the operands (if there are only two operands) or all of the operands returns true Hence if it finds any falsy value, it does not evaluate further values, it just returns that falsy value immediately. Let us understand this with an amazing example of having two cases.

Case 1:

Output:

So, when the above code got executed, we got false in the console. But why? Just because of short-circuiting evaluation. As the variable 'val' is set to false, when the Logical AND (&&) operator encountered 'val' it got a false value which satisfied its condition to be false; hence without further evaluation, it returned false immediately. Now we will see another case when we have set the 'val' to true. Let's see.

Case 2:

Output:

When the above code got executed, we got 3 in the console. But How? As we have set the value of 'val' to be true, when the Logical AND (&&) operator encountered 'val' it did not satisfy its falsy condition; hence it further evaluated the expression and returned 3 as 0+3 equals 3.

### 2. For Logical OR (||) operator

As said above, the Logical OR (||) operator in JavaScript is a short-circuit operator, and we know that the Logical OR (||) operator returns false only when both of the operands (if there are only two operands) or all of the operands returns false Hence if it finds any truthy value, it does not evaluate further values, it just returns that truthy value immediately. Let us understand this with an amazing example of having two cases.

Case 1:

Output:

So, When the above code got executed, we got 3 in the console. But How? As we have set the value of 'val' to false, when the Logical OR (||) operator encountered 'val' it did not satisfy its truthy condition; hence it further evaluated the expression and returned 3 as 0+3 equals 3. Now we will see another case where we have set the 'val' to true.

Case 2:

Output:

In the above-given example, as the variable 'val' is set to true, when the Logical OR (||) operator encountered 'val' it got a truthy value which satisfied its condition to be true, hence without further evaluation, it returned true immediately. Hope it is clear now. Now we are going to see operator precedence.

## A chain of && operators

When there are multiple && operators in a single expression, it's called a chain of && operators. There can be any number of && operators in a single expression as per the situation. The && operator evaluates the expression from left to right and returns the first false value that it encounters. In case it does not encounter any false value in the whole expression, then it simply returns the last value.

let us understand this with the help of an example: Example:

Explanation: Case 1: In case one, when the given expression evaluates, 0 is returned as its the first false value. Case 2: In case two, when the given expression evaluates, false is returned as its the first false value. Case 3: In case three, 3 is returned as there's no falsy value, and its(3) is the last truthy value.

## A chain of || operators

When there are multiple || operators in a single expression, it's called a chain of || operators. There can be any number of || operators in a single expression as per the situation. The || operator evaluates the expression from left to right and returns the first truthy value that it encounters. In case it does not encounter any truthy value in the whole expression, then it simply returns the last value.

let us understand this with the help of an example:

Example:

Explanation: Case 1: In case one, when the given expression evaluates, 1 is returned as its first truthy value. Case 2: In case two, when the given expression evaluates, true is returned as its the first truthy value. Case 3: In case three, 0 is returned as there's no truthy value, and its(0) is the last falsy value.

## Logical Operator Precedence

JavaScript evaluates multiple logical operators in a single expression by following operator precedence. This determines the order in which operators are evaluated. For example, the AND operator (&&) is evaluated before the OR operator (||), ensuring higher priority for certain operators during evaluation.This priority is in the following order ranging from highest to lowest.

1. Logical NOT (!)
2. Logical AND (&&)
3. Logical OR (||)

Example Now we are going to see an example of logical operator precedence in JavaScript. Code:

Output:

As we know that the logical NOT (!) operator is given precedence over the remaining two logical operators in JavaScript, it is evaluated first, hence after the first step of the evaluation, the above-given expression will look like (false || false && true) then for the next evaluation, the Logical AND (&&) is given precedence hence the expression will look like (false || false), then, at last, the logical || operator gets evaluated and false gets printed in the console.

## Supported Browsers

The list of the supported browsers as mentioned below:

1. Google Chrome 6 and above
2. Edge 12 and above
3. Firefox 4 and above
4. Safari 5.1 and above
5. Internet Explorer 9 and above
6. Opera 12 and above

## Conclusion

• The logical operators in JavaScript are Logical AND (&&), Logical OR (||), and Logical NOT(!).
• We can use logical operators in JavaScript to make decisions when there are multiple conditions.
• When there is a chain of && operators, the first falsy value is returned after the evaluation of the expression.
• When there is a chain of || operators, the first truthy value is returned after the evaluation of the expression.
• The Logical AND (&&) and Logical OR (||) operators support short-circuit evaluation.
• The operator precedence is in the following order: 1. Logical NOT (!) 2. Logical AND (&&) 3. Logical OR (||).