JavaScriptにはあるオブジェクト { key: value }から特定のプロパティの値を取り出して、別の変数に代入する「分割代入」という方法があります。
普段見かけない記述方法なので、とまどうかもしれませんが、慣れると非常に便利な記述方法です。
ここでは、オブジェクトの分割代入の方法を実例で解説しています。
オブジェクトの分割代入の使い方
例えば、以下のように定数の中にプロパティが２つ入っているオブジェクトがあるとします。
const オブジェクト名 = {
プロパティ名1: 値1,
プロパティ名2: 値2
}ここから、とても簡単に、それぞれのプロパティの値を抜き出して別の定数に代入することができます。
const { プロパティ名1, プロパティ名2 } = オブジェクト名上記のように新たな定数を定義して、波カッコ{ } で囲みます。その中に、対象のオブジェクトの中の欲しいプロパティ名を記述します。
あとは、イコールで対象のオブジェクトを結ぶだけです。
すると、指定したプロパティ名を定数名として、値を抜き出すことができます。
全てのプロパティを抜き出す必要はなく欲しいプロパティ名を記述するだけで問題ありません。
const { プロパティ名 } = オブジェクト名- { }の中に記載する変数名は、プロパティ名と合わせる必要があります。
- 対象のプロパティ名が存在しない場合は、その変数の値に「undefined」が入ります。
上記は定数(const)の例ですが、もちろん変数（letやvar)でも使えます。
実例
例えばuserという定数の中に、「age」と「name」というプロパティがある場合に、分割代入で「age」と「name」と「test」を指定した場合は以下のようになります。
定数(const)の場合
const user = {
age: 24,
name: "Steve"
};
//分割代入で抜き出す
const { age, name, id } = user;
console.log(age, name, id)
//出力
24 'Steve' undefined存在しないプロパティ名「test」の値は「undefined」になっていることがわかります。
変数(let)の場合
letの場合でもconstと同じく分割代入ができます。
let user = {
age: 24,
name: "Steve"
};
//分割代入で抜き出す
let { age, name, id } = user;
console.log(age, name, id)
//出力
24 'Steve' undefined入れ子（ネスト）のオブジェクトは取得できない
対象のオブジェクトの中にもオブジェクトが入っている入れ子（ネスト）のオブジェクトは分割代入で取得できません。
入れ子のプロパティの値を分割代入で取得するためには、イコールの先で、そのプロパティが入っているものを指定するか、for文などで回す必要があります。
実例
例えば以下で、userオブジェクトの中に「hobby: { test: “soccer” }」が入っていますが、分割代入で「test」を指定しても、「soccer」は取得できません。
let user = {
age: 24,
name: "Steve",
hobby: { test: "soccer" }
}
//分割代入で抜き出す
let { age, name, test } = user
console.log(age, name, test)
//出力
24 'Steve' undefinedtestの値は「undefined」となります。
testを取得するには分割代入で指定するイコールの右側の最上部にtestが来る必要があります。
let user = {
age: 24,
name: "Steve",
hobby: { test: "soccer" }
}
//分割代入で抜き出す
let { age, name, test } = user.hobby
console.log(age, name, test)
//出力
undefined undefined 'soccer'すると、「test」とういう変数の値に「soccer」が入ります。
指定したもの以外をまとめて抜き出す（…rest）
オブジェクトの分割代入では、指定したもの以外をまとめて抜き出すこともできます。
プロパティ名がついた変数として抜き出したい要素はプロパティ名を記述します。
その他の要素は「…変数名’」として「…」の後ろに任意の変数名を記載します。すると、指定した変数の中にそれ以外の要素がごっそり入ります。
let { プロパティ名1, プロパティ名2, ...変数名’ } = オブジェクト変数名に指定はありませんが、残りのという意味の「rest」が使われることが多いです。
実例１
変数名で「rest」を指定した場合は以下のようになります。
let user = {
age: 24,
name: "Steve",
prefecture: "Tokyo",
hobby: { test: "soccer" }
}
//分割代入で抜き出す
let { age, ...rest } = user
console.log(age)
//出力
24
console.log(rest)
//出力
{ name: "Steve",
prefecture: "Tokyo",
hobby: { test: "soccer" }
}「…rest」としたことで、変数「rest」の中に、指定したプロパティ「age」以外の要素が全て入っていることがわかります。
実例１
変数名で「others」を指定した場合は以下のようになります。
let user = {
age: 24,
name: "Steve",
prefecture: "Tokyo",
hobby: { test: "soccer" }
}
//分割代入で抜き出す
let { age, ...others } = user
console.log(age)
//出力
24
console.log(others)
//出力
{ name: "Steve",
prefecture: "Tokyo",
hobby: { test: "soccer" }
}変数名を変えても「rest」と同じく、指定した変数に残りの値が全て入っていることがわかります。
