【JavaScript】変数について【var let constの違い】

2020-06-18 2020-09-05

こんにちは。変数の宣言で皆さん、var、let、constそれぞれどの状況で使用していますか？
私自身、特にvarとletについては良く分からなかったので、今回を機に調べてまとめてみました。
良かったら参考にしてください。

1 ローカルスコープとグローバルスコープ
2 変数宣言キーワード
3 まとめ

ローカルスコープとグローバルスコープ

まずは、ローカルスコープとグローバルスコープについてです。
スコープとは、変数が参照したり変更できたりと使用できる有効範囲のことを指します。

ローカルスコープはある特定の範囲内でのみ、有効となるスコープです。特定のとは、これから出てくる関数やブロックなど、括られた範囲を指します。

グローバルスコープは名の通りどこからでも使用できる有効範囲を持つスコープです。どこでも使用することが可能なのでとても便利であるように感じますが、意図しない箇所で上書きしてしまったり、利用してしまったりすることで、不具合の原因となってしまいます。

そのため、できる限り変数のスコープは小さくすることが読みやすいコードにつながると言われています。

本記事では特にvarとletに関してスコープを意識して使い分けていくことをおすすめしています。

変数宣言キーワード

varについて

ES2015以前より使用できる変数宣言キーワード
スコープは関数内部
関数内のどこで宣言しても、先頭で定義した扱いとなる
ifやfor文内で宣言した変数でも、同じ関数内であれば使用できる

// 例
function Sample() {
    for(let i=1;i<=3;i++){
        console.log(i)
    }
    
    // ブロック外なので、アクセスできずエラー
    console.log(i)
}

letについて

varとの主な違いはスコープの範囲です。
varではif文やfor文のようにブロック内で宣言した変数でも、同じ関数内であれば使用することができますが、letではブロック内で宣言した変数はブロックの範囲を超えると使用することができません。

ES2016以降より使用可能（IE9等、少し古いバージョンのブラウザだと動かない場合がある）
スコープは関数内部、もしくはブロック内部
varと比べて、よりスコープを限定することができる

// 例
function Sample() {
    var sample1 = 1;
    // var i;

    // 再代入可能
    sample1 = 3;

    for(var i=1;i<=3;i++){
        console.log(i)
    }
    
    // 同じ関数内なので、アクセスできる
    console.log(i)
    
    console.log(gloval_hensu)
}

// 関数外なので参照できず、エラー
console.log(i)

constについて

constはこの3つの中だと、一番違いが分かりやすいと思います。
他2つとの大きな違いは、再代入（変更）ができないところです。
そのため、定数として利用することができます。

ES2016以降より使用可能（IE9等、少し古いバージョンのブラウザだと動かない場合がある）
スコープは関数内部、もしくはブロック内部
再代入ができない（定数扱いとなる）
宣言時に必ず値を代入する必要がある。
（宣言のみはできない）

// 例
// 宣言時に値を代入していないので、エラー
const sample1;

const sample2 = "test2";
const sample3 = "test3";

// 代入できないので、エラー
sample3 = "sample3";

if(sample2 === "test2"){
    const sample4 = "test4";
}

// sample4はブロック内で宣言されているため、
// ブロックの外で使用し、スコープからはみ出ているのでエラー
console.log(sample4);