初心者必見！配列処理の高階関数

• forEachでの反復
• mapでの変換
• filterでの抽出
• コールバック関数の使い方
• まとめ

forEachでの反復

JavaScript初心者にとって、配列を反復処理する基本的な方法の一つが forEach です。forEach は高階関数であり、配列の各要素に対して指定した関数を実行します。以下の例では、数値配列を反復し、各要素をコンソールに出力しています。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => {
  console.log(num);
});

このように、forEach は「反復」という概念を簡潔に表現でき、初心者でも直感的に扱える点が魅力です。

mapでの変換

配列の各要素を別の形に変換したい場合、map が便利です。map も高階関数で、元の配列を変更せずに新しい配列を返します。以下は、数値を二乗した配列を作成する例です。

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map((n) => n * n);
console.log(squares); // [1, 4, 9, 16, 25]

このように、map を使うことで「変換」という操作を簡潔に実装できます。

filterでの抽出

配列から条件に合致する要素だけを抽出したいときは、filter を使用します。filter は高階関数で、テスト関数が真を返す要素だけを残した新しい配列を生成します。以下は、偶数だけを抽出する例です。

const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

「抽出」という操作をシンプルに表現できる点が、filter の大きなメリットです。

コールバック関数の使い方

forEach、map、filter などの高階関数は、内部で「コールバック関数」を呼び出します。コールバック関数は、外部から渡された関数で、配列の各要素に対して実行されます。以下は、コールバック関数を自分で定義して使う例です。

function logElement(element, index, array) {
  console.log(`要素 ${index}: ${element}`);
}
const arr = ['a', 'b', 'c'];
arr.forEach(logElement);

コールバック関数を分離して定義することで、コードの再利用性が高まり、テストもしやすくなります。

まとめ

JavaScript初心者が配列処理を学ぶ際に重要なのは、高階関数とコールバック関数の概念です。forEach は「反復」、map は「変換」、filter は「抽出」をそれぞれ簡潔に実装でき、コードの可読性と保守性を向上させます。これらの関数を組み合わせることで、複雑なデータ操作もシンプルに書くことが可能です。ぜひ、日常の開発で積極的に活用してみてください。

この記事はAIによって作成されました。