From the Southern Hemisphere

From the Southern Hemisphere

南半球に移住したプログラマの日々

【JavaScript】var, let, const の違い

JavaScriptのサンプルコードを見ていると変数宣言時のキーワードに var、let、const が使われています。この3つのキーワードの違いって何だろう?と疑問に思ったので、この3つのキーワードの違いについて超ザックリと調べてまとめました。

var

varで宣言した変数は再宣言・再代入が可能。変数のスコープは関数スコープ。関数 one の中でvarで宣言した変数 x は関数スコープなので同じ関数内からアクセスできる。

function one() {

    var x = 0; // 変数 x の宣言
    console.log(x); // 0を出力

    var x = 1; // x の再宣言
    console.log(x); // 1を出力

    x = 2; // x の再代入
    console.log(x); // 2を出力

}

function two(){
    console.log(x); // スコープ内に x が無いのでエラー
}

関数 two は変数 x のスコープの外(変数 x が宣言された関数の外)なので、変数 x にアクセスできない。

let

letで宣言した変数は再宣言は不可、再代入は可能。変数のスコープはブロックスコープ。

function three(){
    let x = 0;
    console.log(x); // 0 を出力
    let x = 1; // 変数 x が宣言済みなのでエラー
    console.log(x); // 0 を出力
    x = 2; // x に再代入 0 を出力
    console.log(x) //2 を出力

    if (true){
        console.log(x); // 2 を出力
        x = 3; // x に再代入
        let y = "a"; // 変数 y を宣言
    }

    console.log(x); // 3 を出力
    console.log(y); // y が宣言されていない(スコープ外)のでエラー
}

function four(){

    console.log(x); // x が宣言されていない(スコープ外)のでエラー

    console.log(y); // y が宣言されていない(スコープ外)のでエラー

}

関数 three 内で定義した変数 x は、そのブロック内にスコープがあるため if文の中もスコープ範囲であること、再宣言ができないことがわかる。関数 fourは変数 x のスコープの外なので変数 x にアクセスできない。

if文の中で定義した変数 y のスコープはif文のブロック内だけなので、その外の関数からはアクセスできない。関数 four からも変数 y にアクセスできない。

const

再宣言、再代入が不可。変数のスコープはブロックスコープ。

function five(){
    const x = 0;
    console.log(x); // 0 を出力
    const x = 1; // const は再宣言不可なのでエラー
    console.log(x); // 0 を出力
    x = 2; // const は再代入不可なのでエラー
    console.log(x); // 0 を出力
    if (true){
        console.log(x); // 0 を出力
        const y = 3; 
    }
    console.log(y); // y が宣言されていない(スコープ外)のでエラー
}

function six(){
    console.log(x); // x が宣言されていない(スコープ外)のでエラー
    console.log(y); // y が宣言されていない(スコープ外)のでエラー
}

const で宣言した変数のスコープは let で宣言した変数と同じブロックスコープなので、関数 five 内で定義した変数 x は、 if文の中もスコープの範囲内であること、再宣言ができないことがわかる。また関数 sixは変数 x のスコープの外なので変数 x にアクセスできない。

同様にif文の中で定義した変数 y のスコープはif文のブロック内だけなので、そのスコープ外の関数からはアクセスできない。関数 six からも変数 y にアクセスできない。

最後に

以上、var、let、constの違いについて超ザックリとまとめてみました。この記事がお役に立てたら嬉しいです。

読者さん募集中

記事を気に入ったら読者登録をお願いします!