JavaScript Logical Operators Examples

JavaScript Logical Operators; In this tutorial, you will learn how to use JavaScript logical operators. They are logical NOT operator( !), the logical AND operator ( &&) and the logical OR operator ( ||).

When you work with javascript conditional statements, the logical operators are performing a very important role. Because they allow you to compare variables and take some action based on the result of that comparison.

JavaScript provides three logical operators, they are:

• ! (Logical NOT)
• || (Logical OR)
• && (Logical AND)

The following table illustrates logical operators

Operator	Description
&&	&& is known as AND operator. It checks whether two operands are non-zero (0, false, undefined, null or “” are considered as zero), if yes then returns 1 otherwise 0.
||	|| is known as OR operator. It checks whether any one of the two operands is non-zero (0, false, undefined, null or “” is considered as zero).
!	! is known as NOT operator. It reverses the boolean result of the operand (or condition)

1) The Logical NOT operator (!)

In javascript, !  sign represents the logical NOT operator. The ! operator can invert the value of a boolean.

Use ! operator to a boolean value, the ! returns true if the given value is false and returns false if the given value if true.

See the following example

let a = false,
    b = true;

console.log(!a);
console.log(!b);

Output:

true
false

In this example, the a value is false and !b value is true. So a returns true, the !b returns false.

Sometimes, you need to use this ! operator to a non-Boolean value. It converts the value to a boolean value and then negates it.

See the following example to show you, how to use the ! operator:

!a

The logical not ! operator works based on the following rules:

• If a is undefined, the result is true.
• If a is null, the result is true.
• If a is a number other than 0, the result is false.
• If a is NaN, the result is true.
• If a is null, the result is true.
• If a is an object, the result is false.
• If a is an empty string, the result is false. In case a is a non-empty string, the result is true.

Don’t worry, when you use non-boolean value with logical ! operator. It will convert to boolean and execute the js script.

See the following examples:

console.log(!undefined); // true
console.log(!null); // true
console.log(!20); //false
console.log(!0); //true
console.log(!NaN); //true
console.log(!{}); // false
console.log(!''); //true
console.log(!'OK'); //false
console.log(!false); //true
console.log(!true); //false

Double-negation (!!)

Javascript double negation (!!). The !! uses the logical NOT operator (!) twice to convert a value to its real boolean value.

See the following example:

let num = 10;
console.log(!!num); // true

The js double negation (!!) opeator, perform different task in script. The first ! operator returns a Boolean value of the num variable. And the second one ! negates that result and returns the real boolean value of the num variable.

2) The Logical AND operator (&&)

In javascript, &&  sign represents the logical AND operator. And the logical AND &&  operator is work with two or more operands. 

The following illustrates the uses && operator:

let result = a && b;

If a can be converted to true, the && operator returns the b; otherwise, it returns the a. In fact, this rule is applied to boolean values.

Next, use js && operator with if else statement. If both values satisfied condition, it will retrun true, otherwise return false.

See the following example:

let a = 5;
let b = 10;

if (a == 5 && b == 10) {
  console.log( 'return true' );
}else{
   console.log( 'return false' );
}

In this example, both aand bare true, therefore, it will satisfy the given condition.

If one value is not satisfied with the given condition, it will return false, otherwise, return true.

See the following example:

let a = 5;
let b = 10;

if (a == 5 && b == 20) {
  console.log( 'return true' );
}else{
   console.log( 'return false' );
}

In this example, the a is 5 and  b is 10 . But in the if else statement, pass the == 5 and b == 20. So is not satisfy the given condition.

Use multiple && operators

The following expression uses multiple && operators:

let result = value1 && value2 && value3;

The && operator carries the following:

• Evaluates values from left to right.
• For each value, converts it to a boolean. If the result is false, stops and returns the original value.
• If all values are truthy values, returns the last value.

In other words, The && the operator returns the first falsy value or the last value if none were found.

If a value can be converted to true, it is so-called a truthy value. If a value can be converted to false, it is so-called falsy value.

3) The Logical OR operator (||)

In javascript, ||  sign represents the logical OR operator. And the logical OR ||  operator is works with two or more operands. 

let result = a || b;

If a can be converted to true, returns a; else, returns b. This rule is also applied to boolean values.

The || operator returns false if both values evaluate to false. In case either value is , the || operator returns true.

See the following example:

let a = true,
    b = false;

console.log(a || b); // true

The Next, following example uses || operator to the non-boolean values:

In this example, the a < 6 || a > 10 returns true because of one of the condition (a < 6) is met true.

See another example:

let a  = 5;

if (a < 6 || a > 10) {
  console.log('true');
}else{
  console.log('false');
}

The || operator is also short-circuited

Similar to the && operator, the || operator is short-circuited. It means that if the first value evaluates to true, the && operator doesn’t evaluate the second one.

Use multiple || operators

The following example shows how to use multiple || operators in an expression:

let result = value1 || value2 || value3;

The || operator does the following:

• Evaluates values from left to right.
• For each value, converts it to a boolean value. If the result of the conversion is true, stops and returns the value.
• If all values have been evaluated to false, returns the last value.

In other words, the chain of the || operators return the first truthy value or the last one if no truthy value was found.

Remember the Points:

• The NOT operator (!) negates a boolean value. The (!!) converts a value into its real boolean value.
• The AND operator (&&) is applied to two Boolean values and returns true if both values are true.
• The OR operator (||) is applied to two Boolean values and returns true if one of the operands is true.
• Both && and || operator are short-circuited. They cab be also applied to non-Boolean values.
• The logical operator precedence from the highest to the lowest is !, && and ||.

Conclusion

In this tutorial, you have learned javascript logical NOT operator( !), the logical AND operator ( &&) and the logical OR operator ( ||).

Recommended JavaScript Tutorial