Logical Operators in Typescript

The Logical operators operate on a set of operands and return one of the operands as a return value. It is typically used on boolean operands, in which case the return value is a boolean. If the operands and not boolean values, then logical operators may return a non-boolean value. The Typescript has four logical operators. They are AND (&& ), OR ( || ) , NOT (!) & Nullish coalescing operator (??).

boolean data type, truthy & falsy

The logical operators convert the operand to the boolean is a primitive type. The boolean represents a simple true/false value.

Every possible value in Typescript can be converted to true & false. For Example, converting 100 to boolean will result in a true. And 0 becomes false.

Those values, which converts to false are known as falsy. And those, which converts to true are Truthy.

There are eight possible falsy values. They are 

  1. false
  2. 0 (zero), 
  3. -0 (minus zero) , 
  4. 0n (BigInt zero) , 
  5. " " (empty string), 
  6. null
  7. undefined & 
  8. NaN.

All other values converts to true, hence we call them truthy values.

|| (OR)

Logical OR for a set of operands is true if and only if one of the operands convert to true (truthy). It returns the first truthy operand.

The Logical OR is denoted pipe symbol ||. Syntax is as shown below

expr1 || expr2

If expr1 can be converted to true, returns expr1; else, returns expr2.

  1. The operator evaluates the operands from left to right. i.e. It evaluates the expr1 first, and then expr2.
  2. It stops when it finds the first operand that evaluates to true and returns that operand. it does not evaluate the subsequent operands. This is known as a short circuit evaluation.
  3. If all operands evaluate to false, then it returns the last operand.

Example

In the following example a > 5 is the first expression and b > 5 is the second expression. Since a > 5 is true, it evaluates the expression a > 5 and returns true

In the following example, both the operands are not booleans. Both "Hello" & 100 are truthy values. Hence OR returns whichever appears first.

option1, option2 & option3 are all undefined. A undefined is a falsy value. Hence the first OR statement returns "Default"

But, when we assign a value to an option3, it becomes truthy. Hence the next OR statement returns Option3

You can chain multiple operands in a single statement.

The OR returns false only when both the operands are false. For all other combinations, it returns true.

&& (AND)

Logical AND for a set of operands is true if and only if all of its operands are true. It returns the first falsy operand. If all the operands are true, then it returns the last operand.

The Logical AND is denoted by symbol &&. Syntax is as shown below

  1. The operator evaluates the operands from left to right. i.e. It evaluates the expr1 first, and then expr2.
  2. It stops when it finds the first operand that evaluates to false and returns that operand. it does not evaluate the subsequent operands. This is known as a short circuit evaluation.
  3. If all operands evaluate to true, then it returns the last operand.

Syntax

expr1 && expr2

If expr1 can be converted to true, returns expr2; else, returns expr1.

Example

In the first statement, both a >5 & b >5 is true. Hence it returns true. But in the second AND statement b <5 is false, hence it returns false.

In the following example, both the operands are not booleans. Both “Hello” & 100 are truthy values. Hence AND returns whichever appears last.

option1, option2 & option3 are all undefined. a undefined is a falsy value. Hence the first AND statement returns undefined.

But, when we assign a value to all options. now all of them becomes truthy. Hence the next AND statement returns Option3 (last truthy value).

AND returns true only if both operands are true. for all other combination returns false.

! (NOT)

The Logical NOT operator, takes only one Operand and converts it to a boolean. Then it produces true, if the operand evaluates to false, and false, if the operand evaluates to true

Syntax

The NOT operator always returns a boolean value.

Examples

You can use the !! double not to convert a value into boolean. The output of !! is same as the Boolean global function

Notes on Logical Operators

The logical operators in Typescript work differently compared to the other programming languages like C, C++, or C#. The following are some of the important points to remember.

Operands can be of any type

The Operands of the Logical operators can be of any type. i.e because every possible value in Typescript can be converted to true & false.

Returns any value

As you can see from the above examples, the logical operators can return any value. In fact, they return one of the operands.

Evaluated from left to right

Expressions are evaluated from left to right.

Short-circuit evaluation

If a match is found, then the evaluation stops and the operand is returned. For Example for an OR Operator, evaluation stops when it finds the first truthy operand. And for AND operator is it the first falsy operand.

AND & OR together

You can mix AND & OR together, but remember the operator Precedence. The following is the list of operator precedence of logical operators along with some other relevent operators.

  1. ( ) Parenthesis or Grouping
  2. ! Logical NOT
  3. == Equality
  4. != Not equal
  5. === Strict Equality
  6. !== Not strict Equal
  7. && logical AND
  8. || Logical OR
  9. ?? Nullish coalescing operator

Always use the parenthesis to group the operands together to increase readability and also override the operator precedence.

In the example, below && is evaluated first resulting in false and then || is evaluated. Hence it returns true

By using the parentheses we can force the || to evaluate first and then the &&. Now the expression returns false.

Reference

  1. Logical AND
  2. Logical OR
  3. Expressions & Operators
  4. Precedence & Associativity

Read More

  1. Complete Typescript Tutorial
  2. Typescript Operators
  3. Arithmetic Operators
  4. Unary plus / Unary minus Operators
  5. Increment/Decrement Operators
  6. Comparison / Relational Operators
  7. Equality Operator / Strict Equality Operators
  8. Ternary Conditional Operators
  9. Logical Operators
  10. Bitwise Operators
  11. Assignment Operators
  12. Nullish coalescing operator
  13. Comma Operator in Typescript
  14. Operator Precedence

Read More

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top