[JS Basics] Conditional Statements in JavaScript: Examples & Effective Usage

Imagine you're standing at a crossroads. You can go straight, turn left, or turn right. Your decision depends on where you want to go. In programming, your code constantly needs to "make decisions" like this. It needs a way to execute different actions based on different conditions. That's where conditional statements shine. 🚦

This is the "brain" of your program, allowing it to be flexible, smart, and responsive to input data, user interactions, or changing states. In this article, we'll explore every corner of conditional statements in JavaScript, from the simplest concepts to optimization techniques.

Why Use Conditional Statements?

A program without conditional statements is like a story with only one straight path, no twists or turns. It would execute commands sequentially from top to bottom. But reality is not that simple.

Consider these real-world examples:

• Login: If the user enters the correct password, then show the welcome page. Otherwise, display an error message.
• Online shopping: If the product is in stock, then allow the user to add it to the cart. Otherwise, show an "Out of stock" message.
• Light/Dark mode: If the user enables dark mode, then change the background to black. Otherwise, keep it white.

All these scenarios require decision-making, and that's the job of conditional statements.

The "Crossroads": Types of Conditional Statements

JavaScript provides us with several powerful tools to handle conditional logic. Let's look at each one.

1. if - The Simplest Branch

This is the most basic form. It checks a condition, and if that condition is true, it executes a block of code.

Syntax:

if (condition) {
  // Code to execute if condition is true
}

Example: Check if a user is old enough to view content.

let age = 20

if (age >= 18) {
  console.log('Welcome! You are old enough to access this.')
}
// Output: "Welcome! You are old enough to access this."

let anotherAge = 15
if (anotherAge >= 18) {
  console.log('This line will never be printed.')
}
// Nothing is printed

2. if...else - Choose A or B

This is an extension of if. It lets you execute one block of code if the condition is true, and another block if the condition is false.

Syntax:

if (condition) {
  // Code if condition is true
} else {
  // Code if condition is false
}

Example: Check if a number is even or odd.

let number = 7

if (number % 2 === 0) {
  console.log(number + ' is even.')
} else {
  console.log(number + ' is odd.')
}
// Output: "7 is odd."

3. if...else if...else - When There Are More Than Two Choices

When you have multiple conditions to check, the if...else if...else chain is perfect. It checks conditions in order from top to bottom and executes the block for the first true condition.

Syntax:

if (condition1) {
  // Code if condition1 is true
} else if (condition2) {
  // Code if condition2 is true
} else {
  // Code if all above conditions are false
}

Example: Grade a student based on their score.

let score = 85

if (score >= 90) {
  console.log('Grade A')
} else if (score >= 80) {
  console.log('Grade B') // This condition is true, code stops here
} else if (score >= 70) {
  console.log('Grade C')
} else {
  console.log('Grade D')
}
// Output: "Grade B"

4. switch...case - The "Signpost" for Specific Values

The switch statement is a neat alternative to long if...else if...else chains, especially when comparing a variable to many specific values.

Syntax:

switch (valueToCompare) {
  case value1:
    // Code if valueToCompare === value1
    break // Very important!
  case value2:
    // Code if valueToCompare === value2
    break
  default:
  // Code if no case matches
}

Important note: Don't forget the break keyword! Without it, code will continue to run into the next case ("fall-through") until it hits a break or the end of the switch block. The default block is optional and runs if no case matches.

Example: Display the day of the week based on a number.

let dayOfWeek = 3
let dayName

switch (dayOfWeek) {
  case 1:
    dayName = 'Monday'
    break
  case 2:
    dayName = 'Tuesday'
    break
  case 3:
    dayName = 'Wednesday'
    break
  case 4:
    dayName = 'Thursday'
    break
  case 5:
    dayName = 'Friday'
    break
  case 6:
    dayName = 'Saturday'
    break
  case 7:
    dayName = 'Sunday'
    break
  default:
    dayName = 'Invalid day'
}

console.log(dayName) // Output: "Wednesday"

5. Ternary Operator - The Shortcut for if...else

This is a super concise way to write an if...else statement. It's often used to assign a value to a variable based on a condition.

Syntax:

let result = condition ? valueIfTrue : valueIfFalse

Example: Assign a message based on login status.

let isLoggedIn = true
let message = isLoggedIn ? 'Welcome back!' : 'Please log in.'

console.log(message) // Output: "Welcome back!"

When to Use What? Quick Comparison 💡

Here's a quick comparison table for conditional statements in JavaScript:

Falsy and Truthy Values - The "Hidden Truth"

A crucial concept when working with conditions in JavaScript is "truthy" and "falsy" values.

• Falsy: Values that JavaScript automatically treats as false in a condition. There are 6 falsy values:

  • false
  • 0 (zero)
  • "" (empty string)
  • null
  • undefined
  • NaN (Not a Number)

• Truthy: Any value that is not falsy. Examples: true, 123, "hello", [] (empty array), {} (empty object).

Understanding this lets you write more concise code.

Example: Check if the user has entered a name.

let userName = '' // A falsy value

// Instead of: if (userName !== "")
if (userName) {
  console.log('Hello ' + userName)
} else {
  console.log('Please tell us your name.')
}
// Output: "Please tell us your name."

Conclusion: Conditional Statements Solve Real-World Problems

Conditional statements are one of the most fundamental and powerful building blocks in JavaScript. Mastering if, else, switch, and the ternary operator not only helps you solve complex logic problems but also makes your code cleaner, more readable, and more efficient.

Start practicing by creating your own scenarios. Decision logic is everywhere, and now you have the tools to turn that logic into living code. Good luck on your journey to mastering JavaScript! 🚀