【JavaScript】連想配列から条件に一致するデータの特定のキーのみを取得する

map と filter メソッドの戻り値について勘違いしていて若干ハマったので、自戒の意味も込めてまとめ。
タイトルにある通り、連想配列から条件に一致するデータの特定のキーのみを取得する方法です。
…文字での説明だけだとわかりにくいですね。

例えば、下記のような連想配列があった時に、type が fruit のデータのみを取り出し、更に取り出したデータの id だけを抜き出して新しく配列を生成したいときに、今回の方法を使います。

const foods = [
  {id: "1", name: "りんご", type: 'fruit'},
  {id: "2", name: "ピーマン", type: 'vegetables'},
  {id: "3", name: "みかん", type: 'fruit'},
  {id: "4", name: "にんじん", type: 'vegetables'},
  {id: "5", name: "ナス", type: 'vegetables'},
];

さて、手順ですが、まず filter メソッドを使って、type が fruit のデータのみを抜き出します。

let fruits = foods.filter(fruit => fruit["type"] === 'fruit');

上記を実行すると、下記のような変数が作られます。

const fruits = [
  {id: "1", name: "りんご", type: 'fruit'},
  {id: "3", name: "みかん", type: 'fruit'},
];

あとはこの変数から、map メソッドを使って、id のみを抜き出します。

const result = fruits.map(function(value) {
  return value["id"];
});

こちらを実行して得られるデータはこちら。

const result = ["1", "3"];

欲しいデータが無事に取得できました！

処理としてはこれだけなのですが、久しぶりに使ったせいで、この一連の動作を map メソッドだけでできると勘違いしてしまい…。
配列は取得できたのですが、条件に一致しないデータがあるところに undefined が代入されてしまい、それの対処に追われる羽目になりました。
…意図しない動作が起こった場合は、一度そのメソッドを調べる、というのを心がけたいと思います。

以上、JavaScript で連想配列から条件に一致するデータの特定のキーのみを取得する方法でした。
ご参考になれば幸いです。