JavaScript Loops

Introduction

In programming, loops are constructs that allow you to repeatedly execute a block of code based on a specified condition. They provide a way to automate repetitive tasks and iterate over collections of data. JavaScript has several types of loops:

• For loop
• While loop
• Do...while loop
• For...in loop
• For...of loop

For Loop

This is the most commonly used loop in JavaScript. It has a compact syntax and consists of three parts: initialization, condition, and increment/decrement. The loop executes the code block as long as the condition is true.
Syntax:

for (statement 1 ; statement 2 ; statement 3){
    code here...
}

Statement 1: It is the initialization of the counter. It is executed once before the execution of the code block.
Statement 2: It is the testing statement that defines the condition for executing the code block. It must return a boolean value. It is also an entry-controlled loop as the condition is checked before the execution of the loop statements.
Statement 3: It is the increment or decrement of the counter & executed (every time) after the code block has been executed.
Example:

let x;

// for loop begins when x=2
// and runs till x <=4
for (x = 2; x <= 4; x++) {
    console.log("Value of x:" + x);
}

Output:

Value of x:2
Value of x:3
Value of x:4

While Loop

The while loop repeatedly executes a block of code as long as the specified condition evaluates to true. It checks the condition before each iteration. It is an entry controlled loop since the test condition is tested before entering the loop body.
Syntax:

while (condition) {
    // Statements
}

Example:

let val = 1;

while (val < 6) {
    console.log(val);

    val += 1;
}

Output:

1
2
3
4
5

Do...while loop

Similar to the while loop, the do-while loop executes a block of code at least once and then repeatedly executes it as long as the specified condition is true. The condition is checked at the end of each iteration.
Syntax:

do {
    // Statements
}
while(conditions)

Example:

let test = 1;
do {
    console.log(test);
    test++;
} while(test<=5)

Output:

1
2
3
4
5

The main difference between do…while and while loop is that it is guaranteed that do…while loop will run at least once. Whereas, the while loop will not run even once if the given condition is not satisfied.

Comparison between the while and the do-while loop: The do-while loop executes the content of the loop once before checking the condition of the while loop. While the while loop will check the condition first before executing the content.

While Loop

1. It is an entry condition looping structure.
2. The number of iterations depends on the condition mentioned in the while block.
3. The block control condition is available at the starting point of the loop.

Do-While Loop

1. It is an exit condition looping structure.
2. Irrespective of the condition mentioned in the do-while block, there will a minimum of 1 iteration.
3. The block control condition is available at the endpoint of the loop.

For...in loop

This loop is used to iterate over the properties of an object. It can be a great debugging tool if we want to show the contents of an object.
The for-in loop iterates only over those keys of an object which have their enumerable property set to “true”. The key values in an object have four attributes (value, writable, enumerable, and configurable).
Syntax:

for (let i in obj1) {
    // Prints all the keys in
    // obj1 on the console
    console.log(i);
}

Example:

//declaring a object employee
const courses = {
    firstCourse: 'JavaScript',
    secondCourse: 'React',
    thirdCourse: 'Angular'
};
let value = '';

//using for in loop
for (let item in courses) {
    value += courses[item] + " ";
}
console.log(value);

Output:

JavaScript React Angular 

What happened in the example:

• JavaScript for-in loop iterates on the object of the course.
• The for every iteration, a key is returned (item)
• The item can now be used to access the value of the object
• The value of the key is given by courses[item]

Important Points:

• Use the for-in loop to iterate over non-array objects. Even though we can use a for-in loop for an array, it is generally not recommended. Instead, use a for loop for looping over an array.
• The properties iterated with the for-in loop also include the properties of the objects higher in the Prototype chain.
• The order in which properties are iterated may not match the properties that are defined in the object.

For...of loop

Introduced in ES6, the for...of loop is used to iterate over iterable objects like arrays, strings, maps, and sets invoking a custom iteration hook with statements to be executed for the value of each distinct property. It provides a simpler syntax compared to the for loop when working with arrays.
Syntax:

for ( variable of iterableObjectName) {
   ...
}

Example:

// Array of numbers
let numArray = [1, 4, 16, 25, 49];

console.log("Elements of numArray are->");

// for...of Loop
for (let value of numArray) {
    console.log(value);
}

Output:

Elements of numArray are->
1
4
16
25
49