前回は for, while, do-while の3つのループ構文について説明しました。今回は以下の3つについて説明したいと思います。

• for-in
• for-of
• Array 型の forEach メソッド (Array.prototype.forEach)

for-in

オブジェクトのキーをループしたい場合に便利です。

const obj = {
    'a': 'A',
    'b': 'B',
    'c': 'C'
};
for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key + ' -> ' + obj[key]);
    }
}
// a -> A
// b -> B
// c -> C

通常の for 文と違い、オブジェクトのキーを表す変数を宣言 in オブジェクト という形を取ります。

ここで注意が必要なのは、「Object.prototype を拡張した場合、拡張したプロパティも一緒に取得してしまう」という点です。

Object.prototype.foo = 'bar';
const obj = {
    'a': 'A',
    'b': 'B',
    'c': 'C'
};
for (let key in obj) {
    console.log(key + ' -> ' + obj[key]);
}
// a -> A
// b -> B
// c -> C
// foo -> bar

これを避けるためには以下のような方法を取る必要があります。

• hasOwnProperty を使ってキーを検査する (最初の例)
• Object.keys を使ってキーの配列を取得し、Array.prototype.forEach に渡す

前者の方法は最初に示した例です。後者の方法は別の機会に紹介したいと思います。

追記：こちらの記事に書きました。

for-of

配列をループしたい場合に便利です。

const arr = ['a', 'b', 'c'];
for (let el of arr) {
    console.log(el);
}
// a
// b
// c

構文は for-in と似ていて、 配列の要素を表す変数を宣言 of 配列 という形を取ります。

配列の要素すべてをループしたい場合に使いますが、次の Array 型の forEach メソッドを使うほうが一般的です。

Array 型の forEach メソッド (Array.prototype.forEach)

for-of と同様、配列をループしたい場合に便利です。for-of よりもこちらの方が好んで使われる場合が多いように思います。

const arr = ['a', 'b', 'c'];
arr.forEach(el => console.log(el));
// a
// b
// c

引数にコールバック関数をとり、コールバック関数の引数として配列の要素が渡されます。上記例の場合、コールバック関数は3回呼ばれます。

また、コールバック関数に渡される引数は配列の要素だけではありません。

• 配列の要素
• インデックス
• 配列

const arr = ['a', 'b', 'c'];
arr.forEach((el, i, array) => console.log(el, i, array.toString()));
// a 0 a,b,c
// b 1 a,b,c
// c 2 a,b,c

まとめ

配列・オブジェクトをループする方法として for-in, for-of, Array 型の forEach メソッドについて書いてみました。

Array 型の forEach メソッドは汎用性が高く、また Array 型にはコールバック関数を渡す便利な関数がいくつかあるため、この形に慣れておくことをおすすめします。