こんにちは、ともです。

ES6について最近勉強していて分割代入というものが出てきました。

ES6からの構文である分割代入について理解してことを記事にしてまとめておこうと思います。

分割代入とは

配列リテラルやオブジェクトリテラルのデータにはいくつかのデータが格納されています。

配列やオブジェクトに格納されたデータを変数に分割して代入してくれます。

配列リテラルからの分割代入

// Array
let array = ['test', 'huga'];
let [x0, x1] = array;
console.log(x0);//out:'test'
console.log(x1);//out:'huga'

配列リテラルは[]で作成することができます。

配列リテラルからの分割代入を行う場合は、配列リテラルから配列リテラルに代入することで行われます。

配列リテラルからの分割代入（要素が合わない場合）

代入先＞代入元

let array = ['test', 'huga'];
let [x0, x1, x2] = array;
console.log(x0);//out:'test'
console.log(x1);//out:'huga'
console.log(x2);//out:undefined

代入先＞代入元の場合はどうなるか調べてみました。

溢れたところはundefinedになるようです。

このことから配列のIDが同じ所に代入していることが分かりました。

代入先＜代入元

// Array
let array = ['test', 'huga', 'fuga'];
let [x0, x1] = array;
console.log(x0);//out:'test'
console.log(x1);//out:'huga'

代入元の方が多い場合溢れたfugaについては代入されませんでした。

このことからも代入先>代入元の場合と同様に配列のIDが同じ所に代入していることが分かりました。

オブジェクトリテラルからの分割代入

{A,B} = {key1:value2, key2:value2}の場合

let obj = { A: 'hoge', B: 'huga' };
let { A, B } = obj;
let { C, D } = obj;
console.log(A);//out:'hoge' 
console.log(B);//out:'huga'
console.log(C);//out:undefined 
console.log(D);//out:undefined

JavaScriptにおいてオブジェクトリテラルは{key1:value1, key2:value2}のように作成します。

上記のコードでオブジェクトリテラルからオブジェクトリテラルに代入してみました。

この結果から、

代入元のkey名と代入先の変数名が一致した場合、代入元の値が格納される

ということが分かりました。

{key1:name, key2:title} = {key1:value2, key2:value2}の場合

let obj = { title: 'ジャンプ', publish: '集英社', other: { key: 'hoge' } };
let { title: A, publish: B, other: C, other2: D } = obj;
console.log(A);//ジャンプ
console.log(B);//集英社
console.log(C);//{key:'hoge'}
console.log(D);//undefined

『key:value』同士を代入しあった場合どうなるのか確認しました。

すると、

代入先と代入元のkey名だ同一の場合、代入先のvalueに代入されることが分かりました。

これは配列リテラルでの分割代入の場合にIDに対応している所に分割代入しているのと同じです。

まとめ

分割代入について簡単に理解をまとめました。

オブジェクトリテラルはJavaScriptで頻繁に出てくるリテラルで分割代入はしっかり理解しておきたいです。