How to Write Faster JavaScript Condition Expressions

There’s an interesting optimization feature in JavaScript which doesn’t necessarily apply in other languages. Consider the following code sample:


var x = 10;
var y = true;

if (x*x > 1000 || y) alert("true!");

As you’d expect, “true” is output because y is true — even though the first condition fails. JavaScript interpreters analyze each condition in sequence. If we changed x to 100, x*x would be greater than 1000 and evaluate to true. But, because we’re using a logical OR (||), the interpreter never needs to analyze y — the expression must be true so the alert is displayed. Therefore, we can optimize expressions to ensure those which require the least processing are analyzed first, i.e.


if (y || x*x > 1000) alert("true!");

If y is true, the interpreter will never need to evaluate the second condition. That could save considerable time, especially if we were calling a function, performing intensive calculations or analyzing the DOM. The same optimization applies to logical AND (&&). In that case, the first expression which evaluates to false makes the whole condition false — no further processing is required.

Assignments inside conditions

James Edwards recently wrote the article Assignment inside a Condition where he discussed code such as…


if (summary = document.getElementById("post-summary")) {
	alert(summary.innerHTML);
}

The summary variable is set to the HTML element with an ID of “post-summary”. If the element exists, the condition evaluates to true and the alert appears. If an element cannot be found, the condition evaluates to false and none of the conditional code is executed. It’s a useful technique although, according to the comments, few developers liked the practice because it makes JavaScript more difficult to read and debug. However, there’s another issue — with 2 or more conditions, your assignment may never execute. For example:


if (x || y = functionY()) {
	alert(y);
}

If x evaluates to true, the interpreter never assigns a value to y and the alert will always throw an error. We could fix it by reversing the conditions so y is always evaluated, e.g.


if (y = functionY() || x) …

Even then, it could still cause confusion because it’s not obvious that the ordering of these conditions is essential. A developer who read the top half of this article might even attempt to optimize the code by evaluating x first! In summary, if you want to use assignments inside conditions, go ahead — but be absolutely sure it’s the only condition you’ll ever need!

Frequently Asked Questions about Faster JavaScript Condition Expressions

What is a JavaScript conditional expression?

A JavaScript conditional expression, also known as a ternary operator, is a type of operator that takes three operands. It’s a shorthand way of writing an if-else statement. It’s structured as follows: condition ? value_if_true : value_if_false. The condition is evaluated first. If it’s true, the expression returns the value_if_true. If it’s false, it returns the value_if_false.

How does JavaScript evaluate logical AND (&&) and OR (||) operators?

JavaScript uses short-circuit evaluation for logical AND (&&) and OR (||) operators. For the AND operator, if the first operand is false, JavaScript doesn’t evaluate the second operand and returns the first operand. For the OR operator, if the first operand is true, JavaScript doesn’t evaluate the second operand and returns the first operand.

How can I use JavaScript conditionals to compare values?

JavaScript provides several comparison operators such as == (equal to), === (equal value and equal type), != (not equal), !== (not equal value or not equal type), > (greater than), < (less than), >= (greater than or equal to), and <= (less than or equal to). These operators can be used in conditional expressions to compare values and return a boolean result.

What is the difference between == and === in JavaScript?

The == operator checks for equality of values but not the type. So, “5” == 5 will return true. On the other hand, the === operator checks for both equality of values and the type. So, “5” === 5 will return false because one is a string and the other is a number.

How can I use if-else statements in JavaScript?

If-else statements in JavaScript are used to perform different actions based on different conditions. The syntax is as follows:
if (condition) {
// code to be executed if the condition is true
} else {
// code to be executed if the condition is false
}
You can also use else if to specify a new condition if the first condition is false.

What is the purpose of the logical NOT (!) operator in JavaScript?

The logical NOT (!) operator in JavaScript is used to reverse the boolean result of a condition. For example, if a condition is true, !condition will return false, and vice versa.

Can I use ternary operators for multiple conditions in JavaScript?

Yes, you can nest ternary operators to handle multiple conditions in JavaScript. However, it’s important to note that nested ternary operators can make your code harder to read and understand, so they should be used sparingly.

How can I use switch statements in JavaScript?

A switch statement in JavaScript is used to perform different actions based on different conditions. It’s a more efficient way to write multiple else if conditions. The syntax is as follows:
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
The switch expression is evaluated once, and its value is compared with the values of each case. If there’s a match, the corresponding code block is executed.

What is the difference between null and undefined in JavaScript?

In JavaScript, null is an assignment value that means no value or no object. It’s an intentional absence of any object value. On the other hand, undefined means a variable has been declared but has not yet been assigned a value.

How can I use JavaScript conditionals to check if a variable is defined?

You can use the typeof operator in a conditional expression to check if a variable is defined in JavaScript. If the variable is not defined, typeof will return “undefined”. Here’s an example:
if (typeof myVar !== "undefined") {
// myVar is defined
} else {
// myVar is not defined
}