学ぶよりクリーンなコードのためのオブジェクトのデストラクチャリング

メニューを表示するにはスワイプしてください

オブジェクトの分割代入は、オブジェクトから特定のプロパティを抽出し、変数に割り当てることができる機能です。これにより、複数のプロパティを持つオブジェクトを扱う際に、より簡潔で読みやすいコードが実現できます。

オブジェクトの分割代入の理解

オブジェクトの分割代入は、オブジェクトから値を取り出して個別の変数に展開する方法です。分割代入は、オブジェクトリテラルに似た構文を代入文の左側で使用します。

オブジェクトの分割代入の基本構文は以下の通りです。

const { property1, property2, ...} = sourceObject;

property1, property2: オブジェクトから値を受け取る変数名
sourceObject: プロパティを抽出する対象のオブジェクト
順序は関係ありません。プロパティ名で一致します。

オブジェクトの分割代入の実践


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

これで fullName、nationality、occupation は、それぞれの値を保持する独立した変数となります。

デフォルト値の指定

オブジェクトにプロパティが存在しない場合、デフォルト値を割り当てることができます。


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

birthDate が存在しない場合、デフォルト値が使用される。

変数名の変更

抽出した変数は : 構文を使って名前を変更できる。


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

短い名前が可読性を向上させたり、名前の衝突を避けたりする場合に便利。

ネストされたオブジェクトの分割代入

ネストされたオブジェクト内のプロパティも分割代入が可能。


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008