【JavaScript】(ES6)ブロックとIIFE(即時実行関数式)

JavaScript
スポンサーリンク

JavaScriptのES6について、ブロック(ブロックスコープ)についてもう少し触れておこうと思います。

変数宣言のlet、constについてはブロックスコープで、varの関数スコープとの違いを確認しました。

【JavaScript】(ES6) letとconstを使った変数宣言
avaScriptのモダン仕様であるECMAScript 6(ES6)について、ここでは変数宣言のletとconstについて扱います。constは定数で変更不可、letは変数の重複を許さずブロックスコープで参照するという特徴があります。

ブロック内に定義した変数はブロックの外からは利用できないというものです。データのプライバシーを保護する方法でもあります。

このブロックの性質についてもう少し見ていきましょう。

スポンサーリンク

ブロックの使用

このブロックですが、if文、for文、while文において波括弧{}で囲まれた部分のことであることはすでに理解できていると思います。

ただ、このブロックはこれらのステート文での利用に限りません。

ES6のブロック

次のように波括弧{}だけでブロックを作ることもできます。

このように、単に変数を波括弧で囲っているだけです。

console.log()で、変数の和を出力しようとしていますが、結果は次のようにエラーになります。

これはブロックの外から変数を利用しようとしたためで、ブロックスコープであることがわかります。

ES5のIIFE

このブロックの使い方は、ES5で扱った即時実行関数式(IIFE)に似ています。

【JavaScript】即時実行関数式(IIFE)
JavaScriptにおける即時実行関数式(Immediately Invoked Function Expression; IIFE)を扱います。通常の関数定義の呼び出しと違い、匿名関数を括弧で囲んで関数とし、即時呼び出しができます。

IIFEを使って同じようなコードを書いてみましょう。

無名関数の全体を丸括弧()で囲って、そのあとに丸括弧()つけることで関数表現にしてメソッドを呼び立つ形です。

console.log()で変数を呼び出していますが、即時関数にするとブロックスコープになるので次のようにエラーになります。

このようにES5のIIFEとES6のブロックは似たような機能になっていて、変数の競合を防義、外から変数にアクセスすることができません。

なお、最初のブロックのコードを次のように変えて見るとどうでしょうか?

変数cをここではvarで宣言しています。

すでに確認したようにa、bはブロックの外からは利用できません。const、letで宣言しているためです。

このcはどうでしょうか?実行するとこうなります。

ブロックの外から利用できています。varで宣言している変数はブロックスコープではないからです。

スポンサーリンク

まとめ

JavaScriptのES6のブロック(ブロックスコープ)について扱いました。

変数宣言のlet、constについてはブロックスコープですが、if文、for文、while文で使う波括弧{}の部分だけがブロックという訳ではなく、波括弧{}単体でブロックを作ることができます。

ブロック内で、let、constで宣言して変数はブロックの外からは利用できません。

このブロックの性質は、ES5のIIFEとよく似ています。

JavaScript
スポンサーリンク
CodeGraffitiをフォローする

コードグラフィティ:とにかく進め!独学プログラミング – Python入門から始めてどこまで学べる?
タイトルとURLをコピーしました