Suggest an edit

Improve this article

Refine the answer for “Conditional statements”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts712 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.