Without conditions, a program simply plays the same sequence of instructions for everyone. if is what lets it react differently depending on the data it receives.
It is the simplest structure in the language, and yet the one producing the most unexpected behavior, because JavaScript accepts any value where a plain true or false would be expected.
Definition
if evaluates the expression in parentheses and runs the block that follows only when the result is true. Otherwise it moves straight on, without reporting anything.
const stock = 3;
if (stock > 0) {
console.log("In stock"); // printed, since 3 is greater than 0
}The block can hold as many statements as needed, including other if statements. To cover the opposite case, add an else, and to chain several exclusive cases, a run of else if.
Every value becomes a boolean
The condition does not have to be a comparison. JavaScript converts whatever it is given, and the list of false values is short: false, 0, the empty string, null, undefined and NaN. Everything else is true, an empty array included.
const discount = 0;
if (discount) {
console.log("Discount applied"); // never printed: 0 counts as false
}
if (discount !== undefined) {
console.log("Discount defined"); // this one prints
}The difference is far from theoretical. Testing a quantity, a price or a counter with a bare if treats the value zero as an absence of value, which is rarely what was meant. The Truthy and falsy vocabulary names exactly this classification.
Comparing without getting caught
Two equality operators coexist, and only one deserves to be used. The double equals sign converts its operands before comparing, the triple one demands that the type match as well.
console.log("1" == 1); // true: conversion before comparison
console.log("1" === 1); // false: strict comparisonThe rule has no nuance: Strict equality (===) everywhere. The loose form, covered in Loose equality (==), applies a conversion table nobody remembers and produces surprising equalities between values of different types.
A single equals sign inside a condition is an assignment, not a comparison. It always succeeds and the condition takes the assigned value, so the block runs sometimes and is skipped other times, with no error. Most analysis tools flag this case, provided they have been installed.
Frequently asked questions
Can an if be written without braces?
The syntax allows it when the block holds a single statement, and it is a classic source of errors: adding a second line later gives the illusion that it belongs to the condition, when it actually runs every time. Style guides require braces for precisely that reason.
How do you test several conditions at once?
With the logical operators: && demands both sides be true, || is satisfied with one. Both stop as soon as the result is known, which lets you write a presence check before an access. To choose between two values rather than two blocks, the Ternary operator (?:) fits on one line.
How do you avoid nested if statements?
By leaving early. Handling the special cases at the top of a function with a return keeps the main case aligned to the left, with no nesting at all. When the nesting comes from checking one property after another, Optional chaining (?.) replaces the cascade of tests with a single expression.