JavaScript

JavaScriptの変数名が中括弧で囲まれた変数宣言

はじめに

GitHub社が開発しているElectronを導入してデスクトップアプリを作成していたのですが、以下のような今まで見たことのない不思議な記法を発見したのでメモを残します。

const {app} = require('electron');

コードの簡略化

上記した方法は分割代入というものです。

先程のコードの本題の分割代入とは関係ない部分の話をします。

まずconstは定数宣言であり、ここでは普通の変数宣言varでも大丈夫です。

次にrequireはnpmでンストールした外部モジュールの読み込みができます。

requireをもう少し詳しく知りたい人はこちらの記事などを参照してください、

requireはオブジェクト返ってきています。

つまり、以下と同様のことです。

// なんらかのオブジェト
var origin = {a:1, b:1, c:1}
// 変数名を中括弧を使って代入
var {a} = origin;

分割代入

Mozillaのリファレンスでは以下のように書かれています。

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

今回の例で言いますと、配列やオブジェクトの特定の部分だけを代入するといった感じです。

たとえば以下のようなコードの場合、次のようになります。

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

このようにオブジェクトに対して分割代入を用いた場合、変数名と同じ名前のプロパティのプロパティ値を代入してくれます。

もっと詳しい情報はこちらのサイトを参照してください。