Corredor

ウェブ、プログラミングの勉強メモ。

ES2015 (ES6) で覚えておきたい構文:分割代入

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

ES2015 になって、分割代入という書き方が増えた。配列やオブジェクトの要素を取り出して、個別の変数に代入できるというものだ。

// オブジェクトの分割代入
const obj = {
  a: 1,
  b: 2,
  c: 3
};
// このように obj から各要素を取り出せる
const { a, b, c } = obj;
console.log( a );  // => 1

これは配列でも可能。

// 配列の分割代入
const arry = [1, 2, {hoge: 3}];
// このように分割代入する
const [a, b, c] = arry;
console.log( a );  // => 1
console.log( c );  // => {hoge: 3}

exportimport 構文の時に名前付き Export を取得していたのも分割代入とみなせる。Named Export が以下のようなオブジェクトを返していると思えば良い。

export const hoge = 1;
export const fuga = 2;
// これは以下のようなオブジェクトになっているとみなすと分かりやすい
// {
//   hoge: 1,
//   fuga: 2
// }

// 分割代入の要領で取得する様子
import { hoge, fuga } from 'myScript';

オブジェクトの各要素を取り出す時に案外使えるのでオヌヌメ。