JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのconstとletの違いを徹底解説！ブロックスコープ変数の基本と使い方

JavaScriptにおけるconstとletの基本

const と let は、ES2015（ES6）で導入された変数宣言用のキーワードです。どちらもブロックスコープ（波括弧 { } で囲まれた範囲）に対応しているのが特徴で、関数スコープしか持たなかった従来の var とは異なる挙動を示します。

両者の大きな違いは再代入の可否です。letで宣言した変数は後から何度でも値を再代入できますが、constで宣言した変数は再代入しようとするとエラー（TypeError）が発生します。

letとconstの主な違い

項目letconst
再代入可能不可（エラー発生）
スコープブロックスコープブロックスコープ
宣言時の初期化省略可能必須

なお、constで宣言した場合でも禁止されるのは変数そのものへの再代入であり、オブジェクトや配列のプロパティ・要素の変更は可能である点に注意してください。

サンプルコード：letとconstの動作確認

以下のコードは、ボタンをクリックするとlet変数「a」とconst変数「b」の再代入を試みるデモです。letの再代入は成功して画面に反映されますが、constの再代入はエラーとしてキャッチされ、その内容が表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Const and let in JavaScript</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to reassign const and let value</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let a = 22;
    const b = 44;
    sampleEle.innerHTML = "let a = " + a + " ";
    sampleEle.innerHTML += "const b = " + b;
    document.querySelector(".Btn").addEventListener("click", () => {
        a = 99;
        resEle.innerHTML = "Reassigning a = " + a + " ";
        try {
            changeB();
        }
        catch (err) {
            resEle.innerHTML += "Reassigning b = " + err;
        }
    });
    function changeB() {
        b = 22;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptのconstとletの違いを徹底解説！ブロックスコープ変数の基本と使い方

続いて、「CLICK HERE」ボタンをクリックすると −

JavaScriptのconstとletの違いを徹底解説！ブロックスコープ変数の基本と使い方

このように、let変数「a」は99へ正常に再代入される一方で、const変数「b」への再代入は「TypeError: Assignment to constant variable」というエラーになります。これにより、constが持つ「変数への再束縛を許さない」という特性を実際に確認できます。


  1. JavaScriptのSymbol.isConcatSpreadableシンボルとは？使い方を実例付きで解説

    Symbol.isConcatSpreadable は、Array.prototype.concat() メソッドで配列を連結する際に、ネストされた配列や配列状のオブジェクトを「個々の要素に展開するかどうか」を指定できる、ウェルノウンシンボルのひとつです。通常、concat() は引数として渡された配列を自動的に展開し、各要素を連結先の配列へ追加します。しかし、対象のオブジェクトに対して Symbol.isConcatSpreadable を false に設定すると展開が無効になり、配列全体がひとつの要素として連結されます。逆に、arguments オブジェクトのような配列状オブジェクトはデ

  2. JavaScriptのletキーワードとは？ブロックスコープ変数の宣言方法を解説

    letキーワードとは 2015年（ECMAScript 2015／ES6）に導入されたletキーワードは、ブロックスコープを持つ変数を宣言するためのものです。letで宣言した変数は、それを囲む波括弧 { } の内側でのみ有効となり、ブロックの外からアクセスしようとするとエラーが発生します。 varとの主な違い スコープ： varは関数スコープですが、letはブロックスコープになります。 再宣言： 同じスコープ内であればvarによる再宣言は可能ですが、letで再宣言するとSyntaxErrorになります。 宣言前の参照： letで宣言した変数は、宣言より前にアクセスするとReferenceE