JavaScript Logical Operators – What Is a JavaScript Logic?

Logic is the analytical action performed by a computer, which often requires the computer to decide if a specific condition is true or false.

Here’s an example:

// Define a variable:
const senseOrgans = 5;

// Create a logic to confirm senseOrgans' content:
senseOrgans === 100;

// The invocation above will return: false

In the snippet above, we used the strict equality operator (===) to analyze senseOrgans content—to check if it is truly equal to 100.

The result of the logical comparison—between number 100 and senseOrgans content—returned false because 100 and 5 are not equal.

So, now that we know what logic is, let’s discuss the common types of logical operators in JavaScript, starting with the equality operator.

Equality Operator (==)

The equality operator (==) checks if its two operands are of equal value.

Here’s an example:

// Define a variable:
const century = 100;

// Create a logic to confirm century's content:
century == "100";

// The invocation above will return: true

The equality comparison between century’s content and "100" returns true because the two values are equal.

Strict Equality Operator (===)

The strict equality operator (===) checks if its two operands are strictly of equal type and value.

Note

If the operands are of the same values but different types, the strict equality operator will consider the operands to be unequal.

Here’s an example:

// Define a variable:
const century = 100;

// Create a logic to confirm century's content:
century === "100";

// The invocation above will return: false

The equality comparison between century’s content and "100" returned false because the two operands have equal values but different types.

In other words, the content in century is a number type, while "100" is a string type.

NOT Operator (!)

The NOT operator (!) is used to negate the Boolean value of an expression. In other words, it converts true to NOT true and false to NOT false.

Here’s an example:

!true;

The code above means NOT true. Therefore, if you run the snippet, the computer will return false.

Here’s another example:

const century = 100;

century !== 100;

// The invocation above will return: false

In the snippet above, century !== 100 means century NOT strictly equal to 100.

The computer returned false because we used the NOT operator to negate the strict equality operator.

CodeSweetly ads

Express Your Love for Coding!

Explore CodeSweetly's Shop for an array of stylish products to enhance your coding experience.

Shop now

AND Operator (&&)

The AND operator (&&) checks if all of its operands are true.

Here’s an example:

true && true;

If you run the snippet above, the computer will return true because the left and right operands of the AND operator are true.

Technically, the AND (&&) operator returns its right operand’s value if its left operand’s value is truthy. Otherwise, if the left operand is falsy, the AND operator will return the left operand’s value.

Note

The AND operator will return a non-Boolean value if you use it with non-Boolean operands.

For instance, consider the code below:

true && "CodeSweetly"; // returns "CodeSweetly"
"CodeSweetly" && false; // returns false
true && false; // returns false
false && true; // returns false
false && "CodeSweetly"; // returns false
null && "CodeSweetly"; // returns null
0 && "CodeSweetly"; // returns 0
71 && 77; // returns 77

In the snippet above, observe that the computer returns the right operand whenever the left operand is truthy. However, whenever the left is falsy, the computer returns the value of that left operand.

Note

You can use AND operator for short-circuit evaluations.

AND Assignment Operator (&&=)

The AND assignment operator (&&=) checks if its left-hand side expression is truthy. If so, it initializes the expression with its right-hand side operand.

However, the operator will not update the left-hand side expression if its current value is falsy.

Example 1: AND assignment operator used to initialize a falsy left-hand side expression

let myAge = 0;
console.log(myAge); // returns 0

myAge &&= 900;
console.log(myAge); // returns 0

Example 2: AND assignment operator used to initialize a truthy left-hand side expression

let myAge = 500;
console.log(myAge); // returns 500

myAge &&= "Five Hundred";
console.log(myAge); // returns "Five Hundred"

Example 3: AND assignment operator used to initialize a truthy left-hand side expression

const myName = { realName: "Oluwatobi" };
console.log(myName); // returns { realName: "Oluwatobi" }

myName.realName &&= "Sofela";
console.log(myName); // returns { realName: "Sofela" }

OR Operator (||)

The OR operator (||) checks and returns true if one (or both) of its operands is true. Otherwise, it returns false if both of its operands are false.

Here’s an example:

true || false;

If you run the snippet above, the computer will return true because one of the OR operator’s operands is true.

Technically, the OR (||) operator returns the left operand if its value is truthy.

Otherwise, if the left operand is falsy, the OR operator will return the right operand’s value.

Note

The OR operator will return a non-Boolean value if you use it with non-Boolean operands.

For instance, consider the code below:

true || "CodeSweetly"; // returns true
"CodeSweetly" || false; // returns "CodeSweetly"
true || false; // returns true
false || true; // returns true
false || "CodeSweetly"; // returns "CodeSweetly"
null || "CodeSweetly"; // returns "CodeSweetly"
0 || "CodeSweetly"; // returns "CodeSweetly"
false || false; // returns false
false || null; // returns null
71 || 400; // returns 71
0 || false; // returns false

In the snippet above, observe that the computer returns the left operand if it is truthy. Otherwise, it returns the right operand.

Note

You can use the OR operator for short-circuit evaluations.

CodeSweetly ads

Design and develop at the same time

Build your site visually, and let Webflow write the code for you.

Get started for free

OR Assignment Operator (||=)

The OR assignment operator (||=) checks if its left-hand side expression is falsy. If so, it initializes the expression with its right-hand side operand.

However, the operator will not update the left-hand side expression if its current value is truthy.

Example 1: OR assignment operator used to initialize a falsy left-hand side expression

let myAge = 0;
console.log(myAge); // returns 0

myAge ||= 900;
console.log(myAge); // returns 900

Example 2: OR assignment operator used to initialize a truthy left-hand side expression

let myAge = 500;
console.log(myAge); // returns 500

myAge ||= "Seven Hundred";
console.log(myAge); // returns 500

Example 3: OR assignment operator used to initialize a truthy left-hand side expression

const myName = { realName: "Oluwatobi" };
console.log(myName); // returns { realName: "Oluwatobi" }

myName.realName ||= "Sofela";
console.log(myName); // returns { realName: "Oluwatobi" }

Nullish Coalescing Operator (??)

The nullish coalescing operator (??) checks if its left-hand side operand is undefined or null. If so, it returns its right-hand side operand. Otherwise, it produces its left-hand side operand.

Here’s an example:

true ?? false;

The snippet above will return true because the left-hand side operand is neither undefined nor null. So, the left operand gets returned.

The nullish coalescing operator is similar to the OR operator. The main difference is that nullish returns its right-hand side operand’s value if the left operand is nullish (undefined or null).

However, the OR operator returns its right-hand side operand’s value if the left operand is any falsy value—not just undefined or null.

Note

The nullish coalescing operator will return a non-Boolean value if you use it with non-Boolean operands.

Here’s another example:

null ?? "CodeSweetly"; // returns "CodeSweetly"
"CodeSweetly" ?? null; // returns "CodeSweetly"
true ?? "CodeSweetly"; // returns true
"CodeSweetly" ?? false; // returns "CodeSweetly"
true ?? false; // returns true
false ?? true; // returns false
false ?? "CodeSweetly"; // returns false
undefined ?? "CodeSweetly"; // returns "CodeSweetly"
0 ?? "CodeSweetly"; // returns 0
false ?? false; // returns false
false ?? null; // returns false
71 ?? 400; // returns 71
0 ?? false; // returns 0
undefined ?? false; // returns false
false ?? undefined; // returns false

In the snippet above, observe that the computer returns the right operand only if the left one is null or undefined. Otherwise, it returns the left operand.

Note

You can use the nullish coalescing operator for short-circuit evaluations.

Nullish Assignment Operator (??=)

The nullish assignment operator (??=) checks if its left-hand side expression is undefined or null. If so, it initializes the expression with its right-hand side operand.

However, the operator will not update the left-hand side expression if its current value is not nullish (undefined or null).

Example 1: Nullish assignment operator used to initialize a non-nullish left-hand side expression

let myName = "Oluwatobi";
console.log(myName); // returns "Oluwatobi"

myName ??= "CodeSweetly";
console.log(myName); // returns "Oluwatobi"

CodeSweetly ads

Learn CSS Grid with Images

Use beautiful images to learn CSS Grid.

Find out more

Example 2: Nullish assignment operator used to initialize a nullish left-hand side expression

let myName = null;
console.log(myName); // returns null

myName ??= "CodeSweetly";
console.log(myName); // returns "CodeSweetly"

Example 3: Nullish assignment operator used to initialize a nullish left-hand side expression

const myName = { firstName: undefined };
console.log(myName); // returns { firstName: undefined }

myName.firstName ??= "Oluwatobi";
console.log(myName); // returns { firstName: "Oluwatobi" }

Greater than Operator (>)

The greater than operator (>) checks if its left operand is greater than its right-hand one. If so, the Boolean value true gets returned. Otherwise, the computer will return false.

Here’s an example:

2 > 100;

If you run the snippet above, the computer will return false because the left-hand side operand is not greater than the one on the right-hand.

Less than Operator (<)

The less than operator (<) checks if its left operand is less than its right-hand one. If so, the Boolean value true gets returned. Otherwise, the computer will return false.

Here’s an example:

2 < 100;

If you run the snippet above, the computer will return true because the left-hand side operand is less than the one on the right-hand.

Greater than or Equal to Operator (>=)

The greater than or equal to operator (>=) checks if its left operand is greater than or equal to its right-hand operand. If so, the Boolean value true gets returned. Otherwise, the computer will return false.

Here’s an example:

100 >= 100;

If you run the snippet above, the computer will return true because the left-hand side operand is equal to the one on the right-hand.

Less than or Equal to Operator (<=)

The less than or equal to operator (<=) checks if its left operand is less than or equal to the one on the right-hand. If so, the Boolean value true gets returned. Otherwise, the computer will return false.

Here’s an example:

100 <= 100;

If you run the snippet above, the computer will return true because the left-hand side operand is equal to the one on the right-hand.

NOT Equal to Operator (!=)

The NOT equal to operator (!=) checks if its two operands are not of equal value. If so, the Boolean value true gets returned. Otherwise, the computer will return false.

Here’s an example:

2 != 100;

The snippet above will return true because the left and right operands are not of equal value.

Here’s another example:

100 != "100";

The snippet above will return false because the left and right operands are of equal value.

NOT Strictly Equal to Operator (!==)

The Not strictly equal to operator (!==) checks if its two operands are strictly not of equal type and equal value. If so, the Boolean value true gets returned. Otherwise, the computer will return false.

Here’s an example:

100 !== "100";

If you run the snippet above, the computer will return true because the left and right operands are of equal values but not of similar types. Therefore, they are not strictly equivalent to one another.