JavaScriptのイテレータ関数の使い方を徹底解説!forEach・map・filterの基本

JavaScriptには、明示的なループ処理(for文など)以外にも、配列を効率的に反復処理するための便利なイテレータ関数が多数用意されています。これらの関数を使いこなせるようになると、コードがより簡潔で読みやすくなります。ここでは、特によく使われる代表的なイテレータ関数をいくつか紹介します。

forEach関数

forEach関数は、配列内の各要素に対して、引数として渡した関数を実行します。戻り値は返さないため、単純に各要素に対して何らかの処理を行いたい場合に適しています。

使用例

let people = ['Harry', 'Martha', 'John', 'Sam']
people.forEach(person => console.log(person.toUpperCase()));

実行結果

HARRY
MARTHA
JOHN
SAM

この例では、配列内の各名前が大文字に変換されてコンソールに出力されます。

map関数

map関数は、配列内の各要素に対して渡された関数を実行し、その戻り値をもとに新しい配列を作成します。元の配列は変更されないため、データの変換処理に非常に便利です。

使用例

let people = ['Harry', 'Martha', 'John', 'Sam']
let upperCaseNames = people.map(person => person.toUpperCase())
console.log(upperCaseNames);

実行結果

[ 'HARRY', 'MARTHA', 'JOHN', 'SAM' ]

このように、mapを使うと各要素を変換した結果を新しい配列として受け取ることができます。

filter関数

filter関数は、配列内の各要素に対して渡された関数を実行し、真(truthy)と評価された値を持つ要素だけを集めた新しい配列を作成します。条件に合う要素を抽出したい場合に活用できます。

使用例

let people = ['Harry', 'Martha', 'John', 'Sam']
console.log(people.filter(person => person[0] === 'H'));

実行結果

['Harry']

この例では、先頭の文字が「H」である要素だけが抽出され、新しい配列として返されます。

その他のイテレータ関数

上記で紹介した関数以外にも、JavaScriptにはreduce(配列を単一の値に集約)、every(すべての要素が条件を満たすか判定)、some(一部の要素が条件を満たすか判定)など、さまざまな便利なイテレータ関数が用意されています。

これらの関数について詳しく知りたい方は、MDN Web DocsのJavaScriptガイドを参照してみてください。