Enhancing Javascript performance using Logical OR & Logical AND

In JavaScript, logical OR is represented by || and logical AND is represented by &&. These operators are often used to evaluate multiple conditions in control statements like if, while, etc.

Logical operators short-circuit, which means they evaluate from left to right and stop evaluating as soon as they encounter a value that allows them to make a definite decision. This can be leveraged for performance optimization.

Logical OR ||

The logical OR || operator returns the first truthy value it encounters, or the last value if none are truthy.

Let's break it down:

1- Returns the first truthy value it encounters:

When you have an expression using || between multiple values, JavaScript will evaluate those values from left to right. As soon as it encounters a truthy value, it stops evaluating further and returns that truthy value.

const result1 = false || null || "hello";
// "hello" is returned because it's the first truthy value
const result2 = 0 || 5 || 10;
// 5 is returned because it's the first truthy value

2- Or the last value if none are truthy:

If all values are falsy, then the logical OR (||) operator returns the last falsy value that it evaluated.

const result3 = false || null || 0;
// 0 is returned because it's the last value and all values are falsy

Another example:

const a = null;
const b = "hello";
const result = a || b; // result will be "hello"

In this case, a is falsy, so result will take the value of b, which is "hello".

Logical AND &&

The logical AND && operator returns the first falsy value it encounters, or the last value if all are truthy.

Let's break it down:

1- Returns the first falsy value it encounters:

In an expression involving multiple values and the && operator, JavaScript evaluates the values from left to right. If it finds a falsy value, it immediately stops evaluating further and returns that falsy value.

const result1 = true && 0 && "hello";
// 0 is returned because it's the first falsy value
const result2 = 1 && null && 5;
// null is returned because it's the first falsy value

2- Or the last value if all are truthy:

If all the values are truthy, then the && operator will return the last truthy value it evaluated.

const result3 = true && "world";
// "world" is returned because
// it's the last value and all values are truthy

Another example:

const x = true;
const y = "world";
const result = x && y; // result will be "world"

Here, x is truthy, so result will take the value of y, which is "world".

How logical operators helps the code performance!

If the first value is falsy, the second value won't be evaluated at all:

function expensiveFunction() {
  console.log("This function takes a long time to execute.");
  return true;
}

const result = false && expensiveFunction();
// expensiveFunction is never called

By understanding the behavior of these operators, you can write code that is not only more readable and maintainable but also optimized for performance.

Note that you should use these operators judiciously!

For example consider this:

if (user && user.address && user.address.street && user.address.street.name) {
  // Do something
}

You could use optional chaining (?.) to make the code more readable and maintainable:

if (user?.address?.street?.name) {
  // Do something
}