この記法の意味は?

Question

下記のページにこのようなコードがあります。
https://github.com/tmpvar/jsdom

const { JSDOM } = jsdom;

この、変数名を{ }で囲むのはどういう記法なのでしょうか?
ためしに下記のようなコードを書いて、ブラウザでJavaScriptとして、コマンドラインでNode.jsとして実行してみましたが、どちらも結果は同じでした。
barはundefinedとなります。

const foo = 'FOO';
const { bar } = 'BAR';
console.log(foo); // FOO
console.log(bar); // undefined

しかし、上のリンクのnpmパッケージの場合はundefinedとはなりません。
この記法はnpm独特のものなのでしょうか?

var { JSDOM } = require("jsdom");
console.log(JSDOM); // [Function: JSDOM]

Answer 1

オブジェクトの分割代入(Destructuring assignment)です。ES2015で追加された比較的新しい記法ですね。

このように変更すればお使いのブラウザにもよりますが動くと思いますよ。

const foo = 'FOO';
- const { bar } = 'BAR';
+ const { bar } = { foo: 'foo', bar: 'BAR' };
console.log(foo); // FOO
console.log(bar); // BAR

この例で言えば右辺の { foo: 'foo', bar: 'BAR' } にあるbarというプロパティの値を定数barに代入するという意味になります。

Comments

[sutara79]

全く知りませんでした…。ES2015の記法だったんですね。
ありがとうございました。

Answer 2

var obj = {"foo": "foo's value", "bar": "bar's value"};
var { foo } = obj;
console.log(foo); // => "foo's value"

みたいなことが出来ます。

Comments

[sutara79]

ありがとうございました。
そういう意味だったんですね。