Logical operators in JavaScript

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.

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:

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.

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:

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.

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