How to Iterate through an Array in JavaScript

onlinecode

2 years ago

How to Iterate through an Array in JavaScript

In this post, we will give you information about How to Iterate through an Array in JavaScript. Here we will give you detail about How to Iterate through an Array in JavaScript And how to use it also give you a demo for it if it is necessary.

There are several ways to iterate through an array in JavaScript, and there’s a lot
of debate about which way is the right way. Generally speaking, there are 4 common
patterns:

Simple for Loop: for (let i = 0; i < arr.length; ++i)
Functional methods like forEach(): arr.forEach((v, i) => { /* ... */ })
The for-of loop: for (const v of arr)
The for-in loop: for (const i in arr)

Below are several of the most important differences between the 4 common approaches.

TLDR: Prefer to use for-of (3) where possible. Simple for loop (1) is OK as well. Do not use for/in.

Async/Await Support

The big gotcha with functional methods like forEach() is that, because you pass a
separate function to forEach(), using async/await with forEach() is hard. For example,
the below code will print the numbers 0-9 in reverse order, because forEach() executes
async functions in parallel and doesn’t give you a way to handle errors.

async function print(n) {
  // Wait 1 second before printing 0, 0.9 seconds before printing 1, etc.
  await new Promise(resolve => setTimeout(() => resolve(), 1000 - n * 100));
  // Will usually print 9, 8, 7, 6, 5, 4, 3, 2, 1, 0 but order is not strictly
  // guaranteed.
  console.log(n);
}

async function test() {
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(print);
}

test();

On the other hand, async functions work great with JavaScript’s built-in loops.

async function print(n) {
  await new Promise(resolve => setTimeout(() => resolve(), 1000 - n * 100));
  console.log(n);
}

async function test() {
  // Prints 0-9 in order.
  for (const num of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) {
    await print(num);
  }
}

test();

Non-Numeric Properties

JavaScript arrays are objects. typeof [] === 'object'. That means arrays can have
non-numeric properties. The primary reason to avoid using for/in is that for/in
iterates over non-numeric properties, whereas for, forEach(), and for/of skip non-numeric properties.

const arr = ['a', 'b', 'c'];
arr['bad'] = 'alpha';

for (let key in arr) {
  console.log(arr[key]); // Prints: a, b, c, alpha
}

// However, 'for/of' skips non-numeric keys
for (const val of arr) {
  console.log(val); // Prints: a, b, c
}

// So does 'forEach()'
arr.forEach(val => console.log(val)); // Prints: a, b, c

`const` Iterator Key for How to Iterate through an Array in JavaScript

One common mistake when using simple for loops is unintentionally incrementing i.
I’ve lost count of the number of times I’ve accidentally incremented the wrong counter
in a nested for loop.

for (let i = 0; i < arr.length; ++i) {
  // So easy to accidentally type '++i' below.
  for (let j = 0; j < arr.length; ++i) {

  }
}

forEach(), for/of, and for/in have the nice advantage of being able to prevent
messing up the loop by accidentally modifying the loop index. With forEach(), you can
modify the index argument, but that has no affect on the loop. With for/of and for/each,
you can mark the iterator key as a const.

for (const [i, el] of Object.entries(arr)) {
  ++i; // Compile time error
}

Summary for How to Iterate through an Array in JavaScript

Below is a chart comparing the looping constructs:

How to Iterate through an Array in JavaScript

Async/Await Support

Non-Numeric Properties

const Iterator Key for How to Iterate through an Array in JavaScript

Summary for How to Iterate through an Array in JavaScript

`const` Iterator Key for How to Iterate through an Array in JavaScript