JavaScript Fundamentals

Control Structures and Loops

Photo by Vishnu R Nair on Unsplash

Hello folks and welcome to this week’s newsletter, in which I will cover some more very important fundamental features of JavaScript, and any other programming language, for that matter.

As a front-end engineer or web developer, understanding control structures is crucial for creating dynamic and efficient web applications. JavaScript offers several control structures that allow us to manage the flow of our code execution. 

Let's explore the most common control structures: conditional statements, switch statements, and loops.

Conditional Statements

Conditional statements allow our code to make decisions and execute different blocks based on specified conditions.

If Statement

The if statement is the most basic conditional statement. It executes a block of code if a specified condition is true.

let temperature = 25;

if (temperature > 30) {
    console.log("It's a hot day!");
}

In this example, the message will only be logged if the temperature is above 30.

If-Else Statement

The if-else statement provides an alternative block of code to execute when the condition is false.

let isRaining = true;

if (isRaining) {
    console.log("Don't forget your umbrella!");
} else {
    console.log("Enjoy the sunshine!");
}

If-Else If-Else Statement

This structure allows us to check multiple conditions sequentially.

let score = 85;

if (score >= 90) {
    console.log("Excellent!");
} else if (score >= 70) {
    console.log("Good job!");
} else {
    console.log("Keep practicing!");
}

Switch Statement

The switch statement provides an alternative to multiple if-else statements when comparing a value against multiple possible cases.

let day = "Monday";

switch (day) {
    case "Monday":
        console.log("Start of the work week");
        break;
    case "Friday":
        console.log("TGIF!");
        break;
    case "Saturday":
    case "Sunday":
        console.log("Weekend!");
        break;
    default:
        console.log("It's a weekday");
}

The switch statement evaluates an expression and executes the code block associated with the matching case. The break statement is crucial to prevent fall-through to the next case.

Loops

Loops are used to execute a block of code repeatedly based on a condition.

For Loop

The for loop is used when you know in advance how many times you want to execute a block of code.

for (let i = 0; i < 5; i++) {
    console.log(`Iteration ${i + 1}`);
}

This loop consists of three parts: initialisation, condition, and increment/decrement.

While Loop

The while loop executes a block of code as long as a specified condition is true (aka while the condition is true).

let count = 0;

while (count < 3) {
    console.log(`Count is ${count}`);
    count++;
}

Do-While Loop

The do-while loop is similar to the while loop, but it always executes the code block at least once before checking the condition.

let num = 1;

do {
    console.log(`Number is ${num}`);
    num++;
} while (num <= 3);

For...of Loop

The for...of loop is used for iterating over iterable objects like arrays, strings, etc

let fruits = ['apple', 'banana', 'orange'];

for (let fruit of fruits) {
    console.log(fruit);
}

For...in Loop

The for...in loop is used for iterating over the enumerable properties of an object.

let person = {
    name: 'John',
    age: 30,
    job: 'Developer'
};

for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

Error Handling

JavaScript provides a way to handle errors gracefully using try-catch blocks.

try {
    // Code that might throw an error
    throw new Error("An error occurred");
} catch (error) {
    console.error("Caught an error:", error.message);
} finally {
    console.log("This will always execute");
}

The try block contains the code that might throw an error. The catch block handles any errors that occur. The finally block (optional) always executes, regardless of whether an error occurred or not.

Summary

By mastering these control structures, you'll be able to write more efficient and flexible JavaScript code. Remember, practice is key to becoming proficient with these concepts. 

As you work on your front-end projects, you'll find numerous opportunities to apply these control structures to create dynamic and interactive web applications.

That’s all for this week, catch you all next week.

Until then, happy coding!