5 JavaScript Loop Structures You must know as a beginner

Introduction

In the world of programming, the ability to perform repetitive tasks efficiently is crucial. For example, If you have to print the numbers from 1 to 5, you can do it very easily. But, when printing the numbers from 1 to 1000, writing so much code could be hectic. JavaScript, being one of the most popular programming languages, offers powerful loop structures to run a block of code repeatedly.

Loops are indispensable when it comes to iterating over arrays, handling repetitive tasks, and solving complex problems efficiently. In this blog, we will explore the different types of loop structures in JavaScript and learn how to leverage their potential to write clean and effective code.

The for loop

This loop is ideal when you know the exact number of required iterations. This loop iterates over a sequence of elements.

Syntax of for loop:

for (initialization; condition; increment) {
       //code to be executed
}

Its syntax consists of three statements: initialization, condition, and increment. The initialization statement initializes a variable, the condition statement defines the condition for how long the loop should run and the increment statement increases the variable after each iteration.

For Example, let’s say we want to print the numbers from 1 to 50.

for (let i = 1; i <= 50; i++) {
    console.log(i);
}

The for-in loop

This loop is ideal for iterating over the properties of an object.

Syntax of the for-in loop:

for (key in object) {
    // code to be executed
}

For Example:

const person = {
  firstName: "Joseph",
  lastName: "Burns",
  age: 25
}

for (x in person) {
    console.log(person[x]);
}

Output for the above example:

Joseph
Burns
25

The for-of loop

This loop is ideal when you want to loop through values of an iterable object such as arrays, strings etc.

Syntax of the for-of loop:

for (variable of iterable) {
    // code to be executed
}

For Example:

const person = ["Joseph", "Burns", 25]

for (x of person) {
    console.log(x);
}

Output for the above example:

Joseph
Burns
25

The while loop

The while loop is ideal when the number of iterations is uncertain or depends on a particular condition.

The condition is evaluated before each iteration, and if it returns true, the loop continues.

Syntax of the while loop:

while (condition) {
    // code to be executed
}

For Example, let’s say we want to print the numbers from 1 to 50.

let i = 1;

while(i <= 50) {
    console.log(i);
     i++;
}

The condition should eventually become false otherwise, it will become an infinite loop.

The do-while loop:

The do-while loop is similar to the while loop, with the difference that the code block executes at least once before checking the condition.

Syntax of the while loop:

do {
    // code to be executed
} while (condition);

For Example, let’s say we want to print the numbers from 1 to 50.

let i = 1;

do {
    console.log(i);
     i++;
} while(i<=50);

Conclusion:

Loops play a vital role in JavaScript programming by enabling developers to iterate over arrays, handle repetitive tasks, and solve complex problems efficiently. Understanding the various types of loops and their appropriate usage is crucial for writing clean, optimized code. So, embrace the power of repetition, master the art of loops, and take your JavaScript coding skills to the next level!

Keep Coding!!

Check out toast.log, a browser extension that lets you see errors, warnings, and logs as they happen on your site — without having to open the browser’s console. Click here to get a 25% discount on toast.log.