For, For…Of, and For…In Loops in JavaScript | Explained

In programming languages, Loops are most used to repeatedly execute a block or chunk of code for a set amount of times or until a specific condition is met. JavaScript is no different when it comes to loops. The traditional loops that are used in other programming languages are For, while, and do while which are all present in JavaScript as well but with the arrival of ES6 a few modified versions of For loops were introduced. These were “For…of” and “For…in” loops. We are going to cover For loop, For-in loop, and For-of loop in detail.

For Loop in JavaScript

The most common and the most widely used loop in JavaScript and probably in all other programming languages as well is the For loop. As we have already explained, these loops are used to repeatedly execute or invoke a chunk of code until a specific condition is met. This condition is passed inside the second parameter of the For loop. For loop is commonly used when we have a rough estimate of how many times will the loop run. Based on that we set our condition.

Syntax of For loop

for ( initialize-variable ; condition-to-be-met ; final-expression ) {

// body of the for loop

}

• Initialize-variable: Initialize a variable in the first parameter.
• Condition-to-be-met: Define a condition on which the loop will iterate.
• Final-expression: Task to perform at the end of loop’s iteration

 

Note: The parameters of the For loop are separated by a semi-colon “; ” and are all optional in JavaScript.

Example: Let’s take an example where we need to print the first 10 digits starting from one. If we do it without a loop our code will look like:

console.log(1);

console.log(2);

console.log(3);

console.log(4);

console.log(5);

console.log(6);

console.log(7);

console.log(8);

console.log(9);

console.log(10);

The output:

Output is exactly what we wanted, but it’s not an efficient way of doing it. Let’s try using the For loop for solving the same problem. The code is as:

for (let i = 0 ; i <=10 ; i ++){

console.log(i)

}

The output is exactly the same:

If we go over the code, we created a block-scoped counter variable “i” and initialized it with an integer value 0. In the second parameter, we set a condition that we want to run until the counter variable reaches the value 10, and in the last parameter, we set a final expression to increase this counter variable by 1 every time the loop reaches the end of each iteration.

How to work with Arrays using For Loop

Loops can also be used to iterate through arrays and their value, to demonstrate that, we will need an array. Create an array of numbers with the following statement:

array = [1,5,88,24,25,137,37,28,173,222];

Let’s use loop access each element inside this array and print out its value by using the following statements:

for ( i = 0 ; i < array.length ; i++){

console.log(array[i]);

}

The output is:

Note: We used the condition, i < array.length because the index of the last element in the array, will always be one less than the length of the array and that is because in arrays the index starts from zero

We can even use the For loop to traverse in the array from the last to first by using the code:

for (let i = array.length-1 ; i >= 0 ; i--){

console.log(array[i]);

}

We initialized the counter variable with a value one less than the length of that array to access the last element of the array, and started reducing the counter variable by 1 in each iteration. The output is:

The For-of loop in JavaScript

The For-of loop is used to iterate over iterable objects, these objects can be Arrays, Sets, Objects, and even Strings. The For..of loop returns the value of the elements of the iterable objects:

Syntax of the for-of loop

for ( element of array ){

// Body of the loop

}

• element: is the name of the variable we are going to give to each item in the array.
• array: is the array that we are traversing through

To better understand the working of For-of loop, let’s take an array of variables values:

array = [1,4,56, "Cash", " Car", 63, 69, "Google", "Moon", "Mercury"];

Now, use the For-of loop to iterate through the elements using the following lines of code:

for (elem of array ){

console.log(elem);
}

The output is:

We have traversed through the elements of the array using the for..of loop.

Looping through a string using the for-of loop

We can use the For-of loop to go through each character of a string value. For that let’s create a string variable using the following statement in JavaScript.

var sentence = "Welcome to LinuxHint!";

Now, iterate through every character of this variable using the commands:

for (char of sentence ){
console.log(char);
}

We get the following output in our console:

As you can see, with the help of the For-of loop, we were able to access each individual character from within a string.

The For-in loop:

The For-in loop is used to iterate over the properties of the elements inside the iterable objects, to understand this in a much better way we create an object containing key-value pairs using the following statements:

const person = {firstName: "John", lastName: "Doe", age: 22, city: "Newyork"};

Let’s print the “key” values of this object by using the for..in.. loop through these statements:

for (props in person) {

console.log(props);

}

The output is:

As you can see the for-in loop accesses the names of the properties of the items.

Conclusion

The for loop is the most widely used loop; JavaScript comes with its variation of for loop, the for-in loop, and the for-of loop. We learned about the syntax and working of the for loops. After that, we learned about the for-in and the for-of loop and how they work and what they return along with their examples, and we even learned the difference between the two variants.

from https://ift.tt/3IqHSdf