Conditional statements are used to perform different actions based on different conditions.
Conditional Statements
Very often when you write code, you want to perform different actions for different decisions.
You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
- Use
if
to specify a block of code to be executed, if a specified condition is true - Use
else
to specify a block of code to be executed, if the same condition is false - Use
else if
to specify a new condition to test, if the first condition is false - Use
switch
to specify many alternative blocks of code to be executed
The switch
statement is described in the next chapter.
The if Statement
Use the if
statement to specify a block of JavaScript code to be executed if a condition is true.
Syntax
if
[condition] {
// block of code to be executed if the condition is true
}
Note that if
is in lowercase letters. Uppercase letters [If or IF] will generate a JavaScript error.
Example
Make a "Good day" greeting if the hour is less than 18:00:
if [hour < 18] {
greeting = "Good day";
}
The result of greeting will be:
Try it Yourself »
The else Statement
Use the else
statement to specify a block of code to be executed if the condition is false.
if [condition] {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
Example
If the hour is less than 18, create a "Good day" greeting, otherwise "Good evening":
if [hour < 18] {
greeting = "Good day";
} else {
greeting = "Good evening";
}
The result of greeting will be:
Try it Yourself »
The else if Statement
Use the else if
statement to specify a new condition if the first condition
is false.
Syntax
if [condition1] {
// block of code to be executed if condition1 is true
} else if [condition2] {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
Example
If time is less than 10:00, create a "Good morning" greeting, if not, but time is less than 20:00, create a "Good day" greeting, otherwise a "Good evening":
if [time < 10] {
greeting = "Good morning";
} else if [time < 20] {
greeting = "Good day";
} else {
greeting = "Good evening";
}
The result of greeting will be:
Try it Yourself »
More Examples
Random link
This example will write a link to either W3Schools or to the World Wildlife Foundation [WWF]. By using a random number, there is a 50% chance for each of the links.
The if
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
Syntax
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.
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] // this condition is truthy
statement
Examples
Using if...else
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
:
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:
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
ECMAScript Language Specification # sec-if-statement |
Browser compatibility
BCD tables only load in the browser