More than 3 years have passed since last update.

【JavaScript】「分割代入」について

Last updated at 2021-10-12Posted at 2019-09-06

最近paizaで問題を解いていて下のようなコードをずっと書いていました。


const line = '1 2 3';
let a = line.split(' ')[0];
let b = line.split(' ')[1];
let c = line.split(' ')[2];

このコード分割代入を使用するとかなりすっきりします。


const line = '1 2 3';
let [a, b, c] = line.split(' ');

分割代入とは

分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。

配列の分割代入は冒頭の分割代入と同じで
左辺に配列リテラルのような変数宣言を書き、右辺に配列を書きます。


const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a, b, c);
// 出力　1 2 3

配列数が足りない場合はundefinedとなります。


const arr = [1, 2];
const [a, b, c] = arr;

console.log(a, b, c);
// 出力　1 2 undefined

配列の分割代入と同じで
左辺にオブジェクトリテラルのような変数宣言を書き、右辺にオブジェクトを書きます。


const languages = {
  ja: '日本語',
  en: '英語'
};
const { ja, en } = languages;

console.log(ja, en);
// 出力　日本語 英語

レスト構文と組み合わせることによって残りの値を集約することが出来ます。
日本では残余代入と言うようです。


const arr = [1, 2, 3, 4, 5];
const [a, b, ...c] = arr;

console.log(a, b, c);
// 出力 1 2 [3, 4, 5]