The if...else
statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement in the optional else
clause will be executed.
The if...else
statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement in the optional else
clause will be executed.
if (condition) statement1 // With an else clause if (condition) statement1 else statement2
condition
An expression that is considered to be either truthy or falsy.
statement1
Statement that is executed if condition is truthy. Can be any statement, including further nested if
statements. To execute multiple statements, use a block statement ({ /* ... */ }
) to group those statements. To execute no statements, use an empty statement.
statement2
Statement that is executed if condition
is falsy and the else
clause exists. Can be any statement, including block statements and further nested if
statements.
Multiple if...else
statements can be nested to create an else if
clause. Note that there is no elseif
(in one word) keyword in JavaScript.
if (condition1) statement1 else if (condition2) statement2 else if (condition3) statement3 // … else statementN
To see how this works, this is how it would look if the nesting were properly indented:
if (condition1) statement1 else if (condition2) statement2 else if (condition3) statement3 // …
To execute multiple statements within a clause, use a block statement ({ /* ... */ }
) to group those statements.
if (condition) { statements1 } else { statements2 }
Not using blocks may lead to confusing behavior, especially if the code is hand-formatted. For example:
function checkValue(a, b) { if (a === 1) if (b === 2) console.log("a is 1 and b is 2"); else console.log("a is not 1"); }
This code looks innocent — however, executing checkValue(1, 3)
will log "a is not 1". This is because in the case of dangling else, the else
clause will be connected to the closest if
clause. Therefore, the code above, with proper indentation, would look like:
function checkValue(a, b) { if (a === 1) if (b === 2) console.log("a is 1 and b is 2"); else console.log("a is not 1"); }
In general, it is a good practice to always use block statements, especially in code involving nested if
statements.
function checkValue(a, b) { if (a === 1) { if (b === 2) { console.log("a is 1 and b is 2"); } } else { console.log("a is not 1"); } }
Do not confuse the primitive Boolean values true
and false
with truthiness or falsiness of the Boolean
object. Any value that is not false
, undefined
, null
, 0
, -0
, NaN
, or the empty string (""
), and any object, including a Boolean object whose value is false
, is considered truthy when used as the condition. For example:
const b = new Boolean(false); if (b) { console.log("b is truthy"); // "b is truthy" }
if (cipherChar === fromChar) { result += toChar; x++; } else { result += clearChar; }
Note that there is no elseif
syntax in JavaScript. However, you can write it with a space between else
and if
:
if (x > 50) { /* do something */ } else if (x > 5) { /* do something */ } else { /* do something */ }
You should almost never have an if...else
with an assignment like x = y
as a condition:
if ((x = y)) { // … }
Because unlike while
loops, the condition is only evaluated once, so the assignment is only performed once. The code above is equivalent to:
x = y; if (x) { // … }
Which is much clearer. However, in the rare case you find yourself wanting to do something like that, the while
documentation has a Using an assignment as a condition section with our recommendations.
Specification |
---|
ECMAScript Language Specification # sec-if-statement |
Desktop | Mobile | Server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | Deno | Node.js | ||
if...else |
1 | 12 | 1 | 3 | 1 | 18 | 4 | 10.1 | 1 | 1.0 | 4.4 | 1.0 | 0.10.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else