Understanding Loops and Iteration in JavaScript

Several looping ways are available in JavaScript to effectively manage repetitive operations. By learning these loops, you may improve your coding skills whether you're iterating through arrays, objects, or just running a block of code again.
We'll cover JavaScript loops and iteration statements in this blog:

1. for statement
2. do...while statement
3. while statement
4. for...in statement
5. for...of statement
6. break statement
7. continue statement

📖 Introduction to Loops in JavaScript

Loops are JavaScript structures that allow you to repeat a block of code based on specific conditions. This removes redundancy, increases readability, and makes the code dynamic.
For example, suppose you want to print the numbers 1–10. Without loops, you'd have to manually create ten console.log statements. With loops, it's only a few lines of code!

1️⃣ for Statement
The for loop is one of the most widely used loops. It executes a block of code for a specific number of times.
⭐ Syntax:

for (initialization; condition; increment/decrement) {
    // code to execute
}

📌 Example: Print numbers from 1 to 5

for(let var1 = 1; var1 <= 5; var1++){
    console.log('Iteration number '+ var1)
}
/* Output:
Iteration number 1
Iteration number 2
Iteration number 3
Iteration number 4
Iteration number 5 */

2️⃣ while Statement
The while loop verifies the condition before executing the code block. It is useful when you don't know how many times the loop will execute. It will continue to execute as long as the provided condition is true. If the condition becomes false, the loop terminates.
⭐ Syntax:

while (condition) {
    // code to execute
}

📌 Example: Print numbers from 1 to 5

let var2 = 1
while(var2 <= 5){
    console.log('Iteration number '+ var2)
    var2++
}
/* Output:
Iteration number 1
Iteration number 2
Iteration number 3
Iteration number 4
Iteration number 5 */

3️⃣ do...while Statement
The do...while loop runs the block of code at least once, regardless of whether the condition is false. This loop is useful when you want to ensure that the code block runs at least once, regardless of the condition.
⭐ Syntax:

do {
    // code to execute
} while (condition);

📌 Example 1: Print numbers from 1 to 5

let var3 = 1
do {
    console.log('Iteration number '+ var3)
    var3++
}while(var3 <= 5)
/* Output:
Iteration number 1
Iteration number 2
Iteration number 3
Iteration number 4
Iteration number 5 */

📌 Example 2: Code block runs at least once

let var4 = 6
do {
    console.log('Iteration number '+ var4)
    var4++
}while(var4 <= 5)
/* Output:
Iteration number 6 */

4️⃣ for...in Statement
The for...in loop traverses the keys of an object. It is typically used with objects, but it can also iterate across array indices.
⭐ Syntax:

for (key in object) {
    // code to execute
}

📌 Example: Iterate through an object’s properties

const user = { name: "Richa", age: 25, role: "Developer" };
for (let key in user) {
    console.log(`${key}: ${user[key]}`);
}
/* Output:
name: Richa
age: 25
role: Developer */

5️⃣ for...of Statement
The for...of loop iterates over iterable objects such as arrays, strings, Maps, and Sets. This loop is very useful when you want to iterate over all elements of an iterable without having to manage an index or use an object's properties.
⭐ Syntax:

for (element of iterable) {
    // code to execute
}

📌 Example: Iterate through an array

const numArray = [1,2,3,4,5]
for(const num of numArray){
    console.log('Iteration number '+ num)
}
/* Output:
Iteration number 1
Iteration number 2
Iteration number 3
Iteration number 4
Iteration number 5 */

6️⃣ break Statement
When a certain condition is met, the break statement forces the loop to exit immediately.
📌 Example: Stop the loop when i equals 3

for (let i = 1; i <= 5; i++) {
    if (i === 3) break;
    console.log("Iteration number "+i);
}
/* Output:
Iteration number 1
Iteration number 2 */

7️⃣ continue Statement
The continue statement skips the current iteration and jumps to the next one.
📌 Example: Skip the number 3

for (let i = 1; i <= 5; i++) {
    if (i === 3) continue;
    console.log("Iteration number "+i);
}
/* Output:
Iteration number 1
Iteration number 2
Iteration number 4
Iteration number 5 */

Conclusion

Understanding and mastering loops is essential for dealing with complicated issues efficiently. While basic loops such as for, while, and do...while are essential, nowadays for...of and for...in loops provide greater flexibility when working with objects and arrays. To control the flow of your loop, remember to utilize break and continue carefully.
Happy coding!✨

Comments

[Grant Riordan]

Mod - great article. Suggestion though would be to include the language when creating code blocks this will colour code your code accordingly making it slightly easier to read.

[Richa]

Sure. Thank you for the suggestion. I'm going to do this in my upcoming blogs.