javascriptweb developmentprogrammingconditional statementscontrol flow

Control Flow: Conditional Statements in JavaScript

By Swann
Picture of the author
Published on
Control Flow Conditional Statements in JavaScript

Introduction

Conditional statements in JavaScript pave the way for dynamic and logical programming by allowing developers to execute specific code blocks based on certain conditions. This guide introduces the fundamental concepts of using conditional statements in JavaScript, providing a pathway to create more interactive and user-responsive applications.

Basics of Conditional Statements

The if Statement

The if statement evaluates a condition and executes a code block if the condition is true.

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

Example:

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

The else Statement

The else statement executes a code block if the initial if condition is false.

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

Example:

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

The else if Statement

The else if statement provides an additional condition check if the preceding if condition is false.

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

Example:

let score = 85;
if (score >= 90) {
    console.log("Grade A");
} else if (score >= 80) {
    console.log("Grade B");
} else {
    console.log("Grade C");
}

Logical Operators in Conditional Statements

  • AND Operator (&&): All conditions must be true.
  • OR Operator (||): At least one condition must be true.
  • NOT Operator (!): Reverses the boolean result of the condition.

The Ternary Operator

The ternary operator provides a shorthand way to write a simple if-else statement.

Syntax:

condition ? expressionIfTrue : expressionIfFalse;

Example:

let age = 20;
let eligibility = (age >= 18) ? "eligible" : "not eligible";
console.log(`You are ${eligibility} to vote.`);

Switch Case Statement

The switch statement allows a variable to be tested against multiple case values.

switch(expression) {
    case value1:
        // code to be executed if expression equals value1
        break;
    case value2:
        // code to be executed if expression equals value2
        break;
    default:
        // code to be executed if expression doesn't match any case
}

Example:

let day = "Monday";
switch(day) {
    case "Monday":
        console.log("Start of the workweek.");
        break;
    case "Friday":
        console.log("End of the workweek.");
        break;
    default:
        console.log("It's a regular day.");
}

Conclusion

Understanding and effectively utilizing conditional statements in JavaScript is pivotal for developing logical and user-interactive web applications. By combining various conditional structures and logical operators, developers can create complex logical flows, enhancing the dynamism and user responsiveness of their applications.


Additional Resources

Stay Tuned

Want to become a Next.js pro?
The best articles, links and news related to web development delivered once a week to your inbox.