JavaScript/分割代入

分割代入

分割代入（Destructuring Assignment）は、JavaScript において配列やオブジェクトの値を簡潔に変数に代入する構文です。この構文により、コードを短縮し、可読性を高めることができます。

構文

const { property1, property2 } = object;
const [element1, element2] = array;

オブジェクト分割代入: オブジェクトのプロパティを変数として抽出します。
配列分割代入: 配列の要素を変数として抽出します。

使用例

配列の分割代入

const numbers = [10, 20, 30];
const [a, b, c] = numbers;

console.log(a); // 10
console.log(b); // 20
console.log(c); // 30

配列 numbers の要素をそれぞれ変数 a, b, c に代入しています。

オブジェクトの分割代入

const person = { name: 'Alice', age: 25 };
const { name, age } = person;

console.log(name); // 'Alice'
console.log(age); // 25

オブジェクト person のプロパティ name と age を変数として抽出しています。

デフォルト値

const [x = 1, y = 2] = [10];
console.log(x); // 10
console.log(y); // 2

分割代入では、値が存在しない場合にデフォルト値を指定することができます。

ネストした分割代入

const data = { user: { name: 'Bob', age: 30 } };
const { user: { name, age } } = data;

console.log(name); // 'Bob'
console.log(age); // 30

ネストされたオブジェクトのプロパティを分割代入することも可能です。

配列の一部だけを取得

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

スプレッド構文を使って残りの要素を別の配列として取得できます。

別名の指定

const person = { firstName: 'Alice', age: 25 };
const { firstName: name, age } = person;

console.log(name); // 'Alice'
console.log(age); // 25

プロパティを別名の変数に代入することができます。

特徴と注意点

簡潔さ: 分割代入を使うことで冗長なコードを減らすことができます。
柔軟性: デフォルト値やネストされた構造にも対応可能です。
順序の違いに注意: 配列の分割代入は要素の順序が重要ですが、オブジェクトの場合はプロパティ名が基準です。

使用例: 関数の引数

分割代入は関数の引数を扱う場合にも便利です。

オブジェクト引数の分割

function greet({ name, age }) {
  console.log(<code>Hello, ${name}! You are ${age} years old.</code>);
}

greet({ name: 'Alice', age: 25 }); 
// 'Hello, Alice! You are 25 years old.'

配列引数の分割

function sum([a, b]) {
  return a + b;
}

console.log(sum([10, 20])); // 30

参考