TypeScript Logical Operators

In TypeScript, logical operators come in handy in enabling developers to make decisions, manipulate data, and control the flow of their programs. These operators, which include &&, ||, and !, provide powerful tools for handling conditional expressions. In this article, we will explore TypeScript logical operators, and provide code examples to solidify your understanding.

What Are Logical Operators?

Logical operators are symbols used to perform logical operations between two or more values. These operators help developers make decisions in their code by evaluating conditions and determining the flow of execution. TypeScript supports three main logical operators: && (logical AND), || (logical OR), and ! (logical NOT).

Logical AND Operator (&&)

The logical AND operator (&&) is a binary operator that returns true if both of its operands are true; otherwise, it returns false. This operator is often used in conditional statements to ensure that multiple conditions must be satisfied for an action to be taken.

let isUserLoggedIn: boolean = true;
let hasAdminAccess: boolean = true;

if (isUserLoggedIn && hasAdminAccess) {
  console.log("User has admin access.");

} else {
  console.log("User does not have admin access.");

}

In this example, the code checks if the user is logged in (isUserLoggedIn) and has admin access (hasAdminAccess). Only if both conditions are true will the message “User has admin access” be displayed. Otherwise, the message “User does not have admin access” will be shown.

Logical OR Operator (||)

The logical OR operator (||) is another binary operator, and it returns true if at least one of its operands is true. This operator is particularly useful when you want to perform an action if any one of several conditions is met.

let isUserLoggedIn: boolean = true;
let isGuest: boolean = false;

if (isUserLoggedIn || isGuest) {
  console.log("Welcome! You have access.");

} else {
  console.log("Access denied. Please log in.");

}

In this example, the code checks whether the user is logged in (isUserLoggedIn) or is a guest (isGuest). If either condition is true, the message “Welcome! You have access” is displayed. Otherwise, the message “Access denied. Please log in” is shown.

Logical NOT Operator (!)

The logical NOT operator (!) is a unary operator that negates the value of its operand. If the operand is true, the NOT operator returns false, and vice versa. This operator is handy for situations where you need to invert a condition.

let isLoggedIn: boolean = false;

if (!isLoggedIn) {
  console.log("User is not logged in. Redirecting to login page.");

} else {
  console.log("User is logged in. Proceed with the operation.");

}

Here, the code uses the logical NOT operator to check if the user is not logged in (!isLoggedIn). If true, the message “User is not logged in. Redirecting to login page” is displayed; otherwise, the message “User is logged in. Proceed with the operation” is shown.

Combining Logical Operators

In TypeScript, you can combine logical operators to create more complex conditional expressions. Here’s an example:

let isUserLoggedIn: boolean = true;
let hasAdminAccess: boolean = false;
let isGuest: boolean = true;

if ((isUserLoggedIn && !hasAdminAccess) || isGuest) {
  console.log("Welcome! You have limited access.");

} else {
  console.log("Access denied. Please check your credentials.");

}

In this example, the code checks if the user is logged in (isUserLoggedIn), does not have admin access (!hasAdminAccess), or is a guest (isGuest). If any of these conditions is true, the message “Welcome! You have limited access” is displayed. Otherwise, the message “Access denied. Please check your credentials” is shown.

Operator Precedence

Basic understanding of operator precedence come in handy when working with logical operators in TypeScript. Operator precedence defines the order in which operators are evaluated when multiple operators are present in an expression.

In TypeScript, logical NOT (!) has the highest precedence, followed by logical AND (&&), and finally, logical OR (||). Parentheses can be used to override the default precedence and explicitly define the order of evaluation.

let a: boolean = true;
let b: boolean = false;
let c: boolean = true;

let result: boolean = a || b && c;

console.log(result);

In this example, the && operator has higher precedence than ||. However, if we want to change the default order of evaluation and have the || operator evaluated first, we can use parentheses to explicitly specify the grouping. For example:

let a: boolean = true;
let b: boolean = false;
let c: boolean = true;

let result: boolean = (a || b) && c;

console.log(result);

By using parentheses, we ensure that the || operation is evaluated before the && operation. It is advisable to use parentheses to clarify your intent, and to avoid errors.

Short-Circuit Evaluation

TypeScript, like JavaScript, uses short-circuit evaluation for logical operators. This means that if the result of the entire expression can be determined by evaluating only part of it, the remaining part is not evaluated. This can lead to more efficient and optimized code.

Here’s an example:

let isTrue: boolean = true;

// The second condition is not evaluated due to short-circuiting
if (isTrue || someExpensiveFunction()) {
  console.log("The first condition is true!");

} else {
  console.log("The first condition is false.");

}

function someExpensiveFunction(): boolean {

  console.log('Counting from 1 to 1000000.');
  return true;
}

In this case, if isTrue is true, the entire expression is true, and someExpensiveFunction() is not called, thanks to short-circuit evaluation.

The logical OR operator (||) requires at least one operand to be true for the entire expression to be true. In a logical OR operation, if the left operand is true, the entire expression is guaranteed to be true, regardless of the value of the right operand. Therefore, if the left operand is true, there is no need to evaluate the right operand.

Conversely, the logical AND operator (&&) requires both operands to be true for the entire expression to be true. In a logical AND operation, if the left operand is false, the entire expression is guaranteed to be false, regardless of the value of the right operand. As a result, if the left operand is false, there is no need to evaluate the right operand.

JavaScript Logical Operators

For further information, kindly refer to the JavaScript Logical Operators. Everything discussed on that page is also applicable in the context of TypeScript.

Conclusion

Understanding TypeScript logical operators is fundamental for writing clear and concise TypeScript code. Whether you’re working on authentication, conditional statements, or complex business logic, logical operators enable you to make decisions based on boolean values effectively.

Remember to be mindful of operator precedence, and when in doubt, use parentheses to explicitly define the order of evaluation.