All TutorialsCoursesEvents & Contests
loading

Sign in to Track Your Progress

Module

Logical Operators in JavaScript

Operators in JavaScript

Logical Operators in JavaScript

Type Conversion in JavaScript

Modules

Sign in to Track Your Progress

Logical Operators in JavaScript

By Mukul Latiyan

Updated on : 14 Oct 2022

7 mins read

Published on : 14 Oct 2022

JavaScript Boolean

In JavaScript, a boolean data type has two possible values: true or false. And, if we create variables whose values are either one of the boolean types, those variables are called boolean variables.

Below are two boolean value variables.
const isStudying = true;
const working = false;
The interesting thing to note here is that anything in JavaScript that contains a "value" in it is said to be true in nature or truthy.
Consider the truthy values shown below.
10
2.55
-11
"Masai School"
"false"
1+2+3
Also, there are some falsy values as well.

Consider the falsy values shown below.
0
""
null
undefined
false
NaN

Comparison Operator

Before learning about logical operators, let's quickly revise comparison operators. JavaScript comparison operators compare two or more operands and result in either true or false.

For example, 5 > 3, here > is a comparison operator that checks if 5 is greater than 3. In this case, it will result in true.

Similarly there are other comparison operators like < (less than), >= (greater than or equal to), == (equal to), <= (less than or equal to), and so on. Go to the previous article about operators to revise the comparison operators.

Logical Operators

Logical operators in JavaScript are used to perform logical operations on operands, and the result of these operations is either always a boolean value, true or false.

Consider the code snippet shown below for reference.

Code snippet:
const a = 10, b = 5;
( a < 10 ) && ( b > 3 ); // false
In the above expression, && is a logical AND operator that is true if both the operands are true. Here, a < 10 is false because a is 10, so the expression will be false as well.

In JavaScript, there are different logical operators:
  • Logical AND
  • Logical OR
  • Logical NOT
Let's understand each of these operators with the help of examples.

Logical AND

The logical AND operator value evaluates to true if both the operands or values are true, else it will evaluate to false.

Consider the code shown below.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Logical Operators in JavaScript</title>
</head>

<body>
        <h1>Logical Operators - Example</h1>

        <h2>Logical AND operator</h2>

        <script>
                const x = false;
                const y = true;
                const z = 4;

                // logical AND
                console.log(x && y);
                console.log(y && y);

                console.log((z > 5) && (z < 10)); 
        </script>
</body>

</html>
Explanation - In the above example, we created two boolean variables, x and y, with values false and true, respectively, and a numeric variable, z, with value 4. Here's how this code runs
Expression, x && y will result in false because the value of x is false. Expression, y && y will result in true because the value of y is true. Expression, (z > 5) && (z < 10) will result in false because (z > 5) is false.
If we run the above code in the browser, we will get the following output.

Output:
Logical AND Operators Javascript

Logical OR

The logical OR operator value evaluates to true if either of the operands or values are true, else it will evaluate to a false.

Consider the code shown below.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Logical Operators in JavaScript</title>
</head>

<body>
        <h1>Logical Operators - Example</h1>

        <h2>Logical OR operator</h2>

        <script>
                const x = false;
                const y = true;
                const z = 4;

                // logical OR
                console.log(x || y);
                console.log(x || x);

                console.log((z > 5) || (z < 10)); 
        </script>
</body>

</html>
Explanation - In the above example, we created two boolean variables, x and y, with values false and true, respectively, and a numeric variable, z, with value 4. Here's how this code runs
Expression, x || ywill result in true because the value of y is true. Expression, x || x will result in false because the value of x is false. Expression, (z > 5) || (z < 10) will result in true because (z < 10) is true.
If we run the above code in the browser, we will get the following output.

Output:
Logical OR Operators Javascript

Logical NOT

The logical NOT operator value evaluates to true if the value of the operand is false and evaluates to false if the value of the operand is true. In simple words, it switches the value of a variable, from true to false and false to true.

Let's see an example.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Logical Operators in JavaScript</title>
</head>

<body>
        <h1>Logical Operators - Example</h1>

        <h2>Logical NOT operator</h2>

        <script>

                const x = false;
                const y = true;
                const z = 4;

                // logical NOT
                console.log(! x);
                console.log(! y);

                console.log(!(z > 5));

        </script>
</body>

</html>
Explanation - In the above example, we created two boolean variables, x and y, with values false and true, respectively, and a numeric variable, z, with value 4. Here's how this code runs
! x will return true because the value of x is false. ! y will return false because the value of y is true. ! (z > 5) returns true because the result of z > 5 is false.
If we run the above code, we will get the following output.

Output:
Logical NOT Operators Javascript

Use of Logical Operators

The logical operators are used to write more interesting code in upcoming articles. While working with conditional statements like if-else and loops, we use logical operators.

Since these operators result in true or false, we will later use them to write programs that do different tasks based on the result of logical and comparison operators.

If the result is true, then the program will execute one task, and if the result is false, the program will execute different tasks.

Conclusion

In this article, we learned about boolean values and logical operators in JavaScript. We also explore various examples of different types of logical operators.
loading

Check Out Programs Offered By Masai

If you are currently studying in 1st, 2nd or pre-final year of college,

Connect with a growingcommunity of learners

Masai School

Get StartedJoin the Program