配列同士の結合操作について

仕事で使って、面白いと思ったので備忘録置いときます。

やりたかったこと

2つの異なる配列を、1つの配列にまとめる。
（apiにpostする配列を作る際に使用しました。）

やり方

やり方を２通り列挙します。spread演算子を最初に使っていたのですが、flatMapの存在を隣の席のエンジニアの先輩に教えてもらいました。

・flatMap

const array1 = ["a", "b", "c"],
      array2 = ["1", "2", "3"]

const mixArray = [array1, array2].flatMap((x) => x)

console.log(mixArray)
// ["a", "b", "c", "1", "2", "3"]

・spread演算子

const array1 = ["a", "b", "c"],
      array2 = ["1", "2", "3"]

const mixArray = [...array1, ...array2]

console.log(mixArray)
// ["a", "b", "c", "1", "2", "3"]

objectのプロパティを参照する場合

const userData1 = {
        name: "nagisa",
        job: "baker",
        favoriteFood: [
          "bread",
          "rice",
          "carry"
        ]
      },
      userData2 = {
        name: "tomoya",
        job: "electrical worker",
        favoriteFood: [
          "ramen",
          "hamberger",
          "rice cracker"
        ]
      }

const mixArray = [userData1, userData2].flatMap((x) => x.favoriteFood)

// spread演算子でも同じ結果
// const mixArray = [...userData1.favoriteFood, ...userData2.favoriteFood]

console.log(mixArray)

// ["bread", "rice", "carry", "ramen", "hamberger", "rice cracker"]

objectのプロパティの配列を参照したい場合でも、このように書けます。

オブジェクトがあるときとないときがある場合

上記のままだと、オブジェクトが空の場合、undefindが入ってしまったり、エラーが起きてしまったりします。

const userData1 = {},
      userData2 = {
        name: "tomoya",
        job: "electrical worker",
        favoriteFood: [
          "ramen",
          "hamberger",
          "rice cracker"
        ]
      }

const mixArray = [userData1, userData2].flatMap((x) => x.favoriteFood)

// spread演算子だと以下のエラーが出る
// Uncaught TypeError: userData1.favoriteFood is not iterable
// const mixArray = [...userData1.favoriteFood, ...userData2.favoriteFood]

console.log(mixArray)
// [undefined, "ramen", "hamberger", "rice cracker"]

予期せぬ挙動を防ぐために、オブジェクトが空だった場合は空の配列を指すように指示してあげると幸せになれます。

const userData1 = {},
      userData2 = {
        name: "tomoya",
        job: "electrical worker",
        favoriteFood: [
          "ramen",
          "hamberger",
          "rice cracker"
        ]
      }

const inputData1 = userData1.favoriteFood || [],
      inputData2 = userData2.favoriteFood || []
const mixArray = [inputData1, inputData2].flatMap((x) => x)

// const mixArray = [...inputData1, ...inputData2]

console.log(mixArray)
// ["ramen", "hamberger", "rice cracker"]

jsのarray周りのメソッドは知らないの多くて毎回驚きます。
レビューのたびに「こういうのあるよ！」と教えてくれる先輩方に感謝です。

spread演算子はJavaScript Primerで知りました。
１章１章読むのになかなかカロリーを消費します（私が本読むの苦手なだけ）。早く読み進めなくては…。

JavaScript Primer　迷わないための入門書 (アスキードワンゴ)