【JavaScript】変数、型の違い【var let const】

JavaScript

2021.08.16 2021.08.12

こんにちは。

変数の宣言でvar、let、constそれぞれどの状況で使用していますか？

私は特にvarとletについて違いが良く分からなかったので、この機会に調べてまとめてみました。

良かったら参考にしてください！

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

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

まずは、ローカルスコープとグローバルスコープについてです。

スコープとは、変数が参照したり変更できたりと使用できる有効範囲を指します。

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

グローバルスコープは名の通りどこからでも使用できる有効範囲を持つスコープです。

どこでも使用することが可能なので、とても便利であるように感じますが
意図しない箇所で上書きしてしまったり、利用してしまったりすることで
不具合の原因となってしまいます。

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

本記事では特に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つの中だと、一番特徴が分かりやすいです。
それは再代入（変更）できないため定数として扱われます。

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

定数とは、一度宣言されると値が固定され変更できない値を指します。

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

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

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

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

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