CODEWITHSUNDEEP
javascriptloopstypescriptsyntax
Abhilash Bhargava
Abhilash Bhargava

Reputation: 604

Loops- forEach, for, for....of, for...in

I am not able to understand the difference between all these loops, can anyone share a link or some article which will help me understand these loops in more details in terms of efficiency, speed, usability etc.

In the below code, how can I best understand these differences?

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (let i = 0; i < digits.length; i++) {
  console.log(digits[i]);
}

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const index of digits) {
  console.log(digits[index]);
}

Upvotes: 6

Views: 2538

Answers (2)

Vignesh Raja
Vignesh Raja

Reputation: 8751

for loop : This is the common method of iterating an array where we use i as index to access the elements in the array letters. MDN Docs for reference

var letters = ["a","b","c"];
for (let i = 0; i < letters.length; i++)
{
    console.log("Index : "+i, "Value : "+letters[i]);
}

for...in loop : This loop always iterates over the index. While traversing through the array, the variable i will hold the value of the index of each element. This can be used when the index of the elements needed during iteration. MDN Docs for reference

var letters = ["a","b","c"];
for (var i in letters)
{
    console.log("Index : "+i, "Value : "+letters[i]);
}

for...of loop : This loop always iterates through the values of the array. While traversing through the array, the variable i will hold the value of the element. This can be used if only the value of the elements in the array is needed. MDN Docs for reference

var letters = ["a","b","c"];
for (var i of letters)
{
    console.log(i);
}

forEach loop : This loop performs a callback function on each element while traversing through the arr. The parameters to the callback are currentValue, index of the currentValue, array on which the loop is performed. MDN Docs for reference

var letters = ["a","b","c"];
letters.forEach(function(value, index, arr){
    console.log("Value : "+value, "Index : "+index, "Complete array : "+arr)
});

Problem in your case : The code works fine as per the flow. Since you have the array elements equal to its index, it made difficult for you to understand it.

in for...in loop : index=0 gives digits[0]=0, index=1 gives digits[1]=1, and so on.

in for...of loop : index=0 (where variable index holds the value of digits[0]), in the console statement compiler interprets that value at index 0 is accessed in the array d. Hence it returns the value at digits[0], and so on for all elements.

Upvotes: 11

Flavien Volken
Flavien Volken

Reputation: 21279

The common way:

for (let i = 0; i < digits.length; i++) {
  console.log(digits[i]);
}

Only relies on the condition on i for the loop. If the condition i < digits.length is not satisfied, the loop will break

Both other versions (using of and in) are iterators, i.e. they will go and visit all the values of the array. No need to specify how many items to go through.

They however differ:

  • of keyword will iterate on the values of the array

  • in keyword will iterate on the index.

Typically you should use them as follow (example modified to show the difference):

const chars = ['A','B','C'];

for (const index in chars) {
  // index will be 0,1,2
  console.log(chars[index]);
}

Better if you do not need the index implicitly

const chars = ['A','B','C'];
for (const value of chars) {
  // value will be 'A','B','C'
  console.log(value);
}

Upvotes: 2

Related Questions