分割代入道場やってみた

お疲れさまです。
js初心者の方向け（私向け<(_ _)>）に、分割代入の問題を一緒に解いていけたらなと思い、記録いたします💪
もうそんなん分かってる！って方も良ければ挑戦してみてください！

分割代入とは

こちらは過去にrisaさんがブログ書いてくれてます。

Chapter13章まで行きついておいて、まだ「これ、分割代入できるのか？できないのか？」・・
レビューでご指摘を受けて、できるやんバカ😭ってなってるのは私です。
本当にお恥ずかしい。ごめんなさい。
たぶんこれからも、やらかすかもしれない。。。
ちょっとでもそれを減らしたい思いでいっぱいです。
分割代入で書けるのかっこいいと思うので。
恥を承知で問題解きます！！！
分割代入 をマスターするために、初級 →中級 → 上級 →実践　あと、おまけの実務案件！の順でいってみます♪
分割代入道場へようこそ笑🔥

初級編：分割代入の基本

問題1

const person = {
  name: "茜",
  favorite: "麹",
  superPower: "時間を操る",
 }

//以下はname,favorite,superPowerを分割代入せず変数に代入したものです。
//分割代入に書き換えてください。
const name = person.name;
const favorite= person.favorite;
const superPower = person.superPower;

　　　ヒント： const { key名 } = オブジェクト;

中級編：別名（エイリアス）をつける

問題2

const hero = {
  firstName: "ぶべ",
  specialSkill: "瞬間移動",
};
//firstName を name という変数に代入してください。

//分割代入しなかった場合
　const name = hero.firstName;

　　　ヒント： const { 元のキー名: 新しい変数名 } = オブジェクト;

上級編：ネストされたオブジェクト

問題3

const son = {
  profile: {
    name: "Musuko",
    address: {
      city: "大阪",
      zip: "100-0001",
    },
    hobby: "いらん事する",
  },
};

// city を変数に代入してください。


//分割代入しなかった場合
　const city = son.profile.address.city;

　　　ヒント： const { 親のキー: { 子のキー: { 取得したいキー } } } = オブジェクト;

実践編：関数の引数で分割代入

問題4

const user = {
  name: "tomoe",
  favoriteFood: "たこ焼き",
  hobby: "時間ないくせにいらん事する",
 dream: "瞬間移動"
};

const introduceUser=(user)=> {
  console.log(`
私は ${user.name} です。
好きな食べ物は ${user.favoriteFood} です。
趣味は ${user.hobby} です。
実は、私は ${user.dream} という夢に向かって精進しています。`);
}

 //  introduceUser 関数の引数を分割代入に書き換えてください！

ヒント： const 関数名=({ key名, key名 })=> {}

回答～

問題１

const {name,favorite,superPower}=person; 

短くてすっきり！

問題２

const {firstName:name}=hero; 

なぜ名前を変える必要があるのか？：変数名を統一したいときや、別の意味を持たせたいときに使うようです。
使いこなしたい。ずっと、型と混同してます（恥）

問題３

const { profile: { address: { city } } } = son;

オブジェクトのネストされたプロパティを一つずつ展開していく感じ。
ネストが深い場合でも、オブジェクトの中の値を直接取り出せる！

問題４

const introduceUser=({name,favoriteFood,hobby,dream})=> { 
console.log(`
私は ${name} です。
好きな食べ物は ${favoriteFood} です。
趣味は ${hobby} です。
実は、私は ${dream} という夢に向かって精進しています。`); }

introduceUser(user);

user.name や user.favoriteFoodのように都度アクセスしなくてよい！

全部解けましたでしょうか。最後に私がご指摘受けた実務案件です。

実務案件編

分割代入なし

const newUser = await prisma.user.create({ 
data: { 
supabaseUserId: data.user.id, 
name: data.user.user_metadata.full_name,
email: data.user.user_metadata.email, 
stripeCustomerId: stripeCustomer.id, 
iconUrl: data.user.user_metadata.avatar_url, 
 }, 
});

私の場合、avatarUrlだけ分割代入するという中途半端なことをしてた（多分）ので、ご指摘を受けました。。。恥ずかしい。
どちらかに統一する！

分割代入あり

data.user.user_metadata.が連発されているので、はじめに分割代入する。

const { 
  full_name: name, 
  email, 
  avatar_url: iconUrl,
} = data.user.user_metadata; 

const newUser = await prisma.user.create({ 
  data: { 
    supabaseUserId: data.user.id, 
    name, 
    email, 
    stripeCustomerId: stripeCustomer.id, 
    iconUrl,
  }, 
});

ちょっとはわかったと思う！😭恥を晒して精進します🔥
そして、回答間違ってたらご指摘ください<m(__)m>

実務案件課題を終えて、達成感ももちろんありますが、本当にこのままでいいのか自分？という思いでいっぱいです。もっともっと理解したい！
そして、どうせ勉強するなら楽しくしないと！と思って調子に乗りました。

茜さん、ぶべさんのご登場（勝手にごめんなさい。）ありがとうございました🙇‍♀️