JavaScriptでforEachの使い方

2021年4月20日

forEachは、配列の要素を繰り返し取得する関数

forEachは、配列の値を繰り返し取得できる関数です。

PHPやC#で既に書き慣れた方もいるかもしれませんね。

一度の記述で、値とキーを同時に取得することが出来るため、便利な繰り返し処理となっています。

基本的な書き方

var array = ['fuga', 'hoge', 'piyo'];

array.forEach(function(value){
    console.log(value);
});

アロー関数の書き方

var array = ['fuga', 'hoge', 'piyo'];

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

キー(index)も取得する場合

キーも取得する場合は第二引数を設定します。

var array = ['fuga', 'hoge', 'piyo'];

array.forEach((value, index) => {
    console.log(index + ':' + value);
});

forEachを使う上での注意点

JavaScriptのforEach文を使う上での注意点をまとめました。

オブジェクト(連想配列)には使用できない

JavaScriptのオブジェクトは連想配列とも言われていますが、厳密には配列ではないのでforEachによるループは使用できません。

var obj = {no : 1, name : 'Sato', age : 18};

//エラー文 → Uncaught TypeError: obj.forEach is not a function
obj.forEach(function(value, index){
    console.log(index + ':' + value);
});

対応法として、オブジェクトや配列のキーのみを配列で取得できるObject.keysを使用してループさせることが出来ます。

var obj = {no : 1, name : 'Sato', age : 18};

Object.keys(obj).forEach(function(index){
    console.log(index + ':' + obj[index]);
});

それか、そもそもオブジェクトのプロパティをループ対象にできるfor inなどの構文を書くのが良いでしょう。

var obj = {no : 1, name : 'Sato', age : 18};

for(index in obj){
    console.log(index + ':' + obj[index]);
}

continue,breakが使用できない

forEachはコールバック関数なので、for文でおなじみの、処理をスキップするcontinue、処理を中断するbreakが使用できません。

ただし、continueに関しては、returnを行うことで実質的に同じ処理を行うことが出来ます。

var array = ['fuga', 'hoge', 'piyo'];

array.forEach(function(value, index){
    if(value === 'hoge') return;
    console.log(index + ':' + value);
});

---

forEachはキーと値を同時に繰り返し取得できる便利な関数ですが、for inなどの繰り返し処理と適材適所で使い分けていきましょう。

以上、JavaScriptでforEachの使い方、でした。