皆さんこんにちは、
今回はJavaScriptなどでよく用いられる
配列操作の「map」「find」「filter」「forEach」の4つについて解説していきます。
また、最後に、ループ処理で要素を追加したい時に便利なスプレッド構文についても簡単に紹介します。

目次

1. map関数
 2. find関数
 3. filter関数
 4. forEach関数
 5. map関数とスプレッド構文
 6. 最後に

それでは早速見ていきましょう。
それぞれのループ関数で使用するデータは以下を前提としています。

const data = ["オレンジ", "リンゴ", "キウイ", "モモ", "オレンジ"];

1. map関数

特徴
使用例

const map = data.map((item) => {
  return item;
});
console.log(map)
// 出力結果
// ▶(5) ["オレンジ", "リンゴ", "キウイ", "モモ", "オレンジ"]

2. find関数

特徴
- findは指定した条件の内、該当する最初の要素を対象の配列から返します。
- 該当の値は返り値に格納される
使用例

const find = data.find((item) => {
  return item === "オレンジ";
});
console.log(find)
// 出力結果
// オレンジ

3. filter関数

特徴
- filterはfindと若干異なり、指定した条件の内、該当するすべての要素を対象の配列から返します。
- 該当の値は返り値に格納される
使用例

const filter = data.filter((item) => {
  return item === "オレンジ";
});
console.log(filter)
// 出力結果
// ▶(2) ["オレンジ", "オレンジ"]

4. forEach関数

特徴
- forEachは指定した配列の中身を一つずつ出力します。
- ほかのループ処理の動きと異なり返り値がないので以下のサンプルコードのようにundefinedが返されます。
- break, continueなどの中断/スキップ処理も行えません。
使用例

const forEach = data.forEach((item) => {
  return item;
});
console.log(forEach)
// 出力結果
// undefined

5. map関数とスプレッド構文

スプレッド構文とは何ぞやって話なんですが、
よく配列操作や反復可能オブジェクトに対して利用する「...」(ドット3つ)のやつです。
最初見た時は訳が分からず、検索の仕方もいまいちわからないので大変でした(笑)

実はmap関数への要素追加などにスプレッド構文を使うと効率が良いです。
公式の解説ではスプレッド構文を使って数値データの合計値を求めていますね。
使用例は以下のようになります。

const data = [
  { name: "リンゴ" },
  { name: "レモン" }, 
  { name: "オレンジ" }
];

const map_addCategory = data.map((item) => {
  return {
    ...item,
    "category": "フルーツ"
  };
});

console.log(map_addCategory)
// ▼(3) [Object, Object, Object]
//   0: Object
//     name: "リンゴ"
//     category: "フルーツ" ← カテゴリが追加されている
//   1: Object
//     name: "レモン"
//     category: "フルーツ" ← カテゴリが追加されている
//   2: Object
//     name: "オレンジ"
//     category: "フルーツ" ← カテゴリが追加されている

各要素にcategoryの値は追加されているのがわかります。
このように各データに対して要素を追加したい時にはスプレッド構文を使用するのがおすすめです。

6. 最後に

いかがだったでしょうか。
私はここ一年の業務でこれらの関数を扱う機会が非常に多く、年始から比べ、かなり使い方に慣れました。
また、今回はObjectの型で行いましたが、
配列でもtemp=[...item, "追加したい値"]といった書き方で追加が可能です。

少しでも参考になれば幸いです。
もし記載事項で不備等ありましたらコメントいただけると幸いです。

それではまた次回…