/ / Logic in JavaScript: What Exactly Is Logic?

Logic in JavaScript: What Exactly Is Logic?

Javascript logic depicted with a woman thinking

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, we can discuss the common types of logical operators in JavaScript.

Typical logical operators in JavaScript

Below are the logical operators commonly used in JavaScript.

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.

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.

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.

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.

For instance, consider the code below:

true ?? "CodeSweetly"          // returns true
"CodeSweetly" ?? false         // returns "CodeSweetly"
true ?? false                  // returns true
false ?? true                  // returns false
false ?? "CodeSweetly"         // returns false
null ?? "CodeSweetly"          // returns "CodeSweetly"
"CodeSweetly" ?? null          // 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.

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:

100 != "100"

If you run the snippet above, the computer will return false because the left operand’s value is equal to the one on the right-hand.

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.

Overview

This article discussed what logic is. We also looked at the common types of logical operators used in JavaScript.

Thanks for reading!

Credit

Featured Image by Chen

Get Helpful Resources in Your Inbox

A CodeSweetly Digest

Similar Posts