
There are multiple ways to loop in JavaScript, some common ones being:

- `for` loop:
  ```js
  for (let i=0; i < something.length; i++) { ... }
  ```
- `forEach` on an array:
  ```js
  array.forEach((arrayItem) => { ... })
  ```
- `for...of` on iterable (ES6):
  ```js
  for (const arrayItem of array) { ... }
  ```

## Advantages of `for...of` over `forEach`

- Works on any iterable object
- Allows for flow control within (can `await` or `return` early)

## `for...of` vs `for...in`

**The key takeaway is to use `for...of` and avoid `for...in`** _(unless including inherited properties is desired)_

The introduction of `for...of` allows for iterating over the values of an iterable object. Previous to its introduction, it was common to see something like the following:

```js
var obj = { a: 1, b: 2 };
for (var key in obj) {
  // Skip inherited properties
  if (!obj.hasOwnProperty(key)) {
    continue;
  }
  console.log(obj[key]);
}
```

This required extra logic to avoid including inherited properties on the object.

> Both for...in and for...of statements iterate over something. The main difference between them is in what they iterate over.
>
> The for...in statement iterates over the enumerable properties of an object.
>
> The for...of statement iterates over values that the iterable object defines to be iterated over.

_[MDN: for...of: Differences between `for...of` and `for...in`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of#difference_between_for...of_and_for...in)_

## References

- [MDN: Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
- [MDN: `for...of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
- [Mozilla Hacks: ES6 In Depth: Iterators and the for-of loop
  ](https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/)
- [MDN: Iteration protocols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)


Posts tagged "iteration"

Iterating in JavaScript