if.
Runs a block of code only when the condition is true, and otherwise an optional else block.
Example
#function grade(points) {
if (points >= 90) {
return 'excellent'
} else if (points >= 70) {
return 'good'
} else if (points >= 50) {
return 'passing'
} else {
return 'needs improvement'
}
}
console.log(grade(95))
console.log(grade(72))
console.log(grade(30))Definition and usage
#The if statement checks the condition in the parentheses. If it’s true, it runs the block right after it. The optional else holds code for when the condition is false, and else if lets you check further conditions one after another.
The condition doesn’t have to be true or false itself. JavaScript converts it to a boolean value on its own. The only falsy values are: false, 0, -0, 0n, "", null, undefined, and NaN. Everything else, including an empty array [] and an empty object {}, counts as truthy.
Conditions in an else if chain are checked from the top, and only the first matching block runs. So arrange them from the most specific to the most general.
Syntax
#if (condition) {
// when true
}
if (condition) {
// when true
} else {
// when false
}
if (condition1) {
// ...
} else if (condition2) {
// ...
} else {
// ...
}More examples
#function welcome(name) {
if (name) {
return `Welcome, ${name}!`
}
return 'Welcome, stranger!'
}
console.log(welcome('Mia'))
console.log(welcome(''))
console.log(welcome())An empty string and undefined are both falsy, so they both fall into the second branch. Watch out for the number 0: it’s falsy too, even though it’s often a valid value.
function buyItem(user, price) {
if (!user) {
return 'Log in first'
}
if (user.coins < price) {
return 'Not enough coins'
}
user.coins -= price
return `Purchased, ${user.coins} coins left`
}
console.log(buyItem(null, 50))
console.log(buyItem({ coins: 30 }, 50))
console.log(buyItem({ coins: 80 }, 50))const age = 16
const hasConsent = true
if (age >= 18 || hasConsent) {
console.log('You can join the course')
} else {
console.log('Parental consent required')
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Always use curly braces, even for a single statement. Code without them is easy to break by adding a second line that ends up always running.
- Instead of deeply nested
ifs, check the error cases at the start of a function and return out of it right away. - To pick one of two values, the conditional operator
condition ? a : bis enough, and with several fixed values aswitchoften reads better.
Related entries
#- switchCompares a value against a list of case labels and runs the code from the first match.
- ? :The conditional (ternary) operator returns one of two values depending on a condition, in one short expression.
- &&, ||, !The logical operators AND (&&), OR (||), and NOT (!). They combine conditions, and && and || return one of their sides.
- ===The strict equality operator compares values without type conversion: true only for the same type and the same value.
- returnEnds a function and passes a value back to the place where the function was called.
Spotted a mistake or missing an example? Write to us.