JavaScript

【JavaScript】forEachメソッドで配列の要素を取得する方法

javaScriptの配列を繰り返して処理する方法として、forEachメソッドがあります。

今回はforEachメソッドの使い方をはじめ、メリットや使うにあたってのポイントや注意点などを紹介しています。

この記事では、はじめてJavaScriptのforEachメソッドを学ぶ人や、復習したい方に向けてサンプルコードを記載して分かりやすく解説をしています。

JavaScriptのforEachメソッドとは?

JavaScriptのforEachメソッドは、配列の要素を順番に取り出して処理を行える構文です。配列に含まれる要素の数だけ繰り返され、最後の要素まで繰り返されたら処理が終了します。

このメソッドを利用する、基本的な書き方は次の通りです。

配列.forEach( function (value) {
//配列の要素に対して処理を行う
});

forEachによって配列の要素がvalueに格納され、そのvalueを利用してcallback関数内で処理が実行されます。

callback関数は、いくつかの引数を受け取ることが可能です。例えば引数が3つの場合は次のように使用します。

配列.forEach(function (value, index, thisArray){
//配列の要素に対して処理を行う
});

valueに取り出した要素、indexに取り出した要素のインデックス番号、thisArrayが配列となります。

forEachメソッドのメリット

forEachメソッドと似たような構文としてfor文があります。このfor文も配列の各要素を取り出して処理が行えます。

このforEachメソッドですが、for文にはないメリットがあります。
  • for文より簡潔な記述で要素を取り出せる
  • ラムダ式で記述ができる

実際にコードを確認することで理解が深まると思いますので、実際に見てみましょう。

for文より簡潔な記述で要素を取り出せる

for文のコードとforEachメソッドのコードをそれぞれ比較します。

for文の場合
const array = [1, 2, 3, 4, 5];
 
for(var i = 0; i < array.length; i++){
    console.log(array[i]);
}
forEachメソッドの場合
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メソッドは使用ができません。

中断ができないことを確認するためにcontinueを入れて実行してみます。
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クラスには用途に合わせたメソッドが用意されていますので、これらのメソッドを活用してみましょう。

【JavaScript】配列(Array)の基本的な使い方を紹介!「JavaScriptで配列(Array)を使用するには?」JavaScript 初心者の方に配列の基本的な使い方を詳しくまとめました。使用頻度が高い JavaScriptの配列を初期化・追加・検索・展開・連想配列の使用方法について解説をしていますので、ぜひ参考にしてみてください。...

forEachメソッドの使い方

値とインデックス番号を取得する

配列の値とインデックス番号を同時に取得したい時には、第1引数と第2引数を設定します。

ちなみに、配列の第1引数は配列の単数形の名前がよく使われます。

次の例では、配列名を「fruits」として、第1引数を「fruit」とします。
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文がありますので、それぞれの特徴を把握して使い分けをしましょう。

以上、最後まで読んでいただきありがとうございました。

関連記事

【JavaScript】配列(Array)の基本的な使い方を紹介!「JavaScriptで配列(Array)を使用するには?」JavaScript 初心者の方に配列の基本的な使い方を詳しくまとめました。使用頻度が高い JavaScriptの配列を初期化・追加・検索・展開・連想配列の使用方法について解説をしていますので、ぜひ参考にしてみてください。...
【JavaScript】新しい配列を生成するmapメソッドを理解するJavaScript のArrayオブジェクトの便利メソッド map() を利用してみましょう。mapメソッドは元の配列データをCallback関数で処理し、新しい配列として生成することができます。利用頻度が高いmapメソッドを理解して扱えるようになりましょう。...
【JavaScript】配列の繰り返し処理でfor文を扱う方法JavaScriptで for文 を使えば、配列の1つずつの要素に対して 繰り返して処理を実行できます。またループの回数を指定したり、break文や continue文で処理を中断、スキップができるので、より細かい制御をすることが可能です。...
【JavaScript】便利な正規表現の使い方を理解する便利な正規表現を扱えるようになりましょう。JavaScripでは「正規表現」を使うための記述方法やメソッドの使用方法を詳しく説明しています。正規表現を使いこなせると、プログラミングの幅がぐっと広がりますので、ぜひ本記事を参考にしてみてください。...
プログラミングを学習したいなら…

プログラミングスキルを身に付けるなら、プログラミングを効率良く学べる
プログラミングスクール」がオススメです。

特にこんな方にオススメ!!
これからエンジニアを目指したい
プログラミングの専門性を高めたい
プログラミングを学んで副業をしたい
エンジニアに転職して年収をアップさせたい

プログラミングを触ったことがない未経験からでも、プログラミングスクールで学習すれば、エンジニアへ就職・転職することも可能です。

あなたの「行動力」と「やる気」で、あなたの人生を大きく変えるチャンスになることでしょう。

プログラミングスクールに興味がある方は是非チェックしてみてください。

> プログラミングを学ぶ <

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA