10yroの開発日記

株式会社10yro(トイロ)のエンジニアが書いています

【JavaScript】for文(繰り返し処理)の違い

JavaScriptに関わらず、どの言語でも「同じ処理を繰り返したい」ということが必ずあります。
その代表的な繰り返し処理のfor文の違いについてまとめました。

1. for

初期のころから使われている一般的な繰り返し処理で、配列を処理する方法です。
continue(スキップ)、break(終了)が使用できます。
構文

for ([初期化式]; [条件式]; [加算式])

サンプル

const list = ['あ', 'い', 'う', 'え', 'お'];
for (let i = 0; i < list.length; i++) {
  console.log(`${i}:${list[i]}`);
}

実行結果

0:あ
1:い
2:う
3:え
4:お

developer.mozilla.org

2. for in

オブジェクトにあるすべてのプロパティを処理する方法です。
※処理順序が保証されないため、インデックスの順序が重要になる配列には使用しない
continue(スキップ)、break(終了)が使用できます。
構文

 for (変数 in オブジェクト)

サンプル(配列)
変数 prop はインデックスになる。

const list = ['あ', 'い', 'う', 'え', 'お'];
for (const prop in list) {
  console.log(`${prop}:${list[prop]}`);
}

実行結果

0:あ
1:い
2:う
3:え
4:お

サンプル(オブジェクト:連想配列)
変数 prop はプロパティ名になる。

const obj = {
  a: 'あいうえお',
  ka: 'かきくけこ',
  sa: 'さしすせそ',
  ta: 'たちつてと',
  na: 'なにぬねの'
};
for (const prop in obj) {
  console.log(`${prop}:${obj[prop]}`);
}

実行結果

a:あいうえお
ka:かきくけこ
sa:さしすせそ
ta:たちつてと
na:なにぬねの

developer.mozilla.org

3. for of

オブジェクトにあるすべてのプロパティを処理する方法です。
continue(スキップ)、break(終了)が使用できます。
構文

 for (変数 of オブジェクト)

サンプル
変数 prop はプロパティ値になる。

const list = ['あ', 'い', 'う', 'え', 'お'];
for (const [index, prop] of list.entries()) {
  console.log(`${index}:${prop}`);
}

実行結果

0:あ
1:い
2:う
3:え
4:お

developer.mozilla.org

4. forEach

指定したコールバック関数を配列の要素ごとに処理する。
continue(スキップ)、break(終了)が使用できない。returnもコールバック関数内で処理されるだけなので、繰り返し処理の終了も行われない。
構文

arr.forEach(callback(currentValue[, index[, array]]) {
  // execute something
}[, thisArg]);

サンプル

const list = ['あ', 'い', 'う', 'え', 'お'];
list.forEach((value, index) => {
  console.log(`${index}:${value}`);
})

実行結果

0:あ
1:い
2:う
3:え
4:お

developer.mozilla.org

5. 処理速度

処理速度がどのくらい違うのか計測してみました。
ブラウザにより処理速度は違いますが、それでもforが圧倒的です。

Chrome Edge
for 0.092041015625 ms 0.088867187500 ms
forEach 0.233886718750 ms 0.187988281250 ms
for of 0.410888671875 ms 0.238037109375 ms
for in 0.870849609375 ms 0.565917968750 ms

処理時間はconsole.time(xxx)とconsole.time(xxx)で簡単に計測できます。 developer.mozilla.org developer.mozilla.org