5 JavaScript Loop Structures You must know as a beginner

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.

JavaScript 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 the 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);
}

JavaScript 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

JavaScript 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

JavaScript 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.

JavaScript 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);

That’s all for today!

If you’re new to web development, check out Learnify — my curated platform with beginner-friendly tutorials to help you learn web development step-by-step with examples and simple explanations.

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛

Follow me on X (Twitter) to get daily web development tips & insights.

Enjoyed reading? You may also find these articles helpful.

How to Use Optional Chaining in JavaScript

JavaScript Hoisting Guide For a Beginner