Altcademy - a Forbes magazine logo Best Coding Bootcamp 2023

What are Conditionals in JavaScript?

Introduction

Conditionals are a fundamental concept in programming, and they are used to make decisions in code based on whether a certain condition is true or false. In this article, we will explore conditionals in JavaScript, providing a beginner-friendly explanation, practical examples, and some helpful analogies to aid understanding.

What are Conditionals?

Imagine you're a robot that has been programmed to make a decision based on a specific condition. For example, if it's raining outside, you should take an umbrella. If not, there's no need for an umbrella. This decision-making process is similar to how conditionals work in JavaScript.

In JavaScript, we use conditionals to execute a block of code only if a certain condition is met. If the condition is not met, the code inside the block will not run.

The if Statement

The simplest form of a conditional in JavaScript is the if statement. The if statement checks a condition and runs a block of code only if the condition is true.

Here's the syntax for an if statement:

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

The condition inside the parentheses is a boolean expression, which means it evaluates to either true or false. If the condition is true, the code inside the curly brackets {} will run. If it's false, the code will be skipped.

Let's look at an example:

let raining = true;

if (raining) {
    console.log("Take an umbrella!");
}

In this example, the raining variable is set to true. The if statement checks if raining is true, and since it is, the code inside the block runs, and "Take an umbrella!" is logged to the console.

The else Statement

Now, let's say we want to give instructions for both when it's raining and when it's not. We can use an else statement in conjunction with the if statement.

Here's the syntax for an if...else statement:

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

If the condition is true, the code inside the first block will run. If it's false, the code inside the else block will run.

Let's modify our previous example to include an else statement:

let raining = false;

if (raining) {
    console.log("Take an umbrella!");
} else {
    console.log("Enjoy the sunshine!");
}

In this example, the raining variable is set to false. The if statement checks if raining is true, and since it's not, the code inside the else block runs, and "Enjoy the sunshine!" is logged to the console.

The else if Statement

Sometimes, we have more than two conditions to check. In such cases, we can use an else if statement. This allows us to check multiple conditions in a single block of code.

Here's the syntax for an if...else if...else statement:

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

Let's look at an example that uses else if:

let weather = "snowing";

if (weather === "raining") {
    console.log("Take an umbrella!");
} else if (weather === "snowing") {
    console.log("Wear a coat and boots!");
} else {
    console.log("Enjoy the sunshine!");
}

In this example, the weather variable is set to "snowing". The if statement checks if weather is equal to "raining". Since it's not, the code moves on to the else if statement, which checks if weather is equal to "snowing". Since this condition is true, the code inside the else if block runs, and "Wear a coat and boots!" is logged to the console.

Comparison Operators

In our examples, we've used the === operator to check for equality. However, JavaScript provides several other comparison operators that can be used with conditionals:

  • ===: Equal (compares both value and type)
  • !==: Not equal (compares both value and type)
  • ==: Equal (compares just the value, not the type)
  • !=: Not equal (compares just the value, not the type)
  • <: Less than
  • >: Greater than
  • <=: Less than or equal to
  • >=: Greater than or equal to

Here's an example using the < operator:

let age = 18;

if (age < 18) {
    console.log("Sorry, you are not old enough.");
} else {
    console.log("Welcome!");
}

In this example, the if statement checks if age is less than 18. Since it's not, the code inside the else block runs, and "Welcome!" is logged to the console.

Logical Operators

We can also use logical operators to combine multiple conditions. JavaScript provides three logical operators:

  • &&: AND (both conditions must be true)
  • ||: OR (at least one of the conditions must be true)
  • !: NOT (reverses the value of the condition)

Here's an example using the && operator:

let age = 25;
let hasMembership = true;

if (age >= 18 && hasMembership) {
    console.log("Welcome to the club!");
} else {
    console.log("Sorry, you do not meet the requirements.");
}

In this example, the if statement checks if age is greater than or equal to 18 and if hasMembership is true. Since both conditions are true, the code inside the if block runs, and "Welcome to the club!" is logged to the console.

Conclusion

Conditionals are an essential part of programming, allowing us to make decisions in our code based on whether certain conditions are met. In JavaScript, we use if, else, and else if statements, along with comparison and logical operators, to create powerful and flexible decision-making structures.

Now that you have a foundational understanding of condition