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

JavaScriptで変数を定義する3つの方法｜let・var・constの違いを徹底解説

JavaScriptで変数を定義する方法には、「let」「var」「const」の3種類があります。それぞれスコープ（有効範囲）や巻き上げ（ホイスティング）の挙動が異なるため、特徴を理解して適切に使い分けることが重要です。

3つのキーワードの特徴

1. let ― ブロックスコープの変数

2015年（ES2015）に導入されたキーワードで、ブロックスコープを持つ変数を宣言できます。let で宣言された変数は巻き上げの対象とならないため、宣言前にアクセスするとエラーになります。

2. var ― 関数スコープの変数

従来から使われているキーワードで、関数スコープの変数を作成します。var で宣言された変数は巻き上げられるため、宣言前でもアクセスできてしまう点に注意が必要です。

3. const ― 再代入できない定数

ES2015で導入されたキーワードです。const で宣言した変数は、後から別の値を再代入したり、再宣言したりすることができません。巻き上げの対象にならない点は let と同じです。

サンプルコード：let・var・constを使った変数定義

以下は、JavaScriptで let、var、const を使って変数を定義し、その挙動の違いを確認できるコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScriptでの変数定義</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScriptで変数を定義する</h1>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>
上のボタンをクリックすると、let・const・varで変数を宣言し、それぞれにアクセスします。
</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "a = " + a + "<br>";
        try {
            resEle.innerHTML += "b = " + b;
        } catch (err) {
            resEle.innerHTML += err + "<br>";
        }
        try {
            resEle.innerHTML += "c = " + c;
        } catch (err) {
            resEle.innerHTML += err + "<br>";
        }
        var a = 22;
        let b = 44;
        const c = 99;
        try {
            c = 44;
        } catch (err) {
            resEle.innerHTML += err + "<br>";
        }
    });
</script>
</body>
</html>

実行結果

JavaScriptで変数を定義する3つの方法｜let・var・constの違いを徹底解説

「ここをクリック」ボタンを押すと、次のように表示されます。

JavaScriptで変数を定義する3つの方法｜let・var・constの違いを徹底解説

結果からわかること

  • var の変数 a：宣言前にアクセスしても undefined が返る（巻き上げられるため）
  • let の変数 b：宣言前にアクセスすると ReferenceError が発生する
  • const の変数 c：値を再代入しようとすると TypeError が発生する

このように、var は意図しないバグを生みやすいことから、現代のJavaScript開発では基本的に let と const を使うのが推奨されています。特に、再代入の必要がない変数には const を使うことで、より安全で読みやすいコードになります。

  1. JavaScriptで変数を使ってオブジェクトのキーを動的に設定する方法

    JavaScriptで変数を使ってオブジェクトのキーを設定する方法 JavaScriptでは、ブラケット記法（角括弧 []）を使用することで、変数の値をオブジェクトのキーとして動的に設定できます。ドット記法では変数をキーとして扱うことができないため、動的なキー設定にはブラケット記法が必須となります。 以下に、ユーザーが入力したプロパティ名とプロパティ値をオブジェクトに追加するサンプルコードを示します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="U

  2. JavaScriptで配列を空にする4つの方法【サンプルコード付きで解説】

    JavaScriptで配列を空にする方法は、主に4つあります。それぞれ動作の仕組みや特徴が異なるため、目的に応じて適切な方法を選ぶことが大切です。配列を空にする4つの方法新しい空の配列を代入する：配列変数に、新しく作成した空の配列を代入します。最もシンプルな方法ですが、元の配列を参照している他の変数が残る点には注意が必要です。lengthプロパティを使う：配列のlengthプロパティに0を設定するだけで、すべての要素を削除できます。高速で、元の配列への参照も維持されるため、実務で最もよく使われる方法のひとつです。popメソッドを使う：配列の要素数が0になるまで、popメソッドで末尾の要素を繰り