JavaScriptでforEachとmapを完全理解！10選の使い方＆応用例

はじめに
JavaScriptのforEachとmapの概要
- ○forEachの基本
- ○mapの基本
forEachとmapの使い方
- ○サンプルコード1：forEachで配列を処理
- ○サンプルコード2：mapで配列を変換
応用例
注意点
カスタマイズ方法
- ○サンプルコード6：forEachで特定条件の処理
- ○サンプルコード7：mapで連想配列の操作
まとめ

はじめに

この記事を読めば、JavaScriptのforEachとmapメソッドを使いこなすことができるようになります。

これらのメソッドを理解すれば、配列操作がよりスムーズになり、コードの可読性も向上します。

JavaScriptのforEachとmapの概要

○forEachの基本

JavaScriptのforEachメソッドは、配列の要素を一つずつ取り出して、指定した関数を実行します。

これにより、繰り返し（ループ）処理が簡潔に書けます。

○mapの基本

mapメソッドもforEachと同様に、配列の要素を一つずつ取り出しますが、指定した関数によって変換した結果を新しい配列にして返します。

これにより、配列の変換が容易になります。

forEachとmapの使い方

○サンプルコード1：forEachで配列を処理

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

このサンプルでは、配列numbersの各要素を2倍してコンソールに表示しています。

○サンプルコード2：mapで配列を変換

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

このサンプルでは、配列numbersの各要素を2倍して新しい配列doubledNumbersに格納しています。

応用例

○サンプルコード3：forEachでDOM操作

const listItems = document.querySelectorAll('li');
listItems.forEach((item) => {
  item.classList.add('highlight');
});

このサンプルでは、querySelectorAllで取得した全てのli要素にhighlightクラスを追加しています。

○サンプルコード4：mapでオブジェクトの配列変換

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carol' },
];

const userIds = users.map((user) => {
  return user.id;
});
console.log(userIds); // [1, 2, 3]

このサンプルでは、オブジェクトの配列usersから、idだけを抽出して新しい配列userIdsに格納しています。

○サンプルコード5：forEachとmapの組み合わせ

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = [];

numbers.forEach((number) => {
  doubledNumbers.push(number * 2);
});

const squaredNumbers = doubledNumbers.map((number) => {
  return number * number;
});
console.log(squaredNumbers); // [4, 16, 36, 64, 100]

このサンプルでは、まずforEachで配列numbersの要素を2倍した配列doubledNumbersを作成し、次にmapでそれぞれの要素を二乗した新しい配列squaredNumbersを作成しています。

注意点

forEachとmapは、新しい配列を作成する際に元の配列を変更しないことが重要です。

この点に注意して、関数の中で副作用を起こさないようにしましょう。

カスタマイズ方法

○サンプルコード6：forEachで特定条件の処理

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

このサンプルでは、配列numbersの偶数だけをコンソールに表示しています。

○サンプルコード7：mapで連想配列の操作

const users = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Carol', age: 28 },
];

const userNames = users.map((user) => {
  return { id: user.id, name: user.name };
});
console.log(userNames);
// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Bob' },
//   { id: 3, name: 'Carol' },
// ]

このサンプルでは、オブジェクトの配列usersから、idとnameだけを抽出して新しい配列userNamesに格納しています。