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で書いてるので、できればブラウザベースだと助かるくらい。