Conditional statements are one of the most important concepts in JavaScript. They allow your programs to make decisions and execute different blocks of code based on specific conditions.
Whether you're validating user
input, controlling application flow, or building interactive websites,
conditional statements are essential tools in every developer's toolkit.
In this guide, you'll learn how to
use if, else, else if, and switch
statements in JavaScript with practical examples.
What
Are Conditional Statements?
Conditional statements enable a
program to evaluate a condition and perform different actions depending on
whether the condition is true or false.
Think of it like making decisions in
everyday life:
- If it's raining, take an umbrella.
- Else, enjoy the sunshine.
JavaScript follows the same logic
using conditional statements.
The
if Statement
The if statement executes a block of code only if a specified
condition evaluates to true.
Syntax
if
(condition) {
// code to execute
}
Example
let
age = 20;
if
(age >= 18) {
console.log("You are eligible to
vote.");
}
Output:
You
are eligible to vote.
Since the condition age
>= 18 is true, the code inside the block
executes.
The
if...else Statement
The else statement provides an alternative block of code to execute
when the condition is false.
Syntax
if
(condition) {
// code if true
}
else {
// code if false
}
Example
let
age = 16;
if
(age >= 18) {
console.log("You can vote.");
}
else {
console.log("You are too young to
vote.");
}
Output:
You
are too young to vote.
The
if...else if...else Statement
When you need to evaluate multiple
conditions, use else if.
Syntax
if
(condition1) {
// code
}
else if (condition2) {
// code
}
else {
// default code
}
Example
let
score = 85;
if
(score >= 90) {
console.log("Grade A");
}
else if (score >= 80) {
console.log("Grade B");
}
else if (score >= 70) {
console.log("Grade C");
}
else {
console.log("Grade D");
}
Output:
Grade
B
The program checks each condition
from top to bottom and executes the first one that evaluates to true.
Nested
if Statements
You can place one if statement inside another.
Example
let
age = 25;
let
hasLicense = true;
if
(age >= 18) {
if (hasLicense) {
console.log("You can
drive.");
}
}
Output:
You
can drive.
Nested conditions are useful when
multiple requirements must be met.
Comparison
Operators in Conditions
Conditional statements often use
comparison operators.
|
Operator |
Meaning |
|
== |
Equal to |
|
=== |
Strictly equal to |
|
!= |
Not equal to |
|
!== |
Strictly not equal to |
|
> |
Greater than |
|
< |
Less than |
|
>= |
Greater than or equal to |
|
<= |
Less than or equal to |
Example
let
number = 10;
if
(number === 10) {
console.log("The number is exactly
10.");
}
Logical
Operators
You can combine multiple conditions
using logical operators.
AND
(&&)
let
age = 25;
let
citizen = true;
if
(age >= 18 && citizen) {
console.log("Eligible to vote.");
}
OR
(||)
let
isWeekend = true;
let
isHoliday = false;
if
(isWeekend || isHoliday) {
console.log("Enjoy your day
off!");
}
NOT
(!)
let
loggedIn = false;
if
(!loggedIn) {
console.log("Please log in.");
}
The
switch Statement
The switch statement is useful when you need to compare a single value
against multiple possible cases.
Syntax
switch
(expression) {
case value1:
// code
break;
case value2:
// code
break;
default:
// code
}
Example
let
day = 3;
switch
(day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Invalid day");
}
Output:
Wednesday
Why
Use break?
The break statement stops the execution of the switch block once a
matching case is found.
Without break, JavaScript continues executing subsequent cases.
Example
let
color = "red";
switch
(color) {
case "red":
console.log("Stop");
break;
case "green":
console.log("Go");
break;
}
When
to Use if...else vs switch
Use
if...else When:
- Working with ranges of values.
- Evaluating complex conditions.
- Combining multiple logical expressions.
Example:
if
(score >= 90) {
console.log("Excellent");
}
Use
switch When:
- Comparing one variable against many fixed values.
- Improving readability for multiple cases.
Example:
switch
(role) {
case "admin":
case "manager":
console.log("Access
granted");
break;
}
Common
Mistakes to Avoid
Using
= Instead of == or ===
Incorrect:
if
(age = 18) {
console.log("Wrong");
}
Correct:
if
(age === 18) {
console.log("Correct");
}
Forgetting
break in Switch Statements
Without break, execution falls through to the next case.
Overusing
Nested Conditions
Deeply nested conditions can make
code difficult to read. Consider using logical operators or restructuring your
code.
Best
Practices
- Use meaningful variable names.
- Prefer === over == for strict comparisons.
- Keep conditions simple and readable.
- Use switch for multiple fixed-value comparisons.
- Add comments when conditions become complex.
Conclusion
Conditional statements are
fundamental to JavaScript programming. The if, else,
and switch statements allow your applications
to make decisions, respond to user actions, and execute code dynamically.
By mastering conditional logic,
you'll be able to create smarter, more interactive web applications and write
cleaner, more maintainable code.