Conditional statements

JavaScriptJunior~2 min read

Conditional statements in JavaScript are the ways to run different branches of code depending on the value of an expression: if / else if / else, the ternary operator ? :, switch, and the logical short-circuits &&, || and ??. They all perform the same branching, but differ in readability and in whether they produce a value.

Theory

TL;DR

if / else if / else is the basic construct; the condition is coerced to a boolean (truthy/falsy).
The ternary condition ? a : b is an expression, so its result can be assigned.
switch compares one expression against a set of case labels with strict equality ===; break prevents fall-through and default is the equivalent of else.
&& evaluates the right-hand side only when the left one is truthy.
|| returns the first truthy value, which is handy for defaults.
?? substitutes a value only for null and undefined, unlike ||.

Quick example

javascript

const age = 20;

if (age >= 18) {
  console.log('Adult');
} else if (age >= 14) {
  console.log('Teenager');
} else {
  console.log('Child');
}

if checks the condition.
else if adds further checks.
else runs when none of the previous ones matched.

The condition inside if is coerced to a boolean value (truthy/falsy).

The ternary operator `? :`

A short form for simple conditions which, unlike if, is an expression and returns a value.

javascript

const age = 18;
const status = age >= 18 ? 'Adult' : 'Minor';

console.log(status); // "Adult"

The syntax is condition ? value_if_true : value_if_false.

Several ternaries can be nested, but watch the readability:

javascript

const age = 25;
const group =
  age < 13 ? 'child' :
  age < 20 ? 'teenager' :
  'adult';

The `switch` statement

Convenient when there are many options for one and the same expression.

javascript

const day = 3;

switch (day) {
  case 1:
    console.log('Monday');
    break;
  case 2:
    console.log('Tuesday');
    break;
  case 3:
    console.log('Wednesday');
    break;
  default:
    console.log('Unknown day');
}

break prevents "falling through" into the next case.
default is the equivalent of else.

Branches can also be grouped:

javascript

switch (day) {
  case 6:
  case 7:
    console.log('Weekend');
    break;
  default:
    console.log('Working day');
}

One important detail: switch compares values with strict equality ===, so switch ('3') will not land in case 3.

The logical operators `&&`, `||`, `??`

Sometimes an if can be replaced with a logical short-circuit.

&&, "and" (runs the second part when the first is truthy)

javascript

const isAdmin = true;
isAdmin && console.log('Welcome, admin!');

If isAdmin === true, the console.log runs.

||, "or" (returns the first truthy value)

javascript

const userName = '' || 'Guest';
console.log(userName); // "Guest"

Handy for default values.

??, nullish coalescing (only for null and undefined)

javascript

const userInput = null;
const value = userInput ?? 'Default';
console.log(value); // "Default"

The difference from ||: it does not fire on 0, '' or false.

Comparing the constructs

Construct	Is it an expression?	When it fits
`if / else if / else`	no	complex logic with a branch body
`? :`	yes	a short choice between two values
`switch`	no	many options of one expression, compared with `===`
`&&`, `\|\|`, `??`	yes	a short check and a default value

Common mistakes

Mixing up = and === in a condition. if (x = 5) assigns a value and is always truthy.
Forgetting break in a switch. Execution "falls through" into the next branches and several case labels run in a row.
Expecting loose equality in a switch. The comparison is strict, so '3' and 3 are different branches.
Using || for defaults where 0 or '' are valid values. count || 10 turns a genuine 0 into 10; ?? is what you want there.
Nesting ternaries three or more levels deep. It technically works, but such code is hard to read; prefer an if or a lookup object.
Mixing ?? with || or && without parentheses. That is a SyntaxError, explicit parentheses are required.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.