概要: このチュートリアルでは、オブジェクトのプロパティを個々の変数に代入する JavaScript オブジェクトの分割代入について学習します。
配列の分割代入方法については、配列の分割代入チュートリアルを参照してください。
JavaScript オブジェクトの分割代入の導入
firstName と lastName の 2 つのプロパティを持つ person オブジェクトがあるとします。
let person = {
firstName: 'John',
lastName: 'Doe'
};Code language: JavaScript (javascript)ES6 以前は、person オブジェクトのプロパティを変数に代入する場合、通常は次のようにしていました。
let firstName = person.firstName;
let lastName = person.lastName; Code language: JavaScript (javascript)ES6 では、オブジェクトのプロパティを変数に代入する別の方法を提供するオブジェクト分割代入構文が導入されました。
let { firstName: fname, lastName: lname } = person;Code language: JavaScript (javascript)この例では、firstName プロパティと lastName プロパティがそれぞれ fName 変数と lName 変数に代入されています。
この構文では、
let { property1: variable1, property2: variable2 } = object;Code language: JavaScript (javascript)コロン (:) の前の識別子はオブジェクトのプロパティであり、コロンの後の識別子は変数です。
オブジェクトリテラルかオブジェクト分割代入構文かに関わらず、プロパティ名は常に左側に配置されることに注意してください。
変数名がオブジェクトのプロパティと同じ名前の場合、次のようにコードをより簡潔にすることができます。
let { firstName, lastName } = person;
console.log(firstName); // 'John'
console.log(lastName); // 'Doe'Code language: JavaScript (javascript)この例では、firstName と lastName の 2 つの変数を宣言し、同じステートメントで person オブジェクトのプロパティを変数に代入しました。
宣言と代入を分離することも可能です。ただし、変数を括弧で囲む必要があります。
({firstName, lastName} = person);括弧を使用しない場合、JavaScript エンジンは左側をブロックとして解釈し、構文エラーをスローします。
オブジェクト分割代入を使用して、存在しないプロパティを変数に代入すると、変数は undefined に設定されます。例えば、
let { firstName, lastName, middleName } = person;
console.log(middleName); // undefinedCode language: JavaScript (javascript)この例では、person オブジェクトに middleName プロパティが存在しないため、middleName 変数は undefined です。
デフォルト値の設定
オブジェクトのプロパティが存在しない場合、変数にデフォルト値を割り当てることができます。例えば、
let person = {
firstName: 'John',
lastName: 'Doe',
currentAge: 28
};
let { firstName, lastName, middleName = '', currentAge: age = 18 } = person;
console.log(middleName); // ''
console.log(age); // 28Code language: JavaScript (javascript)この例では、person オブジェクトに middleName プロパティがない場合、middleName 変数に空の文字列を代入します。
また、デフォルト値 18 を使用して、currentAge プロパティを age 変数に代入します。
ただし、person オブジェクトに middleName プロパティが存在する場合、代入は通常どおり機能します。
let person = {
firstName: 'John',
lastName: 'Doe',
middleName: 'C.',
currentAge: 28
};
let { firstName, lastName, middleName = '', currentAge: age = 18 } = person;
console.log(middleName); // 'C.'
console.log(age); // 28Code language: JavaScript (javascript)null オブジェクトの分割代入
関数によっては、状況によってオブジェクトまたは null を返す場合があります。例えば、
function getPerson() {
return null;
}Code language: JavaScript (javascript)そして、オブジェクト分割代入を使用します。
let { firstName, lastName } = getPerson();
console.log(firstName, lastName);Code language: JavaScript (javascript)コードは TypeError をスローします。
TypeError: Cannot destructure property 'firstName' of 'getPerson(...)' as it is null.Code language: JavaScript (javascript)これを回避するには、OR 演算子 (||) を使用して、null オブジェクトを空のオブジェクトにフォールバックできます。
let { firstName, lastName } = getPerson() || {};Code language: JavaScript (javascript)これで、エラーは発生しません。そして、firstName と lastName は undefined になります.
ネストされたオブジェクトの分割代入
プロパティとして name オブジェクトを持つ employee オブジェクトがあるとします。
let employee = {
id: 1001,
name: {
firstName: 'John',
lastName: 'Doe'
}
};Code language: JavaScript (javascript)次のステートメントは、ネストされた name オブジェクトのプロパティを個々の変数に分割代入します。
let {
name: {
firstName,
lastName
}
} = employee;
console.log(firstName); // John
console.log(lastName); // DoeCode language: JavaScript (javascript)1 つのプロパティを複数の変数に複数回代入することも可能です。
let employee = {
id: 1001,
name: {
firstName: 'John',
lastName: 'Doe'
}
};
let {
name: {
firstName,
lastName
},
name
} = employee;
console.log(firstName); // John
console.log(lastName); // Doe
console.log(name); // { firstName: 'John', lastName: 'Doe' }Code language: JavaScript (javascript)関数引数の分割代入
person オブジェクトを表示する関数があるとします。
let display = (person) => console.log(`${person.firstName} ${person.lastName}`);
let person = {
firstName: 'John',
lastName: 'Doe'
};
display(person);Code language: JavaScript (javascript)関数に渡されたオブジェクト引数を次のように分割代入することができます。
let display = ({firstName, lastName}) => console.log(`${firstName} ${lastName}`);
let person = {
firstName: 'John',
lastName: 'Doe'
};
display(person);Code language: JavaScript (javascript)特に引数オブジェクトの多くのプロパティを使用する場合、冗長性が少なくなります。この手法は React でよく使用されます。
まとめ
- オブジェクト分割代入は、デフォルトでオブジェクトのプロパティを同じ名前の変数に代入します。
