JavaScript ES6での{hoge}という書き方について







ES6以降のJavaScriptで

const item = // hogehoge
// いろいろな処理
someMethod(context,{ item })

という書き方が出てくることがあります。

特にVue+Vuexを触っていたら頻出しますが、上記例でのsomeMethhodの第二引数のような、「中括弧で変数名を囲う」書き方が個人的に理解があやふやだったのでまとめておきます。

いきなり結論

{変数名}という書き方で、変数名をキー、変数の中身を値としたオブジェクトが作成されます。

【追記】この記法の名前は、「オブジェクト初期化子」という名前がついているようです。

オブジェクト初期化子 – JavaScript | MDN

Babel REPLで挙動を試す

Babelの公式サイトにREPL(対話的コード実行環境)があるのでそれを利用すると、ローカルに環境を作らなくてもオンラインでES6の言語仕様を確認することができるので便利です。

https://babeljs.io/repl

早速試してみましょう。

変換前のコード

const status="success"

const name="やくそう"
const price=500

console.log({status})

console.log({name,price})

status,name,priceという変数に値を代入して、中括弧で囲ったものをconsole.logで出力しようとしています。

これをBabelでES6->ES5にトランスパイルすると、以下のコードに変換されています。

変換後のコード


"use strict";

var status = "success";

var name = "やくそう";
var price = 500;

console.log({ status: status });

console.log({ name: name, price: price });

{status} という書き方で、statusという変数名がキー、statusの中身が値のオブジェクトに変換されていることがわかります。

中括弧にname,priceと複数指定すると、それぞれの変数名をキー、中身が値のオブジェクトが作成されていることがわかります。余談ですが、Rubyを書いているとこのオブジェクトを「ハッシュ」って言ってしまいそうになります。