reduceを使用して2つのデータを出力したい

Question

下記のように、data配列をnameの配列、skuの配列に出力したいのですが、上手く行きません。

  const data = [
    {
      name:'商品1',
      sku: 'hoge1'
    },
    {
      name:'商品2',
      sku: 'hoge2'
    },
  ]
  const [productNames, SKUs] = data.reduce((table:string[][],item)=>{
    const prdnames = table[0];
    prdnames.push(item.name);
    const prdskus = table[1]? table[1]:[];
    prdskus.push(item.sku);
    table.push(prdnames,prdskus)
    return table;
  },[[]]);
  productNames // 理想=>['商品1','商品2']
  SKUs // 理想=>['hoge1','hoge2']
}

productNamesとSKUsのデータが同じになってしまいます。
アドバイスお願い致します。

Answer 1

こんにちは

ご質問にあるコードをなるべく生かす修正で済ませるのであれば、以下でいけるかと思います。

const [productNames, SKUs] = data.reduce((table:string[][],item)=>{
    const prdnames = table[0];
    prdnames.push(item.name);
    const prdskus = table[1]? table[1]:[];
    prdskus.push(item.sku);
-   table.push(prdnames,prdskus)
-   return table;
+   return table[1] ? table : [table[0], prdskus];
  },[[]]);

• 動作確認用Codepen: /jun68ykt/pen/YzqoMoZ

追記1

reduceの第二引数に渡す初期値にSKUsのための空配列を追加し、分割代入とスプレッド構文を使うと、以下のようにも書けます。

type Item = {
  name: string
  sku: string
}

 const [productNames, SKUs] = data.reduce(
    ([names, skus]: string[][], {name, sku}: Item) => 
      [[...names, name], [...skus, sku]]
  , [[], []])

• 動作確認用Codepen: /jun68ykt/pen/WNwqBOm

追記2

reduceを使うというご質問の本題からは外れますが、lodashのunzipを使うと、以下のように手短かに書けます。

const [productNames, SKUs] = _.unzip(data.map(({name, sku}: Item) => [name, sku]))

• 動作確認用Codepen: /jun68ykt/pen/NWNZVeQ

参考になれば幸いです。

Comments

[yuki_90453]

いつも丁寧にご回答頂きありがとうございます。
勉強になりました。lodash知りませんでした。使用してみたいと思います。

ありがとうございました。

[jun68ykt]

どういたしまして。

配列やオブジェクトを操作するコードを書こうとするときに、

「こういうことやってくれるメソッドが欲しいが、欲しいのは自分だけではないはず。
　標準であってもよさそうなのに・・・」

という場面があると思いますが、そのときにlodash のドキュメントを探すと、けっこうあったりします。
メソッドを探す際に、やりたいことを表すメソッド名を推測して探すのがコツです。
そうやって見つけて使っているうちに、3個ぐらい自分のものにすると、あとは覚えなくても、
「これってlodashにありそう。名前はきっとこんな感じ」という予想の確度が上がってきます。

[yuki_90453]

ご回答頂きありがとうございます。
lodashはライブラリで何となく使われているなぁという印象だったんですが、便利なライブラリとは知りませんでした。使える関数が多いみたいなので、数をこなして覚えてみたいと思います。