JavaScript Logical Operators Tutorial

In this section, we will learn what the Logical operators are and how to use them in JavaScript.

Note: Before reading this section, you should already be familiar with operators in general and comparison-operators.

What is Logical Operators in JavaScript?

When we want to check multiple conditions at the same time in a conditional statement like `if`, we can use logical operators.

For example, let’s say we have two variables named `age` and `money`. Now there’re a set of instructions in our program that depends on the value of these two variables. Let’s say we want to run those instructions only if the value of the `age` variable is greater than 21 AND the value of the `money` variable is greater than 1000.

This is a perfect example of using logical operators.

If you think about, in this example there are two conditions and we want both of them to result true and only in that case the body of the `if` statement to run.

This is where the logical operator can help.

Basically, with the help of these operators, we can involve more than one condition in a statement like `if`.

List of Logical Operators in JavaScript

Here’s an introductory list of the Logical-operators:

Operator Symbol
AND Operator &&
OR Operator ||
Not Operator !

JavaScript AND `&&` Operator

Via this operator, we can bring at least two conditions into a statement like `if` and see if the result of those conditions are true.

When we use the AND `&&` operator, the end result is only true if the involved expressions result true altogether.

Note: there’s no space between the two ampersands `&&`.

AND `&&` Operator Syntax:

LeftConditionalExpression && RightConditionalExpression

Example: using AND `&&` operator in JavaScript

const age = 21;
const money = 2000;
if (age >= 21 && money >= 500){
    console.log("The person is allowed to enter to the bar.");
}else{
    console.log("This person can't enter to the bar.");
}

Output:

The person is allowed to enter to the bar.

There are two conditions involved in the parentheses of the `if` statement. The first one is to check if the value of the `age` variable is greater or equal to 21 and the second condition is to check and see if the value of the `money` variable is greater or equal to 500.

Now, because the result of the both expressions is true, the body of the `if` statement will be executed by the execution engine.

Note: the final result of this operator is true only if all the conditions involved return true. This means even if one condition returns false, the entire result will be false as well.

JavaScript OR `||` Operator

Just like the `AND` operator, the use of OR `||` operator is to involve more than one condition in a statement like `if`.

But the difference, however, is that this operator only looks for one condition to result true!

For example, if there are 10 conditions involved and 9 out of all conditions resulted false but one was true, the end result is true as well.

OR `||` Operator Syntax

LeftConditionalExpression || RightConditionalExpression

Example: using OR `||` operator in JavaScript

const job = "JavaScript Developer";
if (job == "JavaScript Developer" || job == "Python Developer"){
    console.log("The person can apply for a position in this company.");
}else{
    console.log("This person can't apply for a job in this company.");
}

Output:

The person can apply for a position in this company.

In this example, we’ve checked the value of the `job` variable to see if it matches “JavaScript Developer” or “Python Developer”. If the value matches any of these two strings, the final result of the `if` statement is true and so the body of this statement will be executed.

JavaScript Not `!` Operator

This operator is used to reverse the result of an expression. It sits on the left side of an expression and if for example, the expression results true, it will become false and vice versa.

Not `!` Operator Syntax:

!ConditionalExpression

Example: using Not `!` operator in JavaScript

let age = 25;
if (!(age > 18) ){
    console.log("The age is higher than 18.");
}else{
    console.log("The person's age is not above 18.");
}

Output:

The person's age is not above 18.

In the example above, even though the number assigned to the `age` variable is higher than 18, the condition of the `if` statement results false and this is because we reversed the result by adding the `!` operator on the left side of the condition. So the body of the `if-statement` is skipped and the body of the else statement ran instead.

Leave a Reply