【JavaScript】オブジェクトの分割代入をマスターする

本記事では、JavaScriptのオブジェクトの分割代入について詳しく解説しています。

JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門　～モダンスタイルによる基礎から現場での応用まで

本書情報
出版社	技術評論社
著者	山田祥寛
発売日	2023/2/13
ページ数	624ページ
レビュー (Amazon)	(4件)

先輩くん

10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ！

後輩ちゃん

最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ！

【送料無料】改訂3版JavaScript本格入門 -モダンスタイルによる基礎から現場での応用まで / 山田祥寛【本】

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社	オライリージャパン
著者	Dustin Boswell / Trevor Foucher
発売日	2012/6/23
ページ数	260ページ
レビュー (Amazon)	(620件)

先輩くん

より良いコードを書きたい人におすすめの本だよ！

後輩ちゃん

10以上前の書籍ですが、内容は今でも役に立つものばかりです！

【中古】リーダブルコード —より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)／Dustin Boswell、Trevor Foucher、須藤功平、角征典

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

Contents

1 オブジェクトの分割代入の書き方

オブジェクトの分割代入の書き方

オブジェクトの分割代入の基本的な書き方は以下のとおりです。

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)}

「…」演算子を使うと、残りの値を全てオブジェクト形式で取得することが出来ます。