for文の種類と使い分け

JavaScriptにはfor文に種類があるので種類と使い方をまとめます。

for文

const object = [1, 2, 3];

for (let i = 0; i < object.length; i++) {
  console.log(object[i]);
}
// 1
// 2
// 3

基本のfor文。みなさんも知ってるやつです。

for/of文

const object = { a: 1, b: 2, c: 3 };

for (const element of Object.keys(object)) {
  console.log(element);
}
// "a"
// "b"
// "c"

for (const element of Object.values(object)) {
  console.log(element);
}
// 1
// 2
// 3

for (const element of Object.entries(object)) {
  console.log(element);
}
// ['0', 1]
// ['1', 2]
// ['2', 3]

配列、オブジェクト、文字列、セット、マップなどいろいろ使用できます。Object.entries()を利用した書き方が使用しやすい。

for/in文

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}
// "a: 1"
// "b: 2"
// "c: 3"

for/of文はES6から追加されたけど、JavaScriptの初期の頃からありました。オブジェクトで使用できるけど、下記の参考にもある通り想定した動きをしない場合があるので、for/in文ではなくObject.keys()を使用したfor/of文で処理します。

forEachメソッド

const object = [1, 2, 3];

object.forEach((element, index, array) => {
  console.log(`${index} : ${element}`)
  console.log(`${array}`)
})

// 0 : 1
// 1,2,3
// 1 : 2
// 1,2,3
// 2 : 3
// 1,2,3

配列でbreakやcontinueを使用しない場合はこちらを使います。現在の値、インデックス、配列が取れて使いやすい。for/of文よりもシンプルに書けるかな。

参考