【JavaScript】forEach, map, filter, reduce, findを正しく理解する

はじめに

こんにちは。現在バンクーバーで未経験からエンジニア就職を目指している@JamesCroissantです。今はReact×TypeScriptを利用したフロント周りの開発中心の勉強をメインで行っています。

きっかけ

JavaScriptを復習していて、自分自身しっかり理解していないと感じたので、コーディング面接対策として自分が調べたことをまとめます。

この記事の対象者

・JavaScript, React初心者
・forEach, map, filter, reduce, find関数の違いがざっと抑えたい人
・JavaScriptのコーディング面接対策をしたい人

この記事の目標

・forEach, map, filter, reduce, find関数の違いを理解する
・Reactのアプリ開発で使えるようにする

forEach

forEachは配列の各要素に対して関数を実行するが、新しい配列を返さない。

const numbers = [1, 2, 3];

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

// 1、2、3の順に出力される

Reactでの使い方

ログ出力や外部APIへのデータ送信などに使うことができる。forEachは新しい配列を返さないため、通常はJSX内で直接使用されることはあまりない。代わりにmap関数を使用する。

map

mapは配列の各要素に関数を適用し、その結果から新しい配列を作成する。

const numbers = [1, 2, 3];

const doubled = numbers.map(function(number) {
    return number * 2;
});

// 各要素に2が掛けられ、doubledに格納される
// doubledは[2, 4, 6]

Reactでの使い方

コンポーネントのリストをレンダリングする時によく使用する。
例えば、Todoリスト<li>タグの形に変換（新しい配列を作成）して、JSX内で表示してしたい時など。

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

filter

filterは条件に一致する要素だけからなる新しい配列を作成する。

const numbers = [1, 2, 3];

const odds = numbers.filter(function(number) {
    return number % 2 !== 0;
});

// 各要素が奇数になるかチェック、Trueの場合にoddsに格納される
// oddsは[1, 3]

Reactでの使い方

特定の条件に合致する配列要素を選択するためによくmap関数と組み合わせて使われる。
例えば、Todoリストでタスクが完了している場合リストを表示するなど。

function CompletedTodos({ todos }) {
  return (
    <ul>
      {todos.filter(todo => todo.completed).map(filteredTodo => (
        <li key={filteredTodo.id}>{filteredTodo.text}</li>
      ))}
    </ul>
  );
}

reduce

reduceは配列の各要素に対して関数を適用し、単一の値（累積結果）を生成する。

const numbers = [1, 2, 3];

const total = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);

// 0は初期値を表す
// accumulatorはreduceがこれまで計算してきた累積の値
// currentValueは配列の現在処理している要素

// 合計6

Reactでの使い方

状態やpropsから複雑な計算を行い、その結果をコンポーネント内で表示したい時に使用される。
例えば、オンラインショッピングのカート内の各商品の合計金額を計算して表示させる時など。

const Cart = ({ items }) => {
  // reduceを使用して、カート内の全商品の合計価格を計算
  const total = items.reduce((sum, item) => sum + item.price, 0);

  return (
    <div>
      <h2>カート内の合計: ¥{total}</h2>
      {/* 他のカートの要素 */}
    </div>
  );
};

find

findは 条件に一致する最初の要素を返す。一致する要素がなければ、undefinedを返す。

const numbers = [1, 2, 3];

const found = numbers.find(function(number) {
    return number > 1;
}, 0);

// foundは2

Reactでの使い方

リストから特定のアイテムを選択して詳細を表示する場合などに使用される。
ユーザーのリストがあり、その中から特定のIDを持つユーザーを見つけて詳細を表示したい時など。

最後に

いかがだったでしょうか。

今回はforEach, map, filter, reduce, findの違いについてReactでの使用例と合わせて解説をしました。

実際にReactでアプリ開発をする時は、map, filter関数をメインで扱うことが多いので、最低限この2つはマスターしていきたいですね。