👻

【JS】javascriptのvar , let ,constの違い

2024/05/28に公開

調べたきっかけ

varは確かいま非推奨で、constが定数...?
というような曖昧な理解で使ってしまっていたので、どういう時にどれをつかうべきなのかきちんと理解したく調べてまとめました

そもそもvar,let,constってなに?

変数の宣言方法。どれを変数の前につけて宣言するかによって変数の扱いが変わる!

3つの違い

①varは再宣言ができる。let、constはできない。

var test;
var test;//エラーでない
let test;
let test;// エラー
const test1;
const test1;// エラー

②var、letは再代入ができる。constはできない。

let test1 = 1;
test1 = 2; //エラー出ない
var test2 = 1;
test2 = 2;//エラー出ない
const test3 = 1;
test3 = 2;//エラー

③varは関数スコープ、let、constはブロックスコープ

関数スコープとは?

まず、スコープとは実行中のコードから参照できる範囲をいいます。
関数スコープとは、関数内で宣言された変数は、関数全体で有効になるということです。
関数の外では有効ではないです。

function exampleFunction() {
    var x = 10; // xはexampleFunction全体で有効

    if (true) {
        var y = 20; // yもexampleFunction全体で有効
    }

    console.log(x); // 10
    console.log(y); // 20
}

exampleFunction();
console.log(x); // エラー: 関数外のためxは定義されていないことになる
console.log(y); // エラー: 関数外のためyは定義されていないことになる

ブロックスコープとは?

function exampleFunction() {
    let x = 10; // xはexampleFunction全体で有効

    if (true) {
        let y = 20; // yはifブロック内でのみ有効
        const z = 30; // zもifブロック内でのみ有効

        console.log(x); // 10
        console.log(y); // 20
        console.log(z); // 30
    }

    console.log(x); // xはスコープ内なので10
    console.log(y); // エラー: 関数外のためyは定義されていないことになる
    console.log(z); // エラー: 関数外のためzは定義されていないことになる
}

exampleFunction();
console.log(y); // もちろんエラー!

varは非推奨

varは再代入ができる、再宣言ができる、関数スコープという特徴から、

  • 再代入、再宣言ができるのでうっかりかきかえてもエラーが出ない
  • ブロックスコープが使えないので使える範囲を限定しにくい。

ということで,const,letの使用が推奨されています。

また、何もつけなくて変数を定義することはできます。
その場合は関数スコープすらなく、再代入もできるのでもちろん非推奨です。
letかconstを必ずつけましょう!

まとめ

基本はconstで宣言する!
再代入が必要なとき(for文など)だけletを使う

Discussion