分割代入による変数の初期化 | 代入演算子 | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

分割代入とは?

分割代入(Destructuring Assignment)とは、配列やオブジェクトから複数の値を一度に取り出し、それらを変数に代入する便利な方法です。この方法を使用すると、コードを簡潔にし、可読性を向上させることができます。

配列の分割代入

配列の分割代入を使用すると、配列の各要素を個別の変数に簡単に代入できます。次の例を見てみましょう。

let numbers = [1, 2, 3];
let [first, second, third] = numbers;

console.log(first);  // 1
console.log(second); // 2
console.log(third);  // 3

この例では、配列numbersから1番目、2番目、3番目の値がそれぞれfirstsecondthirdという変数に代入されています。これにより、配列から個別の値を取り出す作業が非常に簡単になります。

オブジェクトの分割代入

オブジェクトの分割代入では、オブジェクトのプロパティを直接変数に代入できます。オブジェクトから必要なプロパティを選び出して、変数として扱うことができます。

let person = { name: "Alice", age: 25, city: "Tokyo" };
let { name, age, city } = person;

console.log(name);  // "Alice"
console.log(age);   // 25
console.log(city);  // "Tokyo"

この例では、オブジェクトpersonからnameagecityというプロパティが分割代入され、それぞれの値が変数に代入されています。

デフォルト値を設定する

分割代入では、変数にデフォルト値を設定することも可能です。もし代入する値がundefinedの場合、デフォルト値が使用されます。

let colors = ["red"];
let [primary = "blue", secondary = "green"] = colors;

console.log(primary);   // "red"
console.log(secondary); // "green" (デフォルト値)

この例では、colors配列に要素が1つしかないため、secondaryにはデフォルト値の"green"が代入されています。

入れ替え(Swap)に便利な分割代入

分割代入は、変数の値を簡単に入れ替えるのにも便利です。通常、2つの変数の値を入れ替えるには一時的な変数を使用しますが、分割代入を使うと1行で簡潔に記述できます。

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

この例では、abの値が分割代入によって簡単に入れ替えられています。

分割代入のまとめ

以下に、分割代入を使って変数を初期化する際に使用できる主なパターンをまとめました。

操作 説明
配列の分割代入 配列から個々の要素を取り出して変数に代入 let [a, b] = [1, 2];
オブジェクトの分割代入 オブジェクトのプロパティを変数に代入 let { name, age } = person;
デフォルト値の設定 未定義の値にデフォルト値を代入 let [a = 1] = [];
変数の入れ替え 分割代入を使って変数の値を入れ替える [a, b] = [b, a];

プログラムの解説

<script>
// 配列の分割代入
let fruits = ["apple", "banana", "cherry"];
let [fruit1, fruit2] = fruits;
console.log(fruit1); // "apple"
console.log(fruit2); // "banana"

// オブジェクトの分割代入
let car = { brand: "Toyota", model: "Corolla", year: 2020 };
let { brand, model } = car;
console.log(brand);  // "Toyota"
console.log(model);  // "Corolla"

// デフォルト値の設定
let [primaryColor = "blue", secondaryColor = "green"] = ["red"];
console.log(primaryColor);   // "red"
console.log(secondaryColor); // "green" (デフォルト値)

// 変数の入れ替え
let x = 5, y = 10;
[x, y] = [y, x];
console.log(x); // 10
console.log(y); // 5
</script>

このコードでは、配列とオブジェクトの分割代入、デフォルト値の設定、そして変数の入れ替えを行っています。

まとめ

分割代入は、配列やオブジェクトから複数の値を簡単に取り出し、それらを変数に代入する強力な機能です。これを使うことで、コードが簡潔になり、変数の初期化や値の入れ替えがより効率的に行えるようになります。特に複数の値を扱う際には、分割代入を活用することでプログラムの可読性と効率性が向上します。