本記事では、JavaScriptのオブジェクトの分割代入について詳しく解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
オブジェクトの分割代入の書き方
オブジェクトの分割代入の基本的な書き方は以下のとおりです。
let person = {
name: "Bob",
gender: "male",
hobby: ["reading", "fishing", "movie"],
};
let { name, age, gender, hobby } = person;
console.log(name); // => Bob
console.log(gender); // => male
console.log(hobby); // => ["reading", "fishing", "movie"]オブジェクトの分割代入では、変数を{}で囲います。分割代入に設定する変数は、配列の場合は自由に設定できますがオブジェクトでは「プロパティ名 = 変数」のように紐づいています。(以降の見出しで、変数名を変更する方法について解説します。)
先輩くん基本的な使い方はこれでOKだよ！
以降の解説では、みんなが思うであろう疑問やチョットした小技テクニックについて解説していくね！
変数の名前を変更する
先ほどのコードでは、nameプロパティの値を取得するために代入先の変数名もnameに指定しました。しかし、変数名にnameは非推奨の書き方なので変数名を変えていきましょう。
let person = {
name: "Bob",
gender: "male",
hobby: ["reading", "fishing", "movie"],
};
let { name: firstName} = person;
console.log(firstName); // => Bob変数の名前を変更する方法は、「:」の後に変更したい変数名を指定するだけです。今回の場合だと、変数nameをfirstNameに変更したいので「name: firstName」の形になります。
代入先の変数名にオブジェクトのプロパティ名が存在しない場合
代入先の変数名にオブジェクトのプロパティ名が存在しない場合について見ていきましょう。
let person = {
name: "Bob",
gender: "male",
hobby: ["reading", "fishing", "movie"],
};
let { age } = person;
console.log(age); // => undefined上記のコードでは、代入先の変数名に「age」を指定していますが、対象のオブジェクトにはそのようなプロパティは存在しません。このような場合、エラーになることはありませんが値に「undefined」が代入されます。
もし、対象のプロパティが存在しない場合のみ初期値として別の値を設定したい場合は以下のように記述します。
let person = {
name: "Bob",
gender: "male",
hobby: ["reading", "fishing", "movie"],
};
let { age = 20 } = person;
console.log(age); // => 20まとめて取得したい場合
一部のプロパティ値のみ個別で取得して、残りはまとめて取得したい場合は以下のように記述します。
let person = {
name: "Bob",
gender: "male",
hobby: ["reading", "fishing", "movie"],
};
let { name: firstName, ...other } = person;
console.log(firstName); // => Bob
console.log(other); // => {gender: 'male', hobby: Array(3)}「…」演算子を使うと、残りの値を全てオブジェクト形式で取得することが出来ます。
