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

JavaScriptのconst宣言とは？再代入できない変数の基本と使い方を解説

JavaScriptのconst宣言は、値を再代入することも後から再宣言することもできない変数を作成するための構文です。constはES2015（ES6）で導入されました。

const宣言の主な特徴

  • 一度値を代入すると、別の値に再代入することはできません。
  • 同じ名前の変数を同じスコープ内で再宣言するとエラーになります。
  • 宣言時に必ず初期値を代入する必要があります。
  • ブロックスコープ（{}内でのみ有効）を持ちます。

それでは、JavaScriptにおけるconst宣言の実際のコードを見ていきましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1>Const example</h1>
<button class="Btn">CLICK HERE</button>
<p class="sample"></p>
<h3>上のボタンをクリックしてconstの値を変更してみよう</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    const a = 33;
    sampleEle.innerHTML = "a = " + a + "<br>";
    document.querySelector(".Btn").addEventListener("click", () => {
        try {
            a = 44;
        } catch (err) {
            sampleEle.innerHTML += "Error : " + err;
        }
    });
</script>
</body>
</html>

実行結果

JavaScriptのconst宣言とは？再代入できない変数の基本と使い方を解説

「CLICK HERE」ボタンをクリックして、constで宣言した変数の値を変更しようとすると、以下のようにエラーが表示されます。

JavaScriptのconst宣言とは？再代入できない変数の基本と使い方を解説

解説

このサンプルでは、const a = 33;として定数を宣言し、ボタンのクリックイベント内でa = 44;による再代入を試みています。しかし、constで宣言された変数は再代入が許されていないため、try...catchによって「TypeError: Assignment to constant variable」というエラーがキャッチされ、画面に表示されます。

このように、変更されるべきではない値を扱う場合には、constを使用することで意図しない再代入を防ぎ、より安全なコードを書くことができます。

  1. JavaScriptの正規表現における\dと\Dの違いを徹底解説

    \dと\Dの違いとは？JavaScriptの正規表現には、\dと\Dという対になるパターンがあります。この2つはまったく逆の働きをするのが大きな特徴です。\dはテキスト内の数字（0〜9）にマッチし、\Dは数字以外の文字（アルファベット、記号、スペースなど）にマッチします。これらのパターンは、グローバル検索フラグである「g」と組み合わせて使われることが多く、これによりテキスト全体から該当するすべての文字を抽出できます。gフラグを使わない場合、最初にマッチした1文字だけが返される点に注意しましょう。書式1：\d（数字にマッチ）new RegExp(\\d, g);書式2：\D（数字以外にマッチ）n

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

    JavaScriptにおけるconstとletの基本const と let は、ES2015（ES6）で導入された変数宣言用のキーワードです。どちらもブロックスコープ（波括弧 { } で囲まれた範囲）に対応しているのが特徴で、関数スコープしか持たなかった従来の var とは異なる挙動を示します。両者の大きな違いは再代入の可否です。letで宣言した変数は後から何度でも値を再代入できますが、constで宣言した変数は再代入しようとするとエラー（TypeError）が発生します。letとconstの主な違い項目letconst再代入可能不可（エラー発生）スコープブロックスコープブロックスコープ宣言時