Sign in to Track Your Progress
Module
Logical Operators 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.
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.
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.
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:
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:
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
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:
Output:
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
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:
Output:
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
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:
Output:
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.
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.
Check Out Programs Offered By Masai
© 2023 by Masai School | A Nolan Edutech Pvt Ltd Venture