さくっと学ぶ!! ES2015(ES6)入門 〜Destructuring 編〜

こんにちは。 メゾンマークでフロントエンドを担当している、k-taroです。

第５回目は分割代入（Destructuring）をみていきます！

概要

分割代入とは何かは以下のmozilaの説明が分かりやすいです。

分割代入(Destructuring assignment)構文は、配列かオブジェクトからデータを取り出して別個の変数に代入することを可能にする JavaScript の式です。 引用 分割代入 - JavaScript | MDN

では早速ソースをみてみましょう！

ES6

// 配列
const arr = [1, 2];
const [ a, b ] = arr;
console.log(a); // 1
console.log(b); // 2

// オブジェクト
const obj = {c: 3, d: 4};
const { c, d } = obj;
console.log(c); // 3
console.log(d); // 4

基本的な使い方はこんな感じです！
配列の場合は添え字に合わせて、オブジェクトの場合はkeyに合わせて値を変数にいれることができます。
ReactのサンプルでもpropsをDestructuringをつかって値を受け取ってますね！
特別な機能感はないですが、よりシンプルにかけるようになった！といった感じです。

解説

Default Parameters

分割代入で値を受け取る際に、デフォルト値を指定する方法です。
機能はES5の時と同じですが、よりシンプルに分かりやすくかけるようになりました。

ES6

var {a=1, b=2} = {a: 3};
console.log(a); // 3
console.log(b); // 2

Rest Parameters

引数に可変長の値を受け取ることができます。
値は配列になります。
Rest Parametersは最後に記述しないとエラーになってしまうので注意してください。

ES6

function hoge(a,...arr) {
console.log(a);
console.log(arr);
}
hoge(1,2,3); // 1, [2, 3]

まとめ

・新しい機能感はないけど、短く分かりやすくかけて便利！
・Default ParametersやRest Parametersと組み合わせて書くと更に実用的に！

それではまた！！