分割代入について

はじめに

分割代入については他にも記事があるのですが、結構わからない期間が長くてあかねさんに具体的に教えていただいたので、それを自分のものにすべく、アウトプットしてみます！🔥

これを正しく書ければきっと私も一歩？0.1歩？くらいはぶべさんやあかねさん達に近付けると信じてますｗｗ（熱烈なファンなの？ｗ）

分割代入について

さて、本題です。

分割代入とは、「配列/オブジェクト」から特定の要素を抜き出して、個別の変数に割り当てるJavaScript構文のことです。（Reactの時に「初めまして」ではないのよ）

さぁ、何のこと？となった方（私だけかな？ｗ）、具体的に説明していきます！笑
まずは基本的な所を記載します！

配列の場合

//定義
 const ice = ['パピコ', 'ハーゲンダッツ', 'ピノ']; 

// 分割代入を使って配列の要素（パピコとか）を変数に代入した場合 
 const [ice1, ice2, ice3] = ice; 

//分割代入使わないでそのまま配列で代入した場合
 const ice1 = ice[0]; //`ice[0]`は配列の最初の要素（パピコ）になる
 const ice2 = ice[1]; //`ice[1]`は配列の2個目の要素（ハーゲンダッツ）になる
 const ice3 = ice[2]; //`ice[2]`は配列の3個目の要素（ピノ）になる

//出力値はどちらも同じ
 console.log(ice1); // パピコ
 console.log(ice2); // ハーゲンダッツ 
 console.log(ice3); // ピノ

オブジェクトの場合

//定義
 const person = {
   name: '花子',
　 age: 20,
 　county:'日本'
　};

// 分割代入を使ってオブジェクトのプロパティ(name,ageなど)を変数に代入した場合
 const { name, age, county } = person;

//分割代入使わないでプロパティを直接変数に代入した場合
 const name = person.name;
 const age = person.age;
 const county = person.county;

//出力値はどちらも同じ
 console.log(name);   // 花子
 console.log(age);    // 20
 console.log(county); // 日本

上記のように分割代入を使うと、行数が全然少なくて良いし、
何よりも後から見返したり他の人が見た際に「混乱を招きにくい」ってのも利点かな～と個人的に思います。

複雑編

ここからは複雑編（応用編とは言い切れなかったｗ）について記載します！
オブジェクトの中にもオブジェクトがある場合、どう書いたらいいのか？というお悩みを解決します！（あるかはわからないですが笑）

詳細は以下です！

//定義
 const Profile = {
   name: "hanako123",
   email: "hanako@example.com",
   details: {
     age: 20,
     country: "日本"
   }
 };

//分割代入を使ってオブジェクトのプロパティ(name,email等)を変数に代入した場合
 const { name, email, details: { age, country } } = Profile;

//分割代入使わないでプロパティを直接変数に代入した場合
 const name = Profile.name;
 const email = Profile.email;
 const age = Profile.details.age;
 const country = Profile.details.country;

//出力値はどちらも同じ
 console.log(name);    // hanako123
 console.log(email);   // hanako@example.com
 console.log(age);     // 20
 console.log(country); // 日本

分割代入の方がめっちゃスタイリッシュ！1行で終われるのすごくないですか？？（感動）

多分この文章読んでからだと、下記の記事に出てくる分割代入の内容がスッと入ってくると思います。

おわりに

最後まで読んでいただき、ありがとうござます！
自分で書いててちょっとは分割代入について詳しくなれたので、もし良かったら皆さんにも参考になれば嬉しいです💛

途中文章に自信がなさすぎて自分でツッコミを入れすぎて読みづらくなってないかが懸念です。
あと内容が初歩的すぎて皆さんに益のあるものが出せているかも不安ですが、自分のアウトプットとしては結構満足しましたｗ

お疲れさまでした！！それでは、また！笑