読者です 読者をやめる 読者になる 読者になる

ushumpei’s blog

生活で気になったことを随時調べて書いていきます。

javascriptで波括弧を使ってconst値に分割代入

こんにちは。

クロスプラットフォームのデスクトップアプリがhtml、cssjavascriptで作れてしまうフレームワーク「Electron」をちょっと触ってみようと思ったのですが、「Hello, world」する前に気になったことをメモします。 (Electronとはあまり関係ない内容になっています)

疑問

とりあえずElectronの環境を整えました。

mkdir myapp
npm init -y
cd myapp
npm install electron-prebuilt --save-dev

あとは、Quick Start - Electronを参考に進めていきました。

ウィンドウを表示したり、閉じた時の挙動を制御するシステム系の設定をindex.jspackage.jsonmainプロパティで指定したファイル)に記述するのですが、いざコピペしてやろうと思ってサイトの内容を読んでいるといきなり3行目に以下の記述を見かけました。

const electron = require('electron');
// Module to control application life.
const {app} = electron;
...

constは定数定義で、ES6から使えるらしい、ということは知っていたのですが、

この波括弧{app}はなんなんだ?と思いました。

知らないと恥ずかしいのかもしれないので、いろいろ試してみました。

(以下ごちゃごちゃしています。結論はタイトルに書いてあります)

スコープ

とりあえずconstは関係ない、スコープの問題だろうと当たりをつけて以下のコードをchromeのコンソールで実行しました。

{hoge} = {hoge:'hogehoge'};
console.log(hoge);

確かにこれでもhogehogeがコンソールに出力されます。

constがどうとかではなく、左辺に波括弧の中にオブジェクトのプロパティを記述すると、右辺のオブジェクトが持っているプロパティの値を取り出すことができるという動きです。

左辺の波括弧の中のhogeが外側から参照できること、左辺のhogeに右辺の値が入っていることについて考えなければと思い、javascriptのオブジェクトの代入に関して調べてみました。

javascriptにおいてはオブジェクト型の代入は参照渡しになる、ということを聞いてもしかすると、と考え以下のコードを試してみました。

obj1 = {p1:{c:1}};
p1 = obj1.p1;
p1.cc = 2;
console.info(obj1);
console.info(p1);

obj2 = {p2:{c:1}};
var {p2} = obj2;
p2.cc = 2;
console.info(obj2);
console.info(p2);

二種類の方法を試したのですが違いはありませんでした。 もしかすると波括弧で囲えば値渡しになるとか考えたのですが、それは間違っていました。。。

感想

そもそもなんでこう書かれているかを探るために、Electronのドキュメントのgithubリポジトリをみてみました。

この記法に変更された時のプルリクエストを見ると、Destructing assignmentというコミットメッセージを発見しました!

ググってみると次のページが見つかります。

分割代入 - JavaScript | MDN

分割代入、という構文だったんですね、初めて知りました。

今日はここにたどり着くまでで消耗してしましました...