Introduction:
Every program needs to make decisions. In JavaScript, conditional statements help you control the flow of your code by executing certain actions based on different conditions. These conditionals allow your program to behave intelligently, making decisions like whether to display a message, repeat an action, or handle user input.
In this guide, we’ll explore the most common JavaScript conditionals, including:
- if statements
- else and else if statements
- The ternary operator for concise conditionals
- The switch statement for handling multiple conditions
By the end of this article, you’ll be able to write code that thinks and adapts based on conditions, helping you build more dynamic and interactive programs.
1. What Are Conditional Statements in JavaScript?
Conditional statements in JavaScript allow you to control which parts of your code get executed based on certain conditions. Think of it as asking questions:
- If it’s raining, bring an umbrella.
- If you have more than $100, buy the new game console.
- Otherwise, save your money.
In programming, these conditions are expressed in terms of boolean values — values that are either true or false. Based on whether the condition is true or false, different blocks of code will be executed.
Let’s start with the most basic and widely-used conditional: the if statement.
2. The if Statement: Making Decisions in Code
The if statement is the simplest form of conditional logic in JavaScript. It allows you to execute a block of code only if a specific condition is true.
Syntax:
if (condition) {
// Code to run if the condition is true
}When the condition inside the parentheses evaluates to true, the code inside the curly braces {} will run. If the condition is false, JavaScript skips over that block of code.
Example:
let age = 18;
if (age >= 18) {
console.log("You are eligible to vote.");
}In this example, the program checks if the person is at least 18 years old. If they are, it prints out "You are eligible to vote." to the console.
3. The else Statement: Handling Alternatives
The else statement is used when you want to run one block of code if the condition is true and a different block if it is false.
Syntax:
if (condition) {
// Code to run if the condition is true
} else {
// Code to run if the condition is false
}Example:
let age = 16;
if (age >= 18) {
console.log("You are eligible to vote.");
} else {
console.log("You are too young to vote.");
}Here, if the condition age >= 18 is false (meaning the person is younger than 18), the program will print "You are too young to vote." instead.
4. The else if Statement: Adding More Conditions
What if you want to check more than one condition? That’s where the else if statement comes in. It allows you to chain multiple conditions together, checking them one after the other.
Syntax:
if (condition1) {
// Code to run if condition1 is true
} else if (condition2) {
// Code to run if condition1 is false and condition2 is true
} else {
// Code to run if both condition1 and condition2 are false
}Example:
let score = 85;
if (score >= 90) {
console.log("You got an A!");
} else if (score >= 80) {
console.log("You got a B!");
} else {
console.log("Keep trying!");
}In this example, the program first checks if the score is 90 or higher (grade A). If that’s not true, it checks if the score is 80 or higher (grade B). If neither condition is true, it prints "Keep trying!".
5. The Ternary Operator: A Shorter if Statement
When you need to write simple if...else logic, you can use the ternary operator. It’s a more concise way to write if statements.
Syntax:
condition ? expressionIfTrue : expressionIfFalse;The ternary operator is best used for short, simple conditionals because it allows you to write the condition, the action if true, and the action if false all in one line.
Example:
let age = 20;
let canVote = age >= 18 ? "You can vote!" : "You are too young to vote.";
console.log(canVote);This example is equivalent to an if...else statement but much shorter. It checks if the age is 18 or older and assigns a different message to the canVote variable based on the result.
6. The switch Statement: Managing Multiple Conditions
If you have many possible conditions to check for a single value, the switch statement can be a cleaner and more organized alternative to multiple if...else if statements. The switch statement evaluates an expression and compares its value against multiple possible cases.
Syntax:
switch(expression) {
case value1:
// Code to run if expression === value1
break;
case value2:
// Code to run if expression === value2
break;
default:
// Code to run if no cases match
}Example:
let day = "Monday";
switch (day) {
case "Monday":
console.log("Start of the week.");
break;
case "Friday":
console.log("End of the week.");
break;
default:
console.log("It's a regular day.");
}In this example, the program checks the value of the day variable. If it’s "Monday", it prints "Start of the week." If it’s "Friday", it prints "End of the week." For any other value, it prints "It's a regular day."
Conclusion
Conditional statements are a fundamental part of programming in JavaScript. They allow you to make decisions in your code, helping your programs become more dynamic and responsive. Whether you’re using a simple if statement, adding alternatives with else, handling multiple conditions with else if, writing concise logic with the ternary operator, or using the switch statement for more complex conditions, mastering conditionals is an important skill for every JavaScript developer.
Practice writing these conditionals in your own programs, and soon you’ll find that making your code smarter and more interactive becomes second nature.
References
- MDN Web Docs: JavaScript Conditional Statements
- W3Schools: JavaScript switch statement