JavaScriptのforEachとは？配列ループの基本

JavaScriptでは、配列のデータを1つずつ処理する場面が頻繁にあります。
その際によく使用されるのが forEach() というメソッドです。

forEach()は、配列の各要素に対して順番に処理を実行するための機能であり、JavaScriptの基本的な配列操作のひとつです。

この記事では、

• forEach()の基本的な仕組み
• 基本構文と使い方
• for文との違い
• よく使われる書き方

などを基礎から丁寧に解説します。
JavaScriptの配列ループ処理を理解するための入門として活用できます。

forEachとは

forEach() は、JavaScriptの 配列（Array）に用意されているメソッド で、配列の要素を順番に処理するために使用されます。

配列の要素を1つずつ取り出し、指定した処理（関数）を実行する仕組みです。

基本的なイメージ

例えば、以下のような配列があるとします。

const fruits = ["apple", "banana", "orange"];

この配列の中身を1つずつ処理したい場合、forEach()を使うことで簡潔に記述できます。

fruits.forEach(function(fruit) {
  console.log(fruit);
});

実行結果

apple
banana
orange

このように、配列のすべての要素に対して同じ処理を順番に行うことができます。

なお、JavaScriptの配列の基本については、以下の記事で詳しく解説しています。

関連記事
JavaScriptの配列とは？基本から解説

forEachの基本構文

forEach()の基本構文は以下の通りです。

配列.forEach(function(要素, インデックス, 配列) {
  実行する処理
});

引数には次の3つが用意されています。

すべて使用する必要はなく、必要なものだけを指定します。

基本的な使用例

要素だけを取り出す

もっとも基本的な使い方です。

const numbers = [1, 2, 3];

numbers.forEach(function(num) {
  console.log(num);
});

実行結果

1
2
3

配列の要素を1つずつ取り出して処理しています。

インデックスも取得する

forEach()では、配列の位置（インデックス）も取得できます。

const fruits = ["apple", "banana", "orange"];

fruits.forEach(function(fruit, index) {
  console.log(index + ":" + fruit);
});

実行結果

0:apple
1:banana
2:orange

配列の位置と値を同時に扱うことができます。

アロー関数で書くforEach

JavaScriptでは アロー関数 を使うことで、forEach()をより簡潔に書くことができます。

const numbers = [1, 2, 3];

numbers.forEach(num => {
  console.log(num);
});

さらに短く書くことも可能です。

numbers.forEach(num => console.log(num));

アロー関数はJavaScriptでよく使われる書き方のため、覚えておくとコードが読みやすくなります。

for文との違い

配列のループ処理には for文 を使う方法もあります。

例：

const numbers = [1, 2, 3];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

forEach()とfor文の主な違いは次の通りです。

forEachの特徴

• 配列処理を簡潔に書ける
• 可読性が高い
• 配列専用メソッド

for文の特徴

• 途中でループを終了できる
• 柔軟な処理が可能

for文の詳しい解説は以下の記事で紹介しています。

関連記事
JavaScriptの繰り返し処理（for文）とは？基本から解説

forEachでよくある注意点

breakが使えない

forEach()では breakやcontinueが使えません。

array.forEach(item => {
  if (item === 3) {
    break; // エラー
  }
});

途中でループを終了したい場合は、for文やfor...ofを使う必要があります。

関連記事
JavaScriptのfor…of / for…inの違いとは？用途と使い分けを基礎から解説

returnしてもループは止まらない

forEach()内でreturnを書いても、ループ全体は終了しません。

numbers.forEach(num => {
  if (num === 2) {
    return;
  }

  console.log(num);
});

実行結果

1
3

この場合、処理をスキップするだけで、ループ自体は継続します。

forEachが活躍する場面

forEach()は次のような場面でよく使われます。

配列データの表示

users.forEach(user => {
  console.log(user.name);
});

DOM操作

items.forEach(item => {
  item.classList.add("active");
});

配列データの処理

prices.forEach(price => {
  total += price;
});

このように 配列の全要素に同じ処理を行う場合 に非常に便利です。

forEachと他の配列メソッド

JavaScriptには、forEach()以外にも多くの配列メソッドがあります。

例

• map()
• filter()
• reduce()

forEach()は「処理を実行する」ことが目的ですが、
map()などは 新しい配列を作るためのメソッド です。

配列メソッドの理解を深めるには、まず配列の基本構造を理解することが重要です。

関連記事
JavaScriptの配列とは？基本から解説

まとめ

JavaScriptのforEach()は、配列の要素を順番に処理するための便利なメソッドです。

特徴をまとめると次の通りです。

• 配列のすべての要素に対して処理を実行する
• for文よりも簡潔に書ける
• 配列専用のメソッド
• breakで途中終了はできない

配列処理はJavaScriptの基本的な操作のひとつです。
forEach()を理解しておくことで、配列データの扱いがよりスムーズになります。

関連記事

• JavaScriptの配列とは？基本から解説
• JavaScriptの繰り返し処理（for文）とは？基本から解説
• JavaScriptのfor…of / for…inの違いとは？用途と使い分けを基礎から解説
• JavaScriptのデータ型とは？基本から解説