JavaScript(ES2015, ES6)でのループ処理の書き方 – for…of, forEachの使い分け

概要

JavaScript(ES2015, ES6)で配列やオブジェクト(連想配列)をループさせるとき、for…ofとforEachのどちらを使うべきかをまとめました。

ループ処理ごとの特徴など

• for…ofはIE11非対応
• for…ofはArrayやNodeListなどiterableなオブジェクトで使うことができる。ただし、{}で定義したオブジェクト(連想配列)では使うことができないない。
• iterableではないオブジェクト（{}で定義したオブジェクトなど）の場合は、Object.keys(変数)でキー配列を取得しそれをfor…ofやforEachでループさせる
• for…in はprototypeで拡張されたプロパティまで含まれてしまう
• forEachは配列でしか使うことができない(ObjectにforEachメソッドはない)
• NodeListは配列ではないのでforEachは使えない(for…ofは使える)。ただし、IE以外はNodeListにforEachが実装されているから使うことができる。

以上のことから、IE11を無視するかしないで実装方法は変わってくる。

結論

IE11を無視する場合

• 配列やiterableなオブジェクトにはfor…ofを使う。ただし、配列のループでindexが必要な場合はforEachを使うべき。
• ちなみに、AirbnbのESLintではfor…ofは禁止されている。

for (const value of array) {
  console.log(value);
}
array.forEach((value, index) => {
  console.log(`${index}:${value}`);
});

IE11を無視しない場合

• for…ofはIE11非対応のため使わない
• 配列のループはforEachを使う
• オブジェクトのループはObject.keys(変数)でキー配列を取得しforEachでループする
• NodeListはArray.fromを使う（配列に変換してループ）
  [2020/8/26更新] Array.from()はIE非対応
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from
• NodeListはArray.prototype.forEach.call()を使う
  https://developer.mozilla.org/ja/docs/Web/API/NodeList

array.forEach((value) => {
  console.log(value);
});

Object.keys(obj).forEach((key) => {
  console.log(obj[key]);
});

Array.from(document.querySelectorAll('.hoge'), (el) => {
  el.addEventListener('click', (event) => console.log(event));
});

Array.prototype.forEach.call(document.querySelectorAll('.hoge'), (el) => {
  el.addEventListener('click', (event) => console.log(event));
});