【Javascript】変数の種類 (var, let, const)

2022年2月2日2022年2月8日 souki202 変数

Javascriptで変数を宣言する際は、var、let、constの3種類から選択できます。

それぞれの種類の違いをここで説明していきます。

1 var
- 1.1 なぜvarは使わないほうが良いか
2 let
3 const
4 どの種類を使うべきか
5 まとめ

var

varは、どこかで宣言されていれば、そのファイル内ならどこで使用してもエラーになりません。

if (!a) console.log(a);
if (a == 5) {
    var a = 100;
}

undefined

また、再宣言が可能で、再宣言されると値は上書きされます。

var a = 10;
var a = 20;
var a = 100;
console.log(a);

また、宣言時のスコープは無視されます。

a = 5;
if (a == 5) {
    var a = 100;
}
console.log(a);

まだ宣言されていない変数を使ってもエラーではないところがまず問題ですが、スコープを無視していることが上の例からも分かります。

なぜvarは使わないほうが良いか

上で出た3つの特徴によるものです。

保守性の高いプログラムには、制約を強めて余分な操作ができないようにするというのが基本です。しかし、varはそれとは真逆の、制約なんて無いようなものです。

どこかで宣言があればどこで使ってもエラーにならない

この仕様は、別の変数を参照しても気が付かない、気がついたら値が変わっているという問題が発生する可能性が高くなります。

つまり、他言語でグローバルスコープに変数を置かないほうが良いのと同様の理由です。

変数のスコープが無視される

どのブロックで宣言しても、必ずグローバルスコープになります。そのため、使えない場所なはずでも使えるという問題があります。

これはバグや可読性低下の温床です。

再宣言ができる

上のスコープが無視される問題と相まって、いつの間にか変数が上書きされているリスクが増加します。

let

他の言語の変数と同様の挙動を取ります。

let a = 5;
if (a == 5) {
    let a = 100;
}

// if文内のものとはスコープが違う
console.log(a);

変数は再宣言できません。

let b = 0;
let b = 10; // SyntaxError: Identifier 'b' has already been declared

巻き上げもありません。

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 100;

つまり普通の変数です。その変数自体に代入するのなら、letを使うべきです。

const

letは変数自体の書き換えが可能ですが、constではそれが禁止されます。

constの重要な点として、オブジェクト型のように変数に参照が代入される場合、参照先の本体は自由に代入できます。

const a = 100;
a = 200; // TypeError: Assignment to constant variable.

const a = [1, 2, 3];
a[1] = 10; // OK constだが、中身は書き換え可能
a = [4, 5, 6]; // TypeError: Assignment to constant variable.

class Hoge {
    constructor() {
        this.fuga = 100;
    }
}

const hoge = new Hoge();
hoge.fuga = 500; // OK
hoge = new Hoge(); // Uncaught TypeError: Assignment to constant variable.

どの種類を使うべきか

上の特性を踏まえた上で、変数に代入しないならconstです。まずはconstで宣言し、書き換える場所が出てきたらletに変更します。

varは99.99%使いません。

まとめ

変数を宣言する際は、最も制約が強いconstを軸として宣言するべきです。もしconstで無理な場面が出てきたらletに切り替えます。

varは基本的に何が合っても使用しないようにしましょう。

var