- if. else
- Try it
- Syntax
- Description
- Examples
- Using if. else
- Using else if
- Using an assignment as a condition
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- JavaScript If-Else and If-Then – JS Conditional Statements
- What is an if. else statement in JavaScript?
- Examples of if. else statements in JavaScript
- Examples of multiple conditions (if. else if. else statements) in JavaScript
- When to use switch statements over if. else statements?
- The logical AND (&&) operator and if. else statements in JavaScript
- The logical OR (||) operator and if. else statements in JavaScript
- The logical NOT (!) operator and if. else statements in JavaScript
- Conditional (ternary) operator in JavaScript
- Conclusion
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
Syntax
if (condition) statement1 // With an else clause if (condition) statement1 else statement2
An expression that is considered to be either truthy or falsy.
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.
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) console.log("b is truthy"); // "b is truthy" >
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:
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
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Apr 5, 2023 by MDN contributors.
Your blueprint for a better internet.
JavaScript If-Else and If-Then – JS Conditional Statements
There will be times where you will want to write commands that handle different decisions in your code.
For example, if you are coding a bot, you can have it respond with different messages based on a set of commands it receives.
In this article, I will explain what an if. else statement is and provide code examples. We will also look at the conditional (ternary) operator which you can use as a shorthand for the if. else statement.
What is an if. else statement in JavaScript?
The if. else is a type of conditional statement that will execute a block of code when the condition in the if statement is truthy . If the condition is falsy , then the else block will be executed.
Truthy and falsy values are converted to true or false in if statements.
if (condition is true) < // code is executed >else < // code is executed >
Any value that is not defined as falsy would be considered truthy in JavaScript.
Here is a list of falsy values:
- false
- 0 (zero)
- -0 (negative zero)
- 0n (BigInt zero)
- «» , » , « (empty string)
- null
- undefined
- NaN (not a number)
Examples of if. else statements in JavaScript
In this example, the condition for the if statement is true so the message printed to the console would be «Nick is an adult.»
const age = 18; if (age >= 18) < console.log("Nick is an adult."); >else
But if I change the age variable to be less than 18, then the condition would be false and the code would execute the else block instead.
const age = 12; if (age >= 18) < console.log("Nick is an adult."); >else
Examples of multiple conditions (if. else if. else statements) in JavaScript
There will be times where you want to test multiple conditions. That is where the else if block comes in.
if (condition 1 is true) < // code is executed >else if (condition 2 is true) < // code is executed >else < // code is executed >
When the if statement is false , the computer will move onto the else if statement. If that is also false , then it will move onto the else block.
In this example, the else if block would be executed because Alice is between the ages of 18 and 21.
const age = 18; if (age < 18) < console.log("Alice is under 18 years old."); >else if (age >= 18 && age else
When to use switch statements over if. else statements?
There are times in JavaScript where you might consider using a switch statement instead of an if else statement.
switch statements can have a cleaner syntax over complicated if else statements.
Take a look at the example below – instead of using this long if else statement, you might choose to go with an easier to read switch statement.
const pet = "dog"; if (pet === "lizard") < console.log("I own a lizard"); >else if (pet === "dog") < console.log("I own a dog"); >else if (pet === "cat") < console.log("I own a cat"); >else if (pet === "snake") < console.log("I own a snake"); >else if (pet === "parrot") < console.log("I own a parrot"); >else
const pet = "dog"; switch (pet)
switch statements will not be appropriate to use in all situations. But if you feel like the if else statements are long and complicated, then a switch statement could be an alternative option.
The logical AND (&&) operator and if. else statements in JavaScript
In the logical AND ( && ) operator, if both conditions are true , then the if block will be executed. If one or both of the conditions are false , then the else block will be executed.
In this example, since age is greater than 16 and the ownsCar variable is true , the if block will run. The message printed to the console will be «Jerry is old enough to drive and has his own car.»
const age = 17; const ownsCar = true; if (age >= 16 && ownsCar) < console.log("Jerry is old enough to drive and has his own car."); >else
If I change the age variable to be less than 16, then both conditions are no longer true and the else block would be executed instead.
const age = 13; const ownsCar = true; if (age >= 16 && ownsCar) < console.log("Jerry is old enough to drive and has his own car."); >else
The logical OR (||) operator and if. else statements in JavaScript
In the logical OR ( || ) operator, if one or both of the conditions are true , then the code inside the if statement will execute.
In this example, even though the isSale variable is set to false , the code inside the if block will still execute because the boyfriendIsPaying variable is set to true .
const boyfriendIsPaying = true; const isSale = false; if (boyfriendIsPaying || isSale) < console.log("Jesse will go shopping."); >else
If I were to change the value of the boyfriendIsPaying variable to false , then the else block would execute because both conditions are false .
const boyfriendIsPaying = false; const isSale = false; if (boyfriendIsPaying || isSale) < console.log("Jesse will go shopping."); >else
The logical NOT (!) operator and if. else statements in JavaScript
The logical NOT ( ! ) operator will take something that is true and make it false . It will also take something that is false and make it true .
We can modify the example from earlier to use the ! operator to make the boyfriendIsPaying variable false . Since both conditions are false , the else block would be executed.
const boyfriendIsPaying = true; const isSale = false; if (!boyfriendIsPaying || isSale) < console.log("Jesse will go shopping."); >else
Conditional (ternary) operator in JavaScript
If you have a short if else statement, then you might choose to go with the ternary operator. The word ternary means something composed of three parts.
This is the basic syntax for a ternary operator:
condition ? if condition is true : if condition is false
The condition goes before the ? mark and if it is true , then the code between the ? mark and : would execute. If the condition is false , then the code after the : would execute.
In this example, since age is greater than 18, then the message to the console would be «Can vote».
const age = 32; const citizen = age >= 18 ? "Can vote" : "Cannot vote"; console.log(citizen);
This is what the code would look like using an if else statement:
const age = 32; let citizen; if (age >= 18) < citizen = "Can vote"; >else < citizen = "Cannot vote"; >console.log(citizen);
Conclusion
if else statements will execute a block of code when the condition in the if statement is truthy . If the condition is falsy , then the else block will be executed.
There will be times where you want to test multiple conditions and you can use an if. else if. else statement.
If you feel like the if else statement is long and complicated, then a switch statement could be an alternative option.
Using logical operators to test multiple conditions can replace nested if else statements.
The ternary operator can be used to write shorter code for a simple if else statement.