3.4 let と constのブロックスコープによる解決

現在の JavaScript では、var の関数スコープ問題を解決するために導入された let と const を使います。
let は再代入可能な変数を、 const は定数（変わらない値）を定義するためのものです。
どちらも、ブロックスコープを持ち、if 文や for 文の { } を抜けた瞬間、その変数は消滅します。

let：変数（再代入可能）

let 変数名 = 値;

凡例：let へ再度代入

let age = 25;
age = 33;

const：定数（再宣言不可）

const 変数名 = 値;

凡例：const へ代入

const path = “project/”;

※一度変数を宣言した後にその変数を使う場合は「let」や「const」を付けません。

ポイント

let は再代入が可能です。（今までの var と同じような形で、計算の時に利用可能）
const は、宣言の際に定数の初期化子が必要であり、同じスコープの中では再宣言できません。(再宣言しようとすると、エラーになります)
ただし const が固定するのは「参照先のアドレス」であり、内容そのものではないため、オブジェクトや配列の中身を操作することは可能です。これは Java の final 修飾子と同じ性質です。
const は、以下のような条件文の中では使用できません。(const は命令でなく、宣言である)
if (true) const a = 1; // シンタックスエラーになる

const が一度使用した変数名を var や let で利用する場合など、ブロックスコープの範囲に注意が必要です。

const MyName = "Kanda"; // グローバルスコープでの const 宣言
alert(MyName); // Kanda が返る
if (MyName === "Kanda") {
    const MyName = "Kanda2"; // if 文ブロック内だけのブロックスコープなのでエラーにならない
    alert(MyName); // Kanda2 が返る
    var MyName = "Kanda2"; // if 文ブロック外の const と var の関数スコープが衝突してシンタックスエラー
｝

3.4.1 let と const のブロックスコープを確認するプログラム

let や const で変数を宣言し、if ブロックの範囲内のみで値が取得できることを確認してみましょう。

ソースフォルダ：public/ch03

ファイル名：block-scope.js

➢ block-scope.html

前項で作った ch03/function-scope.html をコピーし、ch03 にペーストしてください。その際に、ファイル名を block-scope.html に変更します。ファイル内の function-scope.html や function-scope.js の記述も、block-scope.html や block-scope.js に修正します。

➢ block-scope.js

// block-scope.js

if (true) {
    let x = 20;   // letは「ブロックスコープ」を持つ
    const y = 30; // constも「ブロックスコープ」を持つ
    x = 21;       // letは「再代入」が可能
    alert("ブロック内の x: " + x);
    alert("ブロック内の y: " + y);
}

// ブロックの外からはアクセスできません
// alert(x); // エラーになります

実行結果

解説

4 行目から、これまで説明してきた let と const の動きをおさらいする形になっています。最後の 12 行目のコメントアウトを外した上で再度プログラムを動かすと、Google Chrome のデベロッパーツールで、3.2.1 で確認したのと同じ実行時エラーが再び発生しているのが確認できます。let や const の持つブロックスコープがあってこそ、ローカルスコープという概念が JavaScript で実現できたことが確認できると思います。

12: alert(x); // エラーになります

NEXT>> 3.5 スコープチェーン