JavaScriptの分割代入

分割代入はオブジェクトや配列から値を取り出して変数に代入するための便利な構文です

オブジェクトの分割代入:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

// オブジェクトのプロパティを変数に分割代入
const { firstName, lastName, age } = person;

console.log(firstName); // 'John'
console.log(lastName);  // 'Doe'
console.log(age);       // 30

配列の分割代入:

const colors = ['red', 'green', 'blue'];

// 配列の要素を変数に分割代入
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor);  // 'red'
console.log(secondColor); // 'green'
console.log(thirdColor);  // 'blue'

関数の戻り値を分割代入:

function getCoordinates() {
  return [10, 20];
}

const [x, y] = getCoordinates();

console.log(x); // 10
console.log(y); // 20

また、デフォルト値を指定することもできます：

// 人物の情報を表すオブジェクトを作成します
const person = {
  firstName: 'John',   // 名前
  lastName: 'Doe',     // 姓
  age: 30,             // 年齢
};

// オブジェクトから firstName と age プロパティを取り出し、デフォルト値を設定します
const { firstName = 'Anonymous', age = 0 } = person;

// 分割代入した結果をコンソールに表示します
console.log(firstName); // 'John' (firstName プロパティが存在するので、'John' が表示されます)
console.log(age);       // 30 (age プロパティが存在するので、30 が表示されます)

// 人物の情報を表すオブジェクトを作成します
const person = {
  firstName: 'John',   // 名前
  lastName: 'Doe',     // 姓
  // age プロパティは省略されています
};

// オブジェクトから firstName と age プロパティを取り出し、デフォルト値を設定します
const { firstName = 'Anonymous', age = 0 } = person;

// 分割代入した結果をコンソールに表示します
console.log(firstName); // 'John' (firstName プロパティが存在するため、'John' が表示されます)
console.log(age);       // 0 (age プロパティが存在しないため、デフォルト値の 0 が表示されます)

// 人物の情報を表すオブジェクトを作成します
const person = {
  // firstName プロパティは省略されています
  lastName: 'Doe',     // 姓
  age: 30,             // 年齢
};

// オブジェクトから firstName と age プロパティを取り出し、デフォルト値を設定します
const { firstName = 'Anonymous', age = 0 } = person;

// 分割代入した結果をコンソールに表示します
console.log(firstName); // 'Anonymous' (firstName プロパティが存在しないため、デフォルト値の 'Anonymous' が表示されます)
console.log(age);       // 30 (age プロパティが存在するため、30 が表示されます)

分割代入は、オブジェクトや配列から必要なデータを簡潔に取り出すのに役立ちます。他にもネストしたオブジェクトや配列、さらには関数の引数としても利用できます。