などの疑問や悩みを解決してまいります。
分割代入とは
分割代入（Destructuring Assignment）は、配列やオブジェクトの値を変数に一度に割り当てることができる機能です。
従来の方法では以下のように、値を個別に取り出すために1つ1つ変数に代入する必要がありました。
const array = [1, 2, 3, 4, 5];
const a = array[0];
const b = array[1];
const c = array[2];
const d = array[3];
const e = array[4];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
console.log(e); // 5分割代入を使用することで、上記のような記述を短縮することができます。
const [a, b, c, d, e] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
console.log(e); // 5従来の方法と、分割代入を使用した記述で変数を指定して、値を代入する記述をひとつひとつ書く手間が省けます。
配列の分割代入
配列の値を分割代入するには、以下のように記述します。
const fruits = ['Apple', 'Banana', 'Orange'];
const [first, second, third] = fruits;
console.log(first); // 'Apple'
console.log(second); // 'Banana'
console.log(third); // 'Orange'スキップしたい要素がある場合
もし配列の一部の要素を無視したい場合は、カンマを使ってその要素をスキップすることができます。
const numbers = [1, 2, 3, 4];
const [first, , third] = numbers;
console.log(first); // 1
console.log(third); // 3変数firstには1が入り、次の変数指定は何も記述せずカンマで区切ることで、変数代入をスキップすることができます。
そのため次の変数thirdには3が入ります。
注意ポイント
4は変数が指定されていないため、無視されます。
分割代入でデフォルト値を設定したい場合
配列に値が存在しない場合は、デフォルト値を設定することもできます。
const colors = ['Red'];
const [primary, secondary = 'Blue'] = colors;
console.log(primary); // Red
console.log(secondary); // Blue (デフォルト値)colors配列には1つの要素しかないため、secondaryにはデフォルト値として指定した Blue が割り当てられています。
ネスト構造から分割代入
配列の中にネストされた配列からも、分割代入で特定の値を取り出すことができます。
const coordinates = [[10, 20], [30, 40]];
const [[x1, y1], [x2, y2]] = coordinates;
console.log(x1, y1); // 10, 20
console.log(x2, y2); // 30, 40この場合、coordinates という配列の各要素がさらに配列になっており、それぞれの要素から x と y を分割代入で取り出しています。
オブジェクトの分割代入
オブジェクトの値を分割代入するには、以下のように記述します。
const person = {
name: 'Alice',
age: 25,
profession: 'Engineer'
};
const { name, age } = person;
console.log(name); // 'Alice'
console.log(age); // 25ここでは、personオブジェクトから name と age を抽出しています。
ポイント
オブジェクトの分割代入はプロパティ名と一致する変数に値を割り当てるため、キー名が重要になります。
プロパティを別名にしたい場合
また変数名をプロパティ名と異なるものにしたい場合、以下のように別名をつけることができます。
const person = {
name: 'Alice',
age: 25
};
const { name: userName, age: userAge } = person;
console.log(userName); // 'Alice'
console.log(userAge); // 25本来プロパティ名と一致する変数名にしなくてはならないのですが、このように記述することでプロパティ名と別の名前で変数を宣言することができます。
分割代入でデフォルト値を設定したい場合
オブジェクトでも、配列同様に変数にデフォルト値を設定することができます。
const car = {
brand: 'Toyota'
};
const { brand, color = 'Black' } = car;
console.log(brand); // 'Toyota'
console.log(color); // 'Black' (デフォルト値)carオブジェクトには color プロパティがないため、デフォルト値として 'Black' を指定しています。
ネスト構造の分割代入
オブジェクトの中にさらにオブジェクトがある場合、それぞれのプロパティを一度に分割代入で取り出せます。
const employee = {
name: 'Alice',
address: {
city: 'New York',
country: 'USA'
}
};
const { name, address: { city, country } } = employee;
console.log(name); // 'Alice'
console.log(city); // 'New York'
console.log(country); // 'USA'
上記では、employee オブジェクトの中にある address オブジェクトから、city と country を取り出しています。
配列とオブジェクトが混在するネスト構造の分割代入
オブジェクトと配列が混在しているケースでも、同時に分割代入を行うことができます。
const data = {
title: 'Book',
authors: [
{ name: 'Author1', age: 35 },
{ name: 'Author2', age: 42 }
]
};
const { title, authors: [{ name: firstAuthor }, { age: secondAuthorAge }] } = data;
console.log(title); // 'Book'
console.log(firstAuthor); // 'Author1'
console.log(secondAuthorAge); // 42この例では、data オブジェクトの authors プロパティが配列であり、その中のオブジェクトから name や age を分割代入で取り出しています。
関数で分割代入
分割代入は、関数の引数にも使うことができます。
引数の分割代入
以下のように関数の引数で分割代入を使用することができます。
function printUser({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
const user = { name: 'Charlie', age: 28 };
printUser(user); // Name: Charlie, Age: 28こちらのコードでは、user オブジェクトの name と age を関数の引数として直接分割代入しています。
返り値の分割代入
以下のように関数の返り値を分割代入することも可能です。
function getCoordinates() {
return [50, 100];
}
const [x, y] = getCoordinates();
console.log(x); // 50
console.log(y); // 100
まとめ
JavaScriptの分割代入は、配列やオブジェクトから簡潔にデータを取り出すことができる便利な機能です。
最初は見慣れない記述で戸惑うかもしれませんが、慣れるとコードが短く・読みやすくなるので、本記事でぜひマスターしてください。
