4.1 If..else

In the previous section you learned about expressions and operators. In this section we'll combine them with conditional statements to add real interactivity to our applications. JavaScript provides two kinds of conditionals: if / else if / else and switch / case. This lesson focuses on the first one.

Imagine an app that greets the user differently depending on the current time:

• Between 6 and 12 — display "Good morning".
• Between 12 and 18 — display "Good afternoon".
• Otherwise — display "Good evening".

The if / else if / else structure

An if statement takes a condition inside parentheses. If the condition evaluates to true, the block that follows is executed. else if adds alternative branches, and else handles the case where none of the previous conditions matched. You can chain as many else if as you need.

let hour = 10;

if (hour >= 6 && hour < 12) {
  console.log('Good morning');
} else if (hour >= 12 && hour < 18) {
  console.log('Good afternoon');
} else {
  console.log('Good evening');
}

For a single-statement branch you can omit the braces, but keeping them is a safer habit because it prevents bugs when you add a second statement later. With hour = 10 you get "Good morning"; with 13 you get "Good afternoon"; with 20 you get "Good evening". In the next lesson, we'll explore the switch / case alternative.

Summary

This lesson covers JavaScript if...else conditional statements, which allow developers to execute different code blocks based on whether conditions evaluate to true or false. You'll learn the complete structure of if, else if, and else blocks, along with how to use comparison operators to create multi-branch logic. The practical example demonstrates greeting users differently based on the current hour: "Good morning" for 6–12h, "Good afternoon" for 12–18h, and "Good evening" for all other times.

Key points

• Conditional statements (if...else) enable you to execute different code based on specific conditions using true/false logic
• Use comparison operators (>=, <, &&, ||) to create conditions that evaluate the expressions you want to test
• An if block executes when its condition is true; else if adds additional conditions to check; else executes when all previous conditions are false
• Multiple statements within a code block must be wrapped in curly braces {}; single statements can optionally omit braces for brevity
• You can chain multiple else if conditions to check as many scenarios as needed with no limitation
• Practical example: display different greetings based on hour ranges using nested comparison operators with logical AND (&&)

FAQ

What is the basic structure of an if...else statement in JavaScript?

Start with the if keyword followed by a condition in parentheses. If the condition is true, the code block executes. Use else if to add additional conditions, and else for code that runs when all previous conditions are false.

Do I need curly braces around code in an if or else block?

Curly braces are optional for single statements but recommended for clarity and consistency. For multiple statements, curly braces are required to group them as a code block.

How do I check if a value is within a specific range using if statements?

Use comparison operators with the logical AND operator (&&). For example: if (hours >= 6 && hours < 12) checks whether the hours variable is greater than or equal to 6 AND less than 12.