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

JavaScriptで定数を作成する方法とは？constキーワードの使い方を実例付きで解説

JavaScriptで定数を作成するには、constキーワードを使用します。constで宣言された変数は、一度値を代入すると後から再代入することができません。もし再代入を試みると、TypeErrorエラーが発生します。

定数作成のコード例

以下は、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>Click the above button to try changing const value</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>

実行結果

上記のコードを実行すると、まず画面に定数aの初期値である「a = 33」が表示されます。

JavaScriptで定数を作成する方法とは？constキーワードの使い方を実例付きで解説

続いて、「CLICK HERE」ボタンをクリックして定数の値を44に変更しようとすると、try〜catch文によってエラーが捕捉され、画面に以下のようなエラーメッセージが表示されます。

JavaScriptで定数を作成する方法とは？constキーワードの使い方を実例付きで解説

constを使用する際のポイント

  • 再代入不可：constで宣言した変数に新しい値を代入しようとするとTypeErrorが発生します。
  • 宣言時の初期化が必須：constは宣言と同時に値を代入する必要があります。値なしで宣言するとSyntaxErrorになります。
  • ブロックスコープ：letと同様にブロックスコープを持ち、宣言されたブロック内でのみ有効です。
  • オブジェクト・配列の扱いに注意：constは変数への再代入を防ぐだけであり、オブジェクトや配列の中身（プロパティや要素）の変更は可能です。完全な不変性が必要な場合はObject.freeze()などを併用しましょう。

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

  1. 【初心者向け】JavaScriptでJSONオブジェクトを作成する方法をサンプルコード付きで解説

    JavaScriptでは、波括弧 { } を使ったオブジェクトリテラルを記述するだけで、JSON（JavaScript Object Notation）と同じ「キーと値のペア」構造を持つオブジェクトを簡単に作成できます。JSONは軽量なデータ交換フォーマットであり、API通信や設定ファイルなど、Web開発のさまざまな場面で利用されています。 以下は、JavaScriptでJSONオブジェクトを作成し、ボタンをクリックするとその内容を画面に表示するサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="ja">

  2. 【初心者向け】JavaScriptのfinallyステートメントをサンプルコード付きでわかりやすく解説

    finallyステートメントは、エラーが発生したかどうかにかかわらず、tryブロックとcatchブロックの処理が完了した後に必ず実行されるブロックです。ファイルのクローズやデータベース接続の切断など、処理の成功・失敗に関係なく必ず実行したい後処理（クリーンアップ処理）を記述する際に非常に便利です。finallyの基本構文try { // エラーが発生する可能性のある処理 } catch (err) { // エラー発生時に実行される処理 } finally { // エラーの有無にかかわらず必ず実行される処理 }サンプルコード以下は、JavaScriptにおけるfinallyステー