Launch your career in tech, no matter your educational background. Pay after placement of 5,00,000/- or more, else learn at no cost.

Prepleaf

Masai 0NE

Starting your journey in tech, or looking to take the next step in your developer journey, if you are a working professional with an ambition, we will invest in your future.

design shift

MasaiX.

There are 3 types of logical operators in JavaScript: && (AND), || (OR), ! (NOT). These logical operators return either true or false based on conditions.

Masai Learn - Logical Operators in JavaScript (AND, OR, NOT)

%s - Masai Learn

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
```



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 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.




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](https://masai-website-images.s3.ap-south-1.amazonaws.com/image1_115e57e149.png)


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 || y**will 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](https://masai-website-images.s3.ap-south-1.amazonaws.com/image3_eaad59eef8.png)



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](https://masai-website-images.s3.ap-south-1.amazonaws.com/image2_4654111c53.png)




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.


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