分割代入‼︎劇的ビフォーアフター
「分割代入」という言葉は今初めて知ったのだが、
野暮ったいJavaScriptコードも分割代入を使うとスマートで洗練されたモダンなコードに大変身！
匠の技を見ていこう。
分割代入（Destructuring Assignment）とは
JavaScriptの分割代入（Destructuring Assignment）は、効率的で読みやすいコードを書くための重要なテクニック。具体的には、オブジェクトやArrayの中から値を取り出して、変数に代入するための構文。
オブジェクトの分割代入
さて始まりました。「分割代入‼︎劇的ビフォーアフター」。
早速本日の依頼人のコードを見てみましょう。
オブジェクトのプロパティごとにconst〜と変数を定義しているんですね。
Outputはちゃんとできていますが、もっとスッキリさせたいですよね。
今回番組では、”変数の魔術師”の異名を持つ、分割代入の匠にお願いしました！
//Before//通常の代入
const platypus = { name: 'Perry', age: 11, gender: 'male' };
const name = platypus.name;
const age = platypus.age;
const gender = platypus.gender;
console.log(name, age, gender); // Output: 'Perry' 11 'male'//After//分割代入の活用
const platypus = { name: 'Perry', age: 11, gender: 'male' };
const { name, age, gender } = platypus;
console.log(name, age, gender); // Output: 'Perry' 11 'male'なんということでしょう！
分割代入の匠の技により、１行で全てのプロパティを同じ名前の変数にすることにできました。
さらに、変数名をオブジェクトのプロパティ名とは異なる名前にしたい場合、コロンを使って新しい変数名を指定することができます。依頼人のニーズに合わせてアレンジ可能とは、さすが匠です。
const platypus = { name: 'Perry', age: 11, gender: 'male' };
// 変数名をオブジェクトのプロパティ名と異なる名前に指定
const { name: platypusName, age: platypusAge, gender: platypusGender } = platypus;
console.log(platypusName, platypusAge, platypusGender); // Output: 'Perry' 11 'male'Arrayの分割代入
依頼人はArrayについても中身をconst〜で変数定義していますが、こちらはどうなるのでしょうか。
//Before//通常の代入
const numbers = [5, 10, 15, 20];
const firstNumber = numbers[0];
const secondNumber = numbers[1];
const thirdNumber = numbers[2];
const fourthNumber = numbers[3];
console.log(firstNumber, secondNumber, thirdNumber, fourthNumber); // Output: 5 10 15 20//After//分割代入の活用
const numbers = [5, 10, 15, 20];
const [firstNumber, secondNumber, thirdNumber, fourthNumber] = numbers;
console.log(firstNumber, secondNumber, thirdNumber, fourthNumber); // Output: 5 10 15 20分割代入の匠は、こちらも１行で配列を変数にしてしまいました！
そして今回の依頼主が抱える悩みがもう一つ。それが柔軟性。
Arrayの長さがいつも同じとはかぎらないし、値が入っていないかもしれない・・・。
その話を聞いた匠は、ある場所へ向かいます。そこにあったのは「規定値」。
匠はこれを一体何に使うつもりなのでしょうか。
規定値
なんということでしょう！
4番目の値はnumbersのArrayには無いのですが変数はfourthNumberとして定義されていて、undefinedの場合に代入される規定値を= 20と指定しています。3番目についてもconsole.log(“3rd”)と規定値を指定していますが、numbersのArrayに数値が存在しているので、この場合は適用されません。
使い勝手の良い規定値に依頼人も大喜びです。
const numbers = [5, 10, 15];
const [firstNumber, secondNumber, thirdNumber = console.log("3rd"), fourthNumber = 20] = numbers;
console.log(firstNumber, secondNumber, thirdNumber, fourthNumber); // Output: 5 10 15 20さて、某番組のパロディはこのくらいにして、ここからは分割代入の応用的な使い方について見ていく。
スプレッド構文を使って”残り”をまとめる
以前勉強したスプレッド構文！これを使うと結果はArrayとして取り出されるのか。
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]
ネストされていても取り出せる
{ } とか：とかが多くてどうなんだろう。個人的にはconst age = user.details.age;の方がわかりやすい気もする。変数をいくつ作るのかとか、どのくらいネストされているか次第かな。
const user = {
id: 111,
username: 'Perry',
details: {
age: 11,
email: 'platypus@kawaii.com'
}
};
const { username, details: { age } } = user;
console.log(username, age); // Output: 'Perry' 11関数の返り値から直接分割代入
functionがオブジェクトの形でreturnする場合、分割代入を使って直接受け取れる。
オブジェクト丸ごと変数に入れるやり方しか知らなかったけどこれは使えそう！
function getUser() {
return { id: 111, username: 'Perry', email: 'platypus@kawaii.com' };
}
const { username, email } = getUser();自分のコードを”リフォーム”したくなってきたところで本日は以上！
カモノハシは通常、川の岸辺に1〜3mの横に長い穴を掘って暮らしていますが
春(8〜10月）になると、メスは15m近いより複雑な巣穴を掘って、子育てに備えます。
大きな巣穴は他のメスが使っていたものをリフォームして使っている可能性が高いそうです！
