はじめに
分割代入とは、配列やオブジェクトの構造に従って値を取り出し、変数へ代入する構文です。
例えば、次のような配列を用意し、各要素を変数・定数に代入するとします。
const numbers = [10, 20, 30];
const first = numbers[0];
const second = numbers[1];
const third = numbers[2];
console.log(first); // 10
console.log(second); // 20
console.log(third); // 30
分割代入を使うと、次のように書くことができます。
const numbers = [10, 20, 30];
const [first, second, third] = numbers;
console.log(first); // 10
console.log(second); // 20
console.log(third); // 30
この記事では、配列とオブジェクトの分割代入について、それぞれの特徴を見ていきます。
分割代入
配列の分割代入
基本的な使い方
配列の分割代入では、配列の要素と左辺の変数が、順番に対応します。
const numbers = [10, 20, 30];
const [first, second, third] = numbers;
console.log(first); // 10
console.log(second); // 20
console.log(third); // 30
次のように変数の順番を変えると、代入される値も変わります。
const numbers = [10, 20, 30];
const [third, first, second] = numbers;
console.log(first); // 20
console.log(second); // 30
console.log(third); // 10
不要な要素をスキップする
必要のない要素は、空けておくことでスキップできます。
2番目の要素に対応する部分を空けているため、20はどの変数にも代入されません。
const numbers = [10, 20, 30];
const [first, , third] = numbers;
console.log(first); // 10
console.log(third); // 30
宣言済みの変数に代入する
分割代入は、すでに宣言されている変数への代入にも利用できます。
let first;
let second;
const numbers = [10, 20];
[first, second] = numbers;
console.log(first); // 10
console.log(second); // 20
デフォルトの値を設定する
配列の要素が存在しない場合に使用するデフォルト値を設定できます。
numbersには2番目の要素が存在するため、secondにはその値が代入されます。
3番目の要素は存在しないため、thirdにはデフォルト値が代入されます。
const numbers = [10, 20];
const [first, second = 200, third = 300] = numbers;
console.log(first); // 10
console.log(second); // 20
console.log(third); // 300
また、要素の値がundefinedの場合にもデフォルト値が使用されます。
ただし、nullの場合はデフォルトの値ではなく、nullのままです。
const numbers = [10, undefined, null];
const [first, second = 20, third = 30] = numbers;
console.log(first); // 10
console.log(second); // 20
console.log(third); // null
残余要素
...を使うと、残りの要素をまとめて受け取ることができます。
残余要素は残りの要素がいくつあるかにかかわらず、常に配列として受け取ります。
firstには最初の要素が代入され、restには残りの要素が配列として代入されます。
const numbers = [10, 20, 30, 40];
const [first, ...rest] = numbers;
console.log(first); // 10
console.log(rest); // [20, 30, 40]
残りの要素が1つしかない場合でも、restには配列として代入されます。
const numbers = [10, 20];
const [first, ...rest] = numbers;
console.log(rest); // [20]
残りの要素がない場合は、空の配列が代入されます。
const numbers = [10];
const [first, ...rest] = numbers;
console.log(rest); // []
オブジェクトの分割代入
基本的な使い方
オブジェクトの分割代入では、プロパティ名に基づいて値が代入されます。
const user = {
name: "田中",
age: 25
};
const { name, age } = user;
console.log(name); // 田中
console.log(age); // 25
ageとnameの順番を入れ替えても、それぞれ対応するプロパティの値が代入されます。
オブジェクトの分割代入では、左辺に記述する順番ではなく、プロパティ名によって値が決まるからです。
const user = {
name: "田中",
age: 25
};
const { age, name } = user;
console.log(name); // 田中
console.log(age); // 25
宣言済みの変数に代入する
オブジェクトの分割代入も、すでに宣言されている変数への代入に利用できます。
宣言済みの変数にオブジェクトの分割代入を行う場合は、分割代入全体を()で囲みます。
これは、{}がブロック文として解釈されることを避けるためです。
let name;
let age;
const user = {
name: "田中",
age: 25
};
({ name, age } = user);
console.log(name); // 田中
console.log(age); // 25
プロパティ名と変数名を変更する
オブジェクトの分割代入では、プロパティ名と異なる名前の変数に値を代入することもできます。
const user = {
name: "田中",
age: 25,
sex: 'man'
};
const { name: userName, age: userAge, sex: gender } = user;
console.log(userName); // 田中
console.log(userAge); // 25
console.log(gender); // man
デフォルトの値を設定する
オブジェクトに指定したプロパティが存在しない場合に使用するデフォルト値を設定できます。
userにはageプロパティが存在するため、ageにはその値が代入されます。
sexプロパティは存在しないため、sexにはデフォルトの値が代入されます。
const user = {
name: "田中",
age: 25
};
const { name, age = 20, sex = 'woman' } = user;
console.log(name); // 田中
console.log(age); // 25
console.log(sex); // woman
値がundefinedの場合にもデフォルト値が使用されます。
ただし、nullの場合はデフォルトの値ではなく、nullのままです。
const user = {
name: "田中",
age: undefined,
sex: null
};
const { name, age = 20, sex = 'woman' } = user;
console.log(age); // 20
console.log(sex); // null
残余プロパティ
オブジェクトでも...を使って、残りのプロパティをまとめて受け取ることができます。
nameにはnameプロパティの値が代入され、それ以外のプロパティがrestにオブジェクトとしてまとめられます。
const user = {
name: "田中",
age: 25,
address: "東京都"
};
const { name, ...rest } = user;
console.log(name); // 田中
console.log(rest); // { age: 25, address: "東京都" }
残りのプロパティがない場合は、空のオブジェクトが代入されます。
const user = {
name: "田中"
};
const { name, ...rest } = user;
console.log(rest); // {}
ネストした分割代入
オブジェクトのプロパティの値がさらにオブジェクトになっている場合、その入れ子になったプロパティも分割代入できます。
例えば、次のようなオブジェクトがあるとします。
const user = {
name: "田中",
address: {
prefecture: "東京都",
city: "渋谷区"
}
};
addressプロパティの値を、そのままaddressという変数として受け取ることができます。
const { name, address } = user;
console.log(name); // 田中
console.log(address); // { prefecture: "東京都", city: "渋谷区" }
さらに、addressの中にあるプロパティを分割代入することもできます。
prefectureとcityは変数として取得できます。
ただし、addressという変数は作成されない点は注意が必要です。
const {
name,
address: { prefecture, city }
} = user;
console.log(name); // 田中
console.log(prefecture); // 東京都
console.log(city); // 渋谷区
関数の引数で分割代入
分割代入は、関数の引数にも利用できます。
例えば、次のようなオブジェクトを関数に渡すとします。
const user = {
name: "田中",
age: 25
};
function greet(user) {
console.log(`${user.name}さんは${user.age}歳です`);
}
greet(user);
// 田中さんは25歳です
分割代入を使うと、次のように書くことができます。
関数の引数に渡されたオブジェクトを、その場で分割代入しています。
function greet({ name, age }) {
console.log(`${name}さんは${age}歳です`);
}
greet(user);
// 田中さんは25歳です
配列でも同じように利用できます。
const numbers = [10, 20];
function printNumbers([first, second]) {
console.log(first);
console.log(second);
}
printNumbers(numbers);
// 10
// 20
このように、分割代入は変数を宣言するときだけでなく、関数の引数を受け取るときにも利用できます。
まとめ
分割代入を使うと、配列やオブジェクトから必要な値を取り出して、変数に代入できます。
- 配列の分割代入は、要素の位置に応じて値を取り出す
- オブジェクトの分割代入は、プロパティ名に応じて値を取り出す
- 宣言済みの変数や関数の引数にも利用できる
- デフォルト値を設定したり、残りの要素・プロパティをまとめて受け取ったりできる
配列やオブジェクトから必要な値を取り出す場面では、分割代入を使うことで、より簡潔にコードを書くことができます。
参考
- CodeMafia 外村将大（2021） 『独習JavaScript 新版』、pp.325-328
- 山田祥寛（2025）『改訂新版 これから始めるReact実践入門』SBクリエイティブ、pp.34–37