javascriptで波括弧を使ってconst値に分割代入
こんにちは。
クロスプラットフォームのデスクトップアプリがhtml、css、javascriptで作れてしまうフレームワーク「Electron」をちょっと触ってみようと思ったのですが、「Hello, world」する前に気になったことをメモします。 (Electronとはあまり関係ない内容になっています)
疑問
とりあえずElectronの環境を整えました。
mkdir myapp npm init -y cd myapp npm install electron-prebuilt --save-dev
あとは、Quick Start - Electronを参考に進めていきました。
ウィンドウを表示したり、閉じた時の挙動を制御するシステム系の設定をindex.js
(package.json
のmain
プロパティで指定したファイル)に記述するのですが、いざコピペしてやろうと思ってサイトの内容を読んでいるといきなり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
というコミットメッセージを発見しました!
ググってみると次のページが見つかります。
分割代入、という構文だったんですね、初めて知りました。
今日はここにたどり着くまでで消耗してしましました...