Logical Operators in JavaScript

Logical operators in JavaScript are used to perform logical operations, such as combining or inverting boolean values. They are fundamental for controlling the flow of your code, especially in decision-making processes. The three primary logical operators are

1.   && (AND),

2.   || (OR), and

3.   ! (NOT).

 

1. Logical AND (&&)

The logical AND operator (&&) returns true if both operands are true; otherwise, it returns false. It evaluates from left to right and stops (short-circuits) as soon as it encounters a false value.

 

Syntax

expr1 && expr2;

Example

let a = true;
let b = false;

let result = a && b;
console.log(result); // Output: false

In this example, result is false because b is false, and the && operator requires both operands to be true.

 

logicalAndOperator.js

let a = false;
let b = false;
console.log(`a: ${a}, b : ${b}, (a && b) : ${a && b}`);

a = false;
b = true;
console.log(`a: ${a}, b : ${b}, (a && b) : ${a && b}`);

a = true;
b = false;
console.log(`a: ${a}, b : ${b}, (a && b) : ${a && b}`);

a = true;
b = true;
console.log(`a: ${a}, b : ${b}, (a && b) : ${a && b}`);

Output

a: false, b : false, (a && b) : false
a: false, b : true, (a && b) : false
a: true, b : false, (a && b) : false
a: true, b : true, (a && b) : true

Short-Circuit Behaviour

If expr1 is false, expr2 is not evaluated because the result is already determined to be false. The && operator will return the first false value it encounters or the last value if both are true.

 

logicalAndShortCircuitBehavior.js

let a = 0;
let b = 5;

let result = a && (b++ > 10);
console.log(`a: ${a}`)
console.log(`b: ${b}`)
console.log(`result: ${result}`)

a = 1
result = a && (b++ > 10);
console.log(`\na: ${a}`)
console.log(`b: ${b}`)
console.log(`result: ${result}`)

Output

a: 0
b: 5
result: 0

a: 1
b: 6
result: false

1.   In the first scenario, because a is falsy (0), the right-hand side expression is not evaluated, and b remains 5.

2.   In the second scenario, because a is truthy (1), the right-hand side is evaluated, leading to b being incremented to 6.

3.   This illustrates how short-circuit behavior can prevent certain code from running depending on the truthiness of the initial conditions.

 

2. Logical OR (||)

The logical OR operator (||) returns true if at least one of the operands is true. It evaluates from left to right and stops (short-circuits) as soon as it encounters a truthy value.

 

Syntax

expr1 || expr2;

logicalOrOperator.js

let a = false;
let b = false;
console.log(`a: ${a}, b : ${b}, (a || b) : ${a || b}`);

a = false;
b = true;
console.log(`a: ${a}, b : ${b}, (a || b) : ${a || b}`);

a = true;
b = false;
console.log(`a: ${a}, b : ${b}, (a || b) : ${a || b}`);

a = true;
b = true;
console.log(`a: ${a}, b : ${b}, (a || b) : ${a || b}`);

Output

a: false, b : false, (a || b) : false
a: false, b : true, (a || b) : true
a: true, b : false, (a || b) : true
a: true, b : true, (a || b) : true

Short-Circuit Behaviour

If expr1 is truthy, expr2 is not evaluated because the result is already determined to be true. The || operator will return the first truthy value it encounters or the last value if both are falsy.

 

logicalOrShortCircuitBehavior.js

let a = 1;
let b = 5;

let result = a  ||(b++ > 10);
console.log(`a: ${a}`)
console.log(`b: ${b}`)
console.log(`result: ${result}`)

a = 0
result = a  ||(b++ > 10);
console.log(`\na: ${a}`)
console.log(`b: ${b}`)
console.log(`result: ${result}`)

Output

a: 1
b: 5
result: 1

a: 0
b: 6
result: false

1.   In the first scenario, because a is truthy (1), the right-hand side expression (b++ > 10) is not evaluated, and b remains 5.

2.   In the second scenario, because a is falsy (0), the right-hand side expression is evaluated, causing b to increment to 6.

3.   This example illustrates how the logical OR (||) operator can prevent the evaluation of subsequent expressions if the first operand is truthy, which can be useful for controlling the flow of code and avoiding unnecessary operations.

 

3. Logical NOT (!)

The logical NOT operator (!) inverts the truthiness of its operand. If the operand is truthy, it returns false; if the operand is falsy, it returns true.

 

Syntax

!expr;

 

logicalNotOperator.js

let a = true;
console.log(`a : ${a}, !a = ${!a}`)

a = false;
console.log(`a : ${a}, !a = ${!a}`)

Output

a : true, !a = false
a : false, !a = true

4. Double NOT (!!) Operator

The double NOT (!!) is often used to convert a value to a boolean. The first ! converts the value to its opposite boolean, and the second ! reverts it back to the original boolean representation.

 

doubleNotExample.js

let value = "Hello";
let booleanValue = !!value;
console.log(`value : ${value}, booleanValue : ${booleanValue}`);

value = 0;
booleanValue = !!value;
console.log(`value : ${value}, booleanValue : ${booleanValue}`);

value = 1;
booleanValue = !!value;
console.log(`value : ${value}, booleanValue : ${booleanValue}`);

value = 0.0;
booleanValue = !!value;
console.log(`value : ${value}, booleanValue : ${booleanValue}`);

value = NaN;
booleanValue = !!value;
console.log(`value : ${value}, booleanValue : ${booleanValue}`);

value = undefined;
booleanValue = !!value;
console.log(`value : ${value}, booleanValue : ${booleanValue}`);

value = null;
booleanValue = !!value;
console.log(`value : ${value}, booleanValue : ${booleanValue}`);

Output

value : Hello, booleanValue : true
value : 0, booleanValue : false
value : 1, booleanValue : true
value : 0, booleanValue : false
value : NaN, booleanValue : false
value : undefined, booleanValue : false
value : null, booleanValue : false

 

Previous                                                    Next                                                    Home