Conditionals

Conditionals are used to perform different actions based on different conditions. They allow your code to make decisions and execute certain blocks of code depending on whether a condition is true or false (an incredible power!). This is fundamental for creating dynamic and interactive programs.

1. The (classic) IF Statement

The if statement is the most basic form of conditional statement. It executes a block of code if a specified condition is true. It’s easy:

Syntax:

if (condition) {
  // code to be executed if the condition is true
}

Example:

let age = 18;

if (age >= 18) {
  console.log("You are eligible to vote.");
}

In this example, the message "You are eligible to vote." will be printed to the console if the value of age is 18 or greater.

2. The (more complete) IF … ELSE Statement

The if...else statement allows you to execute one block of code if a condition is true and another block of code if the condition is false.

Syntax:

if (condition) {
  // code to be executed if the condition is true
} else {
  // code to be executed if the condition is false
}

Example:

let age = 16;

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

In this example, the message "You are not eligible to vote." will be printed to the console because the value of age is less than 18.

3. The (perfect shape) IF … ELSE IF … ELSE Statement

The if...else if...else statement is used to specify a new condition to test if the first condition is false. This allows for multiple conditions to be tested in sequence.

Syntax:

if (condition1) {
  // code to be executed if condition1 is true
} else if (condition2) {
  // code to be executed if condition1 is false and condition2 is true
} else {
  // code to be executed if condition1 and condition2 are both false
}

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 if (score >= 60) {
  console.log("Grade: D");
} else {
  console.log("Grade: F");
}

In this example, the message "Grade: B" will be printed to the console because the value of score is between 80 and 89.

4. The (alternative) SWITCH Statement

The switch statement is used to perform different actions based on different conditions. It is an alternative to using multiple if...else if statements and can make your code easier to read when you have many conditions to check.

Syntax:

switch (expression) {
  case value1:
    // code to be executed if expression === value1
    break;
  case value2:
    // code to be executed if expression === value2
    break;
  // you can have any number of case statements
  default:
    // code to be executed if expression does not match any case
}

Example:

let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  case 7:
    console.log("Sunday");
    break;
  default:
    console.log("Invalid day");
}

In this example, the message "Wednesday" will be printed to the console because the value of day is 3.

Use Case:

Suppose you're building a simple application to determine the type of message to display based on the time of day. You might use conditionals to check the current hour and display an appropriate message.

Example:

let hour = new Date().getHours();
let greeting;

if (hour < 12) {
  greeting = "Good morning";
} else if (hour < 18) {
  greeting = "Good afternoon";
} else {
  greeting = "Good evening";
}

console.log(greeting); // Output depends on the current time

In this example:

  • We use the getHours method to get the current hour from the Date object.

  • We use if...else if...else statements to set the greeting variable based on the current hour.

  • We use console.log to print the appropriate greeting to the console.

This use case demonstrates how conditionals can be used to create dynamic and context-sensitive behavior in your JavaScript programs. Understanding these fundamental control structures is essential for building interactive and responsive applications.


Help us improve the content 🤩

You can leave comments here.

Last updated