配列の分割代入 (destructuring assignment)

配列の分割代入#

JavaScriptでは、配列から要素を取り出す方法のひとつに、array[1]のようにインデックスでアクセスする方法があります。この方法とは別に、分割代入(destructuring assignment)という方法を使っても、配列要素にアクセスできます。

たとえば、[1, 2, 3, 4, 5]のような配列から、最初の3要素を取り出して変数に代入するには次のように書きます。

typescript
const oneToFive = [1, 2, 3, 4, 5];
const [one, two, three] = oneToFive;
console.log(one); //=> 1
console.log(two); //=> 2
console.log(three); //=> 3

typescript
const oneToFive = [1, 2, 3, 4, 5];
const [one, two, three] = oneToFive;
console.log(one); //=> 1
console.log(two); //=> 2
console.log(three); //=> 3

存在しない要素に対して分割代入した場合は、変数にundefinedが代入されます。JavaScriptではこれはエラーになりません。

javascript
const oneToFive = [1, 2];
const [one, two, three] = oneToFive;
console.log(three); //=> undefined

javascript
const oneToFive = [1, 2];
const [one, two, three] = oneToFive;
console.log(three); //=> undefined

TypeScriptでは、分割代入された値の型はT[]の配列ならT型になります。たとえば、number[]型の[1, 2, 3, 4, 5]から分割代入したのなら、型はnumberになります。

typescript
const oneToFive = [1, 2, 3, 4, 5];
const [one, two, three] = oneToFive;
const num: number = one; // oneはnumber型になるので代入できる

typescript
const oneToFive = [1, 2, 3, 4, 5];
const [one, two, three] = oneToFive;
const num: number = one; // oneはnumber型になるので代入できる

ただしTypeScriptのコンパイラーオプションnoUncheckedIndexedAccessを有効にした場合は異なります。

このオプション有効状態で、配列T[]から分割代入するとT型もしくはundefined型を示すT | undefined型になります。たとえば、number[]型の[1, 2, 3, 4, 5]から分割代入したのなら、型はnumber | undefinedになります。

typescript
const oneToFive = [1, 2, 3, 4, 5];
const [one, two, three] = oneToFive;
const num: number = one;
// 上はコンパイルエラーになる。
// oneはnumber | undefinedになり、numberには代入できないため。

typescript
const oneToFive = [1, 2, 3, 4, 5];
const [one, two, three] = oneToFive;
const num: number = one;
// 上はコンパイルエラーになる。
// oneはnumber | undefinedになり、numberには代入できないため。

ネストした配列の分割代入#

JavaScriptの分割代入はフラットな配列だけでなく、ネストした入れ子構造の配列からも要素を抽出できます。ネストした要素の分割代入の書き方は、ネスト構造と一致するようにブラケット([ ])を重ねます。

typescript
const twoByTwo = [
  [1, 2],
  [3, 4],
];
const [[one, two], [three]] = twoByTwo;
console.log(one); //=> 1
console.log(two); //=> 2
console.log(three); //=> 3

typescript
const twoByTwo = [
  [1, 2],
  [3, 4],
];
const [[one, two], [three]] = twoByTwo;
console.log(one); //=> 1
console.log(two); //=> 2
console.log(three); //=> 3

途中要素の分割代入#

配列の分割代入は先頭からでなく、途中の要素を取り出すこともできます。その場合、取り出さない要素の数だけカンマを書きます。

typescript
const oneToFive = [1, 2, 3, 4, 5];
const [, , , four, five] = oneToFive;
console.log(four); //=> 4
console.log(five); //=> 5

typescript
const oneToFive = [1, 2, 3, 4, 5];
const [, , , four, five] = oneToFive;
console.log(four); //=> 4
console.log(five); //=> 5

残余部分の代入#

JavaScriptの配列を分割代入するときに、残余パターン(...)を用いて、配列の残りの部分を取り出して変数に代入できます。

typescript
const oneToFive = [1, 2, 3, 4, 5];
const [one, ...rest] = oneToFive;
console.log(one); //=> 1
console.log(rest); //=> [ 2, 3, 4, 5 ]

typescript
const oneToFive = [1, 2, 3, 4, 5];
const [one, ...rest] = oneToFive;
console.log(one); //=> 1
console.log(rest); //=> [ 2, 3, 4, 5 ]

このときTypeScriptでは、残余部分の型は配列のnumber[]になります。