if...else - JavaScript | MDN

archived 3 Jul 2023 12:31:35 UTC
Get real-time assistance with your coding queries. Try AI Help now!

if...else

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.

#Try it

JavaScript Demo: Statement - If...Else

function testNum(a) {
let result;
if (a > 0) {
result = 'positive';
} else {
result = 'NOT positive';
}
return result;
}

console.log(testNum(-5));
// Expected output: "NOT positive"

#Syntax

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

#Description

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.
js
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:
js
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.
js
if (condition) {
  statements1
} else {
  statements2
}
Not using blocks may lead to confusing behavior, especially if the code is hand-formatted. For example:
js
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:
js
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.
js
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:
js
const b = new Boolean(false);
if (b) {
  console.log("b is truthy"); // "b is truthy"
}

#Examples

#Using if...else

js
if (cipherChar === fromChar) {
  result += toChar;
  x++;
} else {
  result += clearChar;
}

#Using else if

Note that there is no elseif syntax in JavaScript. However, you can write it with a space between else and if:
js
if (x > 50) {
  /* do something */
} else if (x > 5) {
  /* do something */
} else {
  /* do something */
}

#Using an assignment as a condition

You should almost never have an if...else with an assignment like x = y as a condition:
js
if (x = y) {
  // do something
}
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 an example showing a general best-practice syntax you should know about and follow.

#Specifications

Specification
ECMAScript Language Specification
# sec-if-statement

#Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
Deno
Node.js
if...else

Legend

Tip: you can click/tap on a cell for more information.
Full supportFull support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

#See also

0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%