Which Loop To Use To Iterate Over Array In JavaScript?

for, for...of, for...in, forEach, or map; pros, cons, and suggestions

To iterate over an array, JavaScript offers multiple options. Listed below are the commonly used loops, with their pros and cons.

1. for loop

As in other languages, it is the most basic loop:

Example


const array = [1,2,3,4,5,6,7];

for(let i=0; i<array.length; i++){
  // access element by array[i]
  // access index by i
}

Pros

Because of the control it offers, nearly every task that involves iterate over an array can be done through this basic for loop. Its main pros are:

  • Both element and index can be accessed inside the loop body
  • The loop can be run in reverse (by starting with array length and decrementing the index till 0)
  • The index can be incremented or decremented in a number of ways, not just +1 or -1. This means we can also skip entries in the iteration (e.g. i=i+2 to skip by 2)
  • You can break to terminate the loop before it has run its complete course
  • You can continue and start the next iteration
  • returning from within the body is possible; it terminates the loop and exits the function with the returned value
  • Since we have the index, we can access other elements beside the current index by adding to or subtracting from the current index (for example: array[i+2] or array[i-2])
  • Using the available index, the array value, or a property of the value, can be modified, both for primitive (String, Boolean or Number) and or non-primitive (Object or Array) data types
  • An element can be removed from the array at a given index (although this should be done carefully as to not mess up the array or the loop being executed)

Cons

  • It’s slightly verbose
  • Greater control means we have to take care of start and end of the loop, which could sometimes result in errors

2. for…of

The syntax for for...of loop is:

Example

const array = [1,2,3,4,5,6,7];

for(const el of array){
  // access element with el
}

Pros

  • No need to access array index to get the value, as it is available in a variable (precise and short),
  • We can modify the properties of a value, if the value is non-primitive (Object, Array)
  • You can break the loop or return

Cons

  • Can’t access element’s index
  • The loop cannot be run in reverse
  • No element can be skipped
  • Other elements beside the current cannot be accessed
  • No index means we cannot modify the array

The above cons which are related to missing index can be solved with a workaround, such as initializing the index outside the loop and incrementing inside the body, but then we’re better off using the original for loop.

3. for…in

const data = {
  a: "A",
  b: "B",
  c: "C",
  d: "D",
  e: "E",
  f: "F",
  g: "G"
};

for(const key in data){
  // access key with key
  // access value with data[key]
}

Pros

  • Generally used to iterate over all enumerable properties of an object (though can also be used to iterate an array, but there’s no particular need for that)
  • You can break the loop or return

Cons

Since we’re going over an object rather than array, we don’t have index but a unique key, with the help of which we get the respective value. Some cons are:

  • The order of the loop (especially for a dynamic object) is not guaranteed
  • No object value can be skipped or other value accessed beside the current key (this is inherently like this and has no solution or workaround, as we have to have the key to access the value)

4. forEach

const array = [1,2,3,4,5,6,7];

array.forEach((el, i)=>{
  // access element by el
  // access index by i
});

Pros

  • Short and precise compared to basic for loop
  • Both element and index are available

Cons

  • The loop cannot be run in reverse
  • No element can be skipped, as index is read-only
  • Cannot break, continue or return (that is, to exit the function and return the value)

5. map

const array = [1,2,3,4,5,6,7];

array.map((el, i)=>{
  // access element by el
  // access index by i

  // return something
});

Pros

  • Short and precise compared to most other for loops
  • Returns a new array with elements composed of what we return from within the loop, so that we can modify the data any way we want without mutating the original array
  • Both element and index are available

Cons

  • The loop cannot be run in reverse
  • No element can be skipped, as index is read-only
  • The final array that’s returned by map is not accessible inside the loop, so only original values or index can be accessed and used during the loop execution
  • Cannot break, continue or return

Which Loop Is Best To Use?

  • For anything complex – for instance keeping and traversing a binary search tree (BST) – the basic for loop is the best choice, as it offers the greatest control
  • To read-only all the array elements, use forEach
  • To read-only all the array elements, with an option to break, return or continue in the middle, use for...of. This reduces the average execution time
  • For looping an object key/values, or updating a value, use for...in
  • To modify the properties of non-primitives values within an array, use either forEach or for...of
  • To modify primitive array values, use basic for loop
  • To create a completely new array out of an existing one, with new or modified values, the obvious choice is map. But if you don’t need to go all the way till end, you may use for, for...of or forEach and push to a separately initialized array, and terminate the loop whenever you wish

See also