JavaScript Conditionals
Learn how to make decisions in JavaScript using if, else, else if, switch statements, and conditional logic with practical examples.
Reading Time
18 min
Lesson
Lesson 8 of 48
What are Conditional Statements?
Conditional statements allow JavaScript programs to make decisions based on different conditions. Instead of executing every line of code, JavaScript chooses which block of code should run depending on whether a condition evaluates to true or false.
Why Use Conditional Statements?
- Validate user input
- Show or hide content
- Check login status
- Grant or deny access
- Perform different actions based on user choices
- Build interactive applications
The if Statement
The if statement executes a block of code only when the specified condition is true.
if Statement Example
Console Output
Click “Run” to see the console output here.
The if...else Statement
The else block executes when the condition inside the if statement is false.
if...else Example
Console Output
Click “Run” to see the console output here.
The else if Statement
Use else if when multiple conditions need to be checked one after another.
else if Example
Console Output
Click “Run” to see the console output here.
Nested if Statement
An if statement can contain another if statement inside it. This is known as a nested if statement.
Nested if Example
Console Output
Click “Run” to see the console output here.
The switch Statement
The switch statement is useful when comparing a single value against multiple possible cases. It makes the code cleaner than writing many else if statements.
switch Statement Example
Console Output
Click “Run” to see the console output here.
if vs switch
| Feature | if | switch |
|---|---|---|
| Multiple Conditions | ✅ | ❌ |
| Range Checking | ✅ | ❌ |
| Exact Value Matching | ✅ | ✅ |
| Cleaner for Many Values | ❌ | ✅ |
Truthy and Falsy Values
JavaScript evaluates values as either truthy or falsy inside conditions. Understanding these values helps write cleaner code.
Falsy Values
- false
- 0
- "" (Empty String)
- null
- undefined
- NaN
Everything Else is Truthy
Any value other than the falsy values is considered truthy. Examples include non-empty strings, arrays, objects, and non-zero numbers.
Truthy & Falsy Example
Console Output
Click “Run” to see the console output here.
Logical Operators with Conditions
Logical operators allow you to combine multiple conditions into a single expression.
Logical Condition Example
Console Output
Click “Run” to see the console output here.
Ternary Operator
The ternary operator is a shorthand version of an if...else statement. It is useful when choosing between two values.
Ternary Operator Example
Console Output
Click “Run” to see the console output here.
Common Mistake
Do not confuse the assignment operator (=) with the comparison operator (===). Accidentally using = inside an if condition can introduce bugs.
Incorrect vs Correct Comparison
Console Output
Click “Run” to see the console output here.
Best Practices
Keep conditions simple, avoid deeply nested if statements, use switch for multiple fixed values, and always prefer strict equality (===) over loose equality (==).
Summary
Conditional statements allow JavaScript programs to make decisions. The main conditional structures are if, else, else if, switch, and the ternary operator.