5 JavaScript Loops You Need To Know

Let’s look into the 5 JavaScript Loops you need to know.

Introduction

Before looking into JavaScript loops, let us first look at what a loop is it is a set of instructions that is repeatedly executed until a given condition is met. Loops are used to execute a block/set of code for a given number of times or till a set condition is met.

Prerequisites

• Basic JavaScript Knowledge

JavaScript Loops

For Loop

The for loop is the most commonly used loop, it has similarities to for loops present in the C and Java programming languages. Let’s first look at the syntax of the for a loop.

Syntax

for(initialExpression; conditionExpression; increment/decrementExpression) {
    // Statement or Statements
}

Examples of parameters

initialExpression: let i = 0

conditionalExpression: i < 10

increment/decrementExpression: i++ or i--

Now, let’s look at the example of using for loop

Example

const array = ["apple", "banana", "watermelon", 4, 5];
for(let i = 0; i < array.length; i ++) {
    console.log(array[i]);
}

Output

#*# OUTPUT #*#
apple
banana
watermelon
4
5

While Loop

The while loop also falls under the most used loop, buts its structure differs from the for loop. It also looks like while loop is present in the C and Java programming languages. Let us look at the syntax of the while loop.

Syntax

initialExpression;

while(conditionExpression) {
    // Statement or Statements
    increment/decrementExpression
}

The while loop runs till the condition expression is true. One of the easy things to do while making a while loop is infinite loops, which are bad. As for loop it also checks its condition before running the loop. Now let’s look at the example of using the while loop also the infinite loop.

Example

const array = [1, 2, 3, 4, 5];
let i = 0;
while(i < array.length) {
    console.log(array[i]);
    i ++;
}

// infinite loop
while (true) {
   console.log('Never use infinite loop');
}

Output

#*# OUTPUT #*#
1
2
3
4
5

Never use infinite loop
Never use infinite loop
Never use infinite loop
Never use infinite loop
...

Do…While Loop

The do…while loop is similar to the while loop in terms of structure. The do…while is not that commonly used compared to for and while loop. The do…while loop is also present in C and Java Languages. Let’s look at the syntax of the do…while loop.

Syntax

initialExpression;

do {
    //Statement or Statements

    increment/decrementExpression
} while(conditionExpression);

The do…while loop differs from the while loop, where the while loop checks its condition at the start of the loop. The do…while loop does it at the end. This behavior makes it so that the do…while loop runs at least once.

Example

const array = [1, 2, 3, 4, 5];
let i = 0;
do {
    console.log(array[i]);
    i ++;
} while(i < array.length);

Output

#*# OUTPUT #*#
1
2
3
4
5

For…In Loop

The for..in loop is the only loop that iterates over an object giving out its properties names/keys. Let’s look at the syntax of the for…in loop. The loop runs till the end of the object it is iterating over.

Syntax

for (key in object) {
    //Statement or Statements
}

Example

const obj = {
  vehicle: "Car",
  model: "Ford"
}
for (let key in obj) {
  console.log("Key:",key);
  console.log("Value:", obj[key]);
  console.log("------------------")
}

Output

#*# OUTPUT #*#

Key: vehicle
Value: Car
------------------
Key: model
Value: Ford
------------------

We can see that the for…in loop gives out the property name of the object.

For…Of Loop

The for…of loop is used to Iterate over Arrays, Sets, and Strings. It has the same structure as the

console.log("--- Iterating Over Character ---")
const str = "hello"
for (let char of str) {
  console.log(char)
}

console.log("--- Iterating Over Set ---");
const set = new Set();
set.add(10);
set.add(11);
set.add(12);
for (let item of set) {
  console.log(item)
}

console.log("--- Iterating Over Array ---");
const arr = [1, 2, 3, 4, 5];
for (const item of arr) {
  console.log(item)
}

#*# OUTPUT #*#
--- Iterating Over Character ---
h
e
l
l
o
--- Iterating Over Set ---
10
11
12
--- Iterating Over Array ---
1
2
3
4
5

As we can see the for…of loop is used to iterate over Sets, Strings, arrays, and other iterable objects.

Conclusion

So in this article, we looked at 5 JavaScript loops you need to know, for further content like this look into JavaScript references. For external reference on loops look into this article written by Mozilla.