supermannerの落書き

基礎からおさらい。おさらいが何よりも大事なのです。ふわっとした知識、撲滅!

ECMAScript6のブロックスコープで遊んでみた

先日, ECMAScriptのイベントに遊びに行きました!
そこで色々と話しを聞いて興味を持ったので自分でも新機能をちょいちょい試しています。

今回は便利だなーとおもった構文の一つ、「let命令」で特にいいなとおもったものを試しました。

従来の即時関数を使ったテクニック

Javascriptのスコープは、

  • グローバルスコープ
  • 関数スコープ

のみなので、前回の記事のようなスコープをちょっと気を付けてやる必要がありました。tofumental.hateblo.jp

ここで、汚染を防ぐために即時関数でカプセル化っぽくしてあげるのが定石ぽいです。
(私はガンガンのJSerじゃないので, 何が定石かは調べつつですが)
参考になるのはこちらのQiitaqiita.com

var hogehoge = (function (sweets, drink) {
    var myBody = sweets + drink;
    console.log(myBody);
    return myBody;
}('odango', 'matcha'))

console.log(myBody);

myBodyはnot definedになり、グローバルの変数は汚染されてないことになります。
この処理を即時関数化せず、だらだらっっとかいてると当然のごとく汚染されます。

ECMAScript6での記法

ここで、ECMAで書くとどうなるかというと

{
    let Mybody = 'dango' + 'matcha';
    console.log(Mybody);
}

console.log(Mybody);

以上!スコープでくくってやるだけで同じ効果が得られます!

おまけ

今回の実行コマンド

 babel-node hogehoge.js --presets es2015

babelを入れて実行しましたよー(^O^)

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!