Topic 2112 min readStructured Tutorial

JavaScript Control Flow Statements: if-else Statement

Quick Answer

The if-else statement in JavaScript allows you to execute different blocks of code based on a condition. It evaluates a boolean expression and runs the 'if' block if true, otherwise the 'else' block. This control flow statement is fundamental for decision-making in JavaScript programs.

Learning Objectives

Explain the purpose of if-else Statement in a practical learning context.
Identify the main ideas, terms, and decisions involved in if-else Statement.
Apply if-else Statement in a simple real-world scenario or practice task.

Introduction to if-else Statement in JavaScript

Control flow statements allow your program to make decisions and execute different code paths based on conditions.

The if-else statement is one of the most fundamental control flow tools in JavaScript, enabling conditional execution.

Control the flow, control the program.

Understanding the if-else Statement

The if-else statement evaluates a condition inside parentheses. If the condition is true, it executes the code inside the 'if' block. Otherwise, it executes the code inside the 'else' block.

This allows your program to respond differently depending on varying inputs or states.

Syntax: if (condition) { /* code if true */ } else { /* code if false */ }
The condition must evaluate to a boolean value (true or false).
The else block is optional; you can use if without else.

Basic Syntax

Here is the general structure of an if-else statement in JavaScript:

if (condition) {
// code to run if condition is true
} else {
// code to run if condition is false
}

How Conditions Work

Conditions inside the if statement are expressions that return true or false.

Common conditions include comparisons like equality (==, ===), inequality (!=, !==), greater than (>), less than (<), and logical operators (&&, ||).

Example: if (age >= 18) { ... }
Example: if (score === 100) { ... }

Examples of if-else Statements

Let's look at practical examples to understand how if-else statements work in JavaScript.

Example 1: Simple Age Check

This example checks if a person is old enough to vote.

Example 2: Grading System

This example assigns a grade based on a numeric score.

Practical Example

This code checks if the age variable is 18 or older. If true, it prints eligibility to vote; otherwise, it prints a message that the person is not eligible.

This example checks if the score is 90 or above to assign an 'A' grade; otherwise, it assigns a lower grade.

Examples

Simple Age Check Example

let age = 20;
if (age >= 18) {
  console.log('You are eligible to vote.');
} else {
  console.log('You are not eligible to vote yet.');
}

This code checks if the age variable is 18 or older. If true, it prints eligibility to vote; otherwise, it prints a message that the person is not eligible.

Grading System Example

let score = 85;
if (score >= 90) {
  console.log('Grade: A');
} else {
  console.log('Grade: B or below');
}

This example checks if the score is 90 or above to assign an 'A' grade; otherwise, it assigns a lower grade.

Best Practices

Always use curly braces {} for if and else blocks to avoid errors.
Keep conditions simple and readable.
Use strict equality (===) instead of loose equality (==) to avoid unexpected type coercion.
Indent code inside blocks for better readability.
Avoid deeply nested if-else statements; consider using switch or functions instead.

Common Mistakes

Omitting curly braces leading to bugs when adding more statements.
Using assignment (=) instead of comparison (== or ===) in conditions.
Not handling all possible cases, causing unexpected behavior.
Using loose equality (==) which can cause type coercion issues.

Hands-on Exercise

Create a Temperature Check

Write an if-else statement that prints 'Cold' if the temperature is below 15 degrees and 'Warm' otherwise.

Expected output: For temperature 10, output should be 'Cold'; for 20, output should be 'Warm'.

Hint: Use a variable to store temperature and compare it with 15.

Number Parity Checker

Write an if-else statement to check if a number is even or odd and print the result.

Expected output: For number 4, output 'Even'; for 7, output 'Odd'.

Hint: Use the modulus operator (%) to check divisibility by 2.

Interview Questions

What is the purpose of the if-else statement in JavaScript?

Interview

The if-else statement allows conditional execution of code blocks based on whether a specified condition evaluates to true or false.

What is the difference between == and === in JavaScript conditions?

Interview

== compares values with type coercion, while === compares both value and type without coercion, making === safer and more predictable.

What is if-else Statement, and why is it useful?

Beginner

The if-else statement in JavaScript allows you to execute different blocks of code based on a condition.