Array iterating

As you know, using an array to store multiple values is possible instead of creating a variable for each one. This makes your code incredibly short. This is undoubtedly useful, but storing and processing data are different. Let's say you need to simply console.log each item on the array. Is it necessary to address each item by console.log wasting as many lines of code as you thought you saved five minutes ago? Of course not! In this topic, we'll look through every possible way of going through the array.

Using a for loop

First, let's remember how a simple for loop works and what it looks like:

for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}

After executing this script, you'll see numbers from 0 to 4 in the console. Now take a look at this array and say what the indices of the items are:

let array1 = ['item1', 'item2', 'item3', 'item4', 'item5'];

If you remember that it's possible to address any item on the list by its index, everything becomes clear as day. To iterate an array, you have to use a loop variable as an index to address the next item on each iteration of the loop:

let array1 = ['item1', 'item2', 'item3', 'item4', 'item5'];
for (let i = 0; i < 5; i++) {
    console.log(array1[i]); // 'item1', 'item2', 'item3', 'item4', 'item5'
}

As a result, you will see each item logged in the console. Looks easy, but in real-life scenarios, you don't usually know the array's length. So that's why you better use array1.length to limit the number of iterations:

let array1 = ['item1', 'item2', 'item3', 'item4', 'item5'];
for (let i = 0; i < array1.length; i++) {
    console.log(array1[i]); // 'item1', 'item2', 'item3', 'item4', 'item5'
}

In this case, the loop will not throw an error, no matter the array's length.

Now, let's take a bit of an advanced example to understand how to use the for loop to iterate more efficiently and get the desired results.

// Odd or Even

const newArray = [2, 5, 15, 20];

for (let element = 0; element < newArray.length; element++) {
  if (newArray[element] % 2 == 0) {
    console.log(
      `It is even, multiplying ${newArray[element]} by 2, we get`,
      newArray[element] * 2
    );
  } else {
    console.log(
      `It is odd, multiplying ${newArray[element]} by 3, we get`,
      newArray[element] * 3
    );
  }
}

Here is the output of the above code snippet:

It is even, multiplying 2 by 2, we get 4
It is odd, multiplying 5 by 3, we get 15
It is odd, multiplying 15 by 3, we get 45
It is even, multiplying 20 by 2, we get 40

Using forEach

The second way to iterate an array is to use the forEach method. With this construct, you get access to the array element:

let array1 = [1, 2, 3, 4, 5];

array1.forEach(function(item) {
  console.log(item); // 1, 2, 3, 4, 5
});

As an argument, this method accepts a callback function defining operations to perform with each item. We logged them into the console this time, but those actions might be whatever you want.

Now, you can see a clear disadvantage of this method: you don't know the index of the item you're working with. Luckily, we need to dig deeper to solve this issue. The callback function also accepts two more arguments, which are the index and the array itself:

let array1 = [1, 2, 3, 4, 5];

array1.forEach(function(item, index, array) {
  console.log('a[' + index + '] = ' + item);
});

// The result is:
// a[0] = 1
// a[1] = 2
// a[2] = 3
// a[3] = 4
// a[4] = 5

The array is needed here for the function to know what it's working with, but you don't necessarily have to pass either the index or the array since everything happens under the hood.

By the way, this method does not return anything. For example, console.log prints undefined:

let array1 = [1, 2, 3, 4, 5];

let result = array1.forEach(function(item, index, array) {
  item = 'a[' + index + '] = ' + item;
});
console.log(result);

Now, let's rewrite the Odd or Even example discussed using the forEach structure.

newArray.forEach(function (item) {
  if (item % 2 == 0) {
    console.log(`It is even, multiplying ${item} by 2, we get`, item * 2);
  } else {
    console.log(`It is odd, multiplying ${item} by 3, we get`, item * 3);
  }
});

Here is the output of the above code snippet:

It is even, multiplying 2 by 2, we get 4
It is odd, multiplying 5 by 3, we get 15
It is odd, multiplying 15 by 3, we get 45
It is even, multiplying 20 by 2, we get 40

Using forEach in a different way

There are a couple of options except for the one we just discussed to choose from while using forEach. Another one is using an arrow function (e) => { ... }, where (e) is an item, and the code inside the curve brackets is a callback function. The code from the callback function will be applied once to each item, in this case, logging it into the console.

let array1 = [1, 2, 3, 4, 5];

array1.forEach((e) => {
  console.log(e); //1, 2, 3, 4, 5
});

Here, it's also possible to pass the index or the array or both, just like we did before:

let array1 = [1, 2, 3, 4, 5];

array1.forEach((item, index) => {
  console.log('a[' + index + '] = ' + item);
});

// The result is:
// a[0] = 1
// a[1] = 2
// a[2] = 3
// a[3] = 4
// a[4] = 5

Now, let's take a look at the remaining options. This time, we will create a function outside of the method and then call it inside of the method:

function logMyItems(item, index, array) {
  console.log('a[' + index + '] = ' + item);
}

let array1 = [1, 2, 3, 4, 5];
array1.forEach(logMyItems);

// The result is:
// a[0] = 1
// a[1] = 2
// a[2] = 3
// a[3] = 4
// a[4] = 5

Simple loop

Let's take a look at this block of code:

let array1 = [];
array1[4] = 4;

The second line of code is permitted; we just changed the size of the array by defining the value for the fourth item. In this case, each item that goes before the last one will be considered undefined and also logged into the console:

let array1 = [];
array1[4] = 5;

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

// The result is:
// undefined
// undefined
// undefined
// undefined
// 5

If we try forEach(), those undefined items won't ever be displayed:

let array1 = [];
array1[4] = 5;

array1.forEach((i) => console.log(i));

//The result is:
//5

Keep this in mind while choosing between a simple loop and a forEach.

Using for...in structure

Array's most significant advantage is that its items are structured: you know their order and can address any with its index. Another way to iterate an array sometimes completely breaks everything:

let array1 = [1, 2, 3, 4, 5];

for (let item in array1) {
  console.log(item);
}

The result of this code is obvious... Or not? The thing is, the for...in structure is used to enumerate over-object properties. An array is also an object, so its property can be non-numeric. For example, you can do something like this:

let array1 = ['a', 'b', 'c'];
array1.stringProperty = 'd';

for (let i in array1) {
  console.log(i, array1[i]); 
}
//0 a
//1 b
//2 c
//stringProperty d

For...in doesn't ignore non-numeric properties. There is also no guarantee it prints out all the items respecting their order. Avoid using this structure over an array for iterating since sometimes this little order disturbance might cause chaos.

Using for...of

The for...of statement was introduced in ES6 to iterate over an iterable. For example, you can use for...of to iterate over arrays, array-like objects, sets, maps, etc. However, the most common application of the for...of structure is to iterate on arrays. Let's take an example to understand the for...of structure in JavaScript.

const items = ["phone", "table", "chair", "bucket"];

for (const item of items) {
  console.log(item); 
}

// phone
// table
// chair
// bucket

As you can see in the example above, the for...of iterates over every single item of the items array.

Conclusion

Arrays are an instrumental data structure in JavaScript that can make your code shorter and more efficient. When it comes to iterating over an array, there are several ways to do it, including using a for loop, forEach method, for...in structure, and for...of structure.

The for loop and forEach method are the two most recommended ways to iterate over an array. With a for loop, you can use a loop variable as an index to address each item in the array. The forEach method, on the other hand, accepts a callback function that defines operations to perform with each item.

Both structures ignore non-numeric properties, which can cause chaos if you use the for...in structure to iterate over an array.

In general, it's best to stick with the for loop or forEach method when iterating over an array as they are designed specifically for this purpose and provide better control and clarity in your code.