JavaScriptのES6について、ブロック（ブロックスコープ）についてもう少し触れておこうと思います。
変数宣言のlet、constについてはブロックスコープで、varの関数スコープとの違いを確認しました。
ブロック内に定義した変数はブロックの外からは利用できないというものです。データのプライバシーを保護する方法でもあります。
このブロックの性質についてもう少し見ていきましょう。
ブロックの使用
このブロックですが、if文、for文、while文において波括弧{}で囲まれた部分のことであることはすでに理解できていると思います。
ただ、このブロックはこれらのステート文での利用に限りません。
ES6のブロック
次のように波括弧{}だけでブロックを作ることもできます。
{
const a = 10;
let b = 20;
}
console.log(a + b);このように、単に変数を波括弧で囲っているだけです。
console.log()で、変数の和を出力しようとしていますが、結果は次のようにエラーになります。
これはブロックの外から変数を利用しようとしたためで、ブロックスコープであることがわかります。
ES5のIIFE
このブロックの使い方は、ES5で扱った即時実行関数式（IIFE）に似ています。
IIFEを使って同じようなコードを書いてみましょう。
(function() {
var c = 100;
})();
console.log(c);無名関数の全体を丸括弧()で囲って、そのあとに丸括弧()つけることで関数表現にしてメソッドを呼び立つ形です。
console.log()で変数を呼び出していますが、即時関数にするとブロックスコープになるので次のようにエラーになります。
このようにES5のIIFEとES6のブロックは似たような機能になっていて、変数の競合を防義、外から変数にアクセスすることができません。
なお、最初のブロックのコードを次のように変えて見るとどうでしょうか？
{
const a = 10;
let b = 20;
var c = 100;
}
// console.log(a + b);
console.log(c);変数cをここではvarで宣言しています。
すでに確認したようにa、bはブロックの外からは利用できません。const、letで宣言しているためです。
このcはどうでしょうか？実行するとこうなります。
ブロックの外から利用できています。varで宣言している変数はブロックスコープではないからです。
まとめ
JavaScriptのES6のブロック（ブロックスコープ）について扱いました。
変数宣言のlet、constについてはブロックスコープですが、if文、for文、while文で使う波括弧{}の部分だけがブロックという訳ではなく、波括弧{}単体でブロックを作ることができます。
ブロック内で、let、constで宣言して変数はブロックの外からは利用できません。
このブロックの性質は、ES5のIIFEとよく似ています。
