javaScriptの配列を繰り返して処理する方法として、forEachメソッドがあります。
今回はforEachメソッドの使い方をはじめ、メリットや使うにあたってのポイントや注意点などを紹介しています。
この記事では、はじめてJavaScriptのforEachメソッドを学ぶ人や、復習したい方に向けてサンプルコードを記載して分かりやすく解説をしています。
JavaScriptのforEachメソッドとは？
JavaScriptのforEachメソッドは、配列の要素を順番に取り出して処理を行える構文です。配列に含まれる要素の数だけ繰り返され、最後の要素まで繰り返されたら処理が終了します。
このメソッドを利用する、基本的な書き方は次の通りです。
配列.forEach( function (value) {
//配列の要素に対して処理を行う
});
forEachによって配列の要素がvalueに格納され、そのvalueを利用してcallback関数内で処理が実行されます。
callback関数は、いくつかの引数を受け取ることが可能です。例えば引数が３つの場合は次のように使用します。
配列.forEach(function (value, index, thisArray){
//配列の要素に対して処理を行う
});
valueに取り出した要素、indexに取り出した要素のインデックス番号、thisArrayが配列となります。
forEachメソッドのメリット
forEachメソッドと似たような構文としてfor文があります。このfor文も配列の各要素を取り出して処理が行えます。
- for文より簡潔な記述で要素を取り出せる
- ラムダ式で記述ができる
実際にコードを確認することで理解が深まると思いますので、実際に見てみましょう。
for文より簡潔な記述で要素を取り出せる
for文のコードとforEachメソッドのコードをそれぞれ比較します。
const array = [1, 2, 3, 4, 5];
for(var i = 0; i < array.length; i++){
console.log(array[i]);
}const array = [1, 2, 3, 4, 5];
array.forEach((value) => console.log(value));// 1
// 2
// 3
// 4
// 5どちらも出力結果は同じ値が返ります。簡単な処理だと大きな差はありませんが、より少ない記述でコードを簡素化することができます。
for文は配列以外にも幅広く使用できる一方、forEachメソッドは配列の要素のみに実行することが可能です。forEachメソッドのコードを見た瞬間に配列の処理であることが判断できます。
ラムダ式で記述ができる
forEachメソッドはラムダ式でより簡潔に記述することができます。ラムダ式は関数を正数などの変数と全く同じように扱う手法のことで、アロー演算子を用いて記述します。
const array = ['足立区', '新宿区', '渋谷区', '墨田区', '品川区'];
array.forEach(function(value){
console.log(value)
});
const array = [1, 2, 3, 4, 5];
array.forEach((value) => console.log(value));// 足立区
// 新宿区
// 渋谷区
// 墨田区
// 品川区どちらも出力結果は同じ値が返ります。
ラムダ式なしの場合は3桁あったコードをラムダ式でアロー演算子を用いることで1行に収まりました。ラムダ式で記述することによってコードが冗長になることを防ぎ、より本質的な部分を記述することができます。
forEachメソッドのデメリット
繰り返し処理を中断することができない
for文は繰り返し処理を中断するbreakやcontinueはfor文では利用できる一方で、forEachメソッドは使用ができません。
const array = ['足立区', '新宿区', '渋谷区', '墨田区', '品川区'];
array.forEach(function(value){
if(value == '新宿区') continue;
console.log(value)
});if(value == '新宿区') continue;
^^^^^^^^
SyntaxError: Illegal continue statement: no surrounding iteration statementこのようにエラーが発生します。
forEachメソッドでは全ての要素を取り出して処理をするので、breakやcotinueは利用できません。
繰り返し処理を途中で中断しなければならない場合は、for文やfor-ofなどを利用しましょう。
便利な故に煩雑になってしまう
forEachメソッドは配列の要素に対して、さまざまな処理を実行することができるので、条件式を乱立させてしまいがちです。
配列の中から特定の要素を検索して一致する要素のみを取り出す場合は、forEachメソッドではなくfilterメソッドやfindメソッドなどを利用することで、処理の意味を明確にすることが可能です。
Arrayクラスには用途に合わせたメソッドが用意されていますので、これらのメソッドを活用してみましょう。
forEachメソッドの使い方
値とインデックス番号を取得する
配列の値とインデックス番号を同時に取得したい時には、第１引数と第２引数を設定します。
ちなみに、配列の第１引数は配列の単数形の名前がよく使われます。
const fruits = ['apple', 'banana', 'orange', 'kiwi', 'pineapple'];
fruits.forEach((fruit, index) => console.log(index + '番目は' + fruit) );// 0番目はapple
// 1番目はbanana
// 2番目はorange
// 3番目はkiwi
// 4番目はpineapple連想配列のキーで値を取得する
forEachは連想配列を扱うことが可能です。キーを指定して値を取得する方法として、Object.keys()を利用します。
const books = {'池井':'下町ロケット','太宰':'人間失格','村田':'コンビニ人間'};
Object.keys(books).forEach((key) => {
console.log(books[key] + 'の著者は' + key)
});// 下町ロケットの著者は池井
// 人間失格の著者は太宰
// コンビニ人間の著者は村田オブジェクト配列の値を取得する
forEachはオブジェクトの配列を扱うことが可能です。
const students = [
{name:'田中', sport:'サッカー'},
{name:'佐藤', sport:'野球'},
{name:'山口', sport:'テニス'},
];
students.forEach((student) => {
console.log(student.name + 'の特技は' + student.sport)
});// 田中の特技はサッカー
// 佐藤の特技は野球
// 山口の特技はテニスまとめ
今回はJavaScriptのforEachメソッドについて解説をしました。
forEachメソッドはメリットがある一方、デメリットもあります。似たような構文としてfor文がありますので、それぞれの特徴を把握して使い分けをしましょう。
以上、最後まで読んでいただきありがとうございました。
関連記事
