map()メソッドを使って多次元配列から特定の値を抽出し新規配列を作成する

JavasriptくんをChatGPTくんと組んでなぐりあう修行記録

const myFavList = [
  { id: 23, name: "moketaro", favs :[ { fruits: "Apple" }, { hoby: "reading" } ] },
  { id: 11, name: "mokeko", favs :[ { fruits: "lemon" } ] },
  { id: 65, name: "mokemasa", favs :[ { fruits: "orange" }, { hoby: "birdwatching" } ] },
  { id: 190, name: "mokena", favs :[ { fruits: "kiwi" }, { hoby: "travel" } ] },
]

let resFiltered = myFavList.map(({name, favs}) => ({
  name: name,
  fruits: favs.find(fav => fav.fruits)?.fruits
}));

console.log(resFiltered);

[{
  fruits: "Apple",
  name: "moketaro"
}, {
  fruits: "lemon",
  name: "mokeko"
}, {
  fruits: "orange",
  name: "mokemasa"
}, {
  fruits: "kiwi",
  name: "mokena"
}]

使われている構文

• map()メソッド
• 分割代入（destructuring）
• アロー関数
• オプショナルチェイニング演算子（?.）

らしい（ChatGPTくんのお世話になりっぱなし）（あとで調べる）
多次元配列においてfav.fruitsだけ抽出したかった。値が存在しない時undefinedを返す処理、たいせつ。
map()メソッド使ってるから元の配列は破壊されていない……はず。

もうちょっと学習が進めばこのコードを読んだだけで何をしているのかわかるのだとおもうけど、私はまだえっちらおっちら… ('ω')

あと「配列っていってるけどJSだと正確にはオブジェクトリテラル」とかの読み替えがまだちょっとわからないです。題名間違えてたら教えてください。

プライグラウンドサービスとしてJSFiddleを使っているんですが、JSだけRunしてconsole見たい。おすすめのものないですかね。
iPadで書いてるので、できればブラウザベースだと助かるくらい。