分割代入とは

分割代入とは、配列/オブジェクトを分解して、要素/プロパティの値を個々の変数に分解するための構文である。

分割代入 (配列)

代入先変数全体をブラケット[...]でくくる。

配列要素と変数が同じ

左辺に要素の数だけ変数を列挙する。

const data = [1, 2, 3, 4, 5]
const [x0, x1, x2, x3, x4 ] = data
console.log(x0, x1, x2, x3, x4)

実行結果

1 2 3 4 5

配列要素と変数の個数が異なる

左辺変数と右辺の配列要素の個数が等しくなくても構わない。

const data = [1, 2, 3, 4, 5]

// 配列サイズよりも代入先の変数の個数が少ない場合は、残りの要素は無視される。
const [x0, x1, x2] = data
console.log(x0, x1, x2)

// 配列サイズよりも代入先の変数の個数が多い場合は、対応する要素がないためundeinedとなる。
const [y0, y1, y2, y3, y4, y5, y6, y7] = data
console.log(y0, y1, y2, y3, y4, y5, y6, y7)

// 要素を無視したい場合は、要素の数だけカンマを列記する。
const [z0, , , z4, z5] = data
console.log(z0, z4, z5)

実行結果

1 2 3
1 2 3 4 5 undefined undefined undefined
1 4 5

「...」演算子で残りの要素を取得

「...」演算子を利用することで、個々の変数に分解しきれなかった要素の残りをまとめて配列として切り出すことが可能。

const data = [1 , 2, 3, 4, 5]
// 変数名otherとしているが、名前はなんでも構わない
const [x0, x1, ...other] = data
console.log(x0, x1)
console.log(other)

実行結果

1 2
[3, 4, 5]

変数の入れ替え (スワッピング)

分割代入を利用すれば、変数の値を入れ替える (スワップ) することもできる。

let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y);

実行結果

2 1

宣言と切り離して分割代入する

変数宣言と分割代入を双方切り離すことできる。

let x, y, z;
const data = [1, 2, 3];
[x, y, z] = data;
console.log(x, y, z);

実行結果

1 2 3

分割代入 (オブジェクト)

オブジェクトの場合は、プロパティを個々の変数に分解する。よって、変数の並び準はプロパティの定義順と違っていても、分解しないプロパティがあっても構わない。
また、目的のプロパティが存在しない場合に備えて、「変数名 = 既定値」を指定することもできる。
代入先変数全体をブラケット{...}でくくる。

const obj = {
  x : 1,
  y : 2,
  z : 3,
}
// xyzのプロパティがobjに存在しないので規定値として4を指定
const { x, y, xyz = 4 } = obj
console.log(x, y, xyz)

実行結果

1 2 4

入れ子となったオブジェクトを分解

入れ子となったオブジェクトを展開するには、オブジェクトの入れ子関係がわかるように代入先の変数も{...}で入れ子構造を表す。

const obj = {
  x : 1,
  y : {
    y0: 11,
    y1: 22,
  },
  z : [111, 222]
}
// y: { y0 } にすることでyオブジェクトのy0プロパティの値を取得できる。
// 同様に入れ子の配列を分解する場合は、z: [val0, val1]のようにすることで可能となる。
const { x, y: {　y0　}, z: [val0, val1] } = obj
console.log(x, y0, val0, val1)

実行結果

1 11 111 222

変数の別名を指定

「変数名: 別名」の形式で、プロパティとは異なる名前の変数に値を割り当てることもできる。

const obj = {
  x: 1,
  y: 2,
}

const { x: x0, y: y0 } = obj
console.log(x0, y0)

実行結果

1 2

「...」演算子で残りのプロパティを取得

[...]演算子を利用することで、明示的に分解されなかった残りの要素をまとめて取得することができる。

const obj = {
  x: 1,
  y: 2,
  z: 3,
}
// 変数名otherとしているが、名前はなんでも構わない
const { x, ...other } = obj
console.log(x)
console.log(other)

実行結果

1
{ y: 2, z: 3}

宣言と切り離して分割代入する

変数宣言と分割代入を双方切り離すことできる。ただし、左辺の{...}はブロックと見なされ、単体で文と見なされないので前後にカッコをつける必要がある。

let x, y, z;
const obj = {
  x: 1,
  y: 2,
  z: 3,
};
// {...}はブロックと見なされるのでカッコをつけることで一文と見なす。
({ x, y, z } = obj);
console.log(x, y, z);

実行結果

1 2 3