f:id:utouto97:20210704222353j:plain

JavaScriptの変数・定数

JavaScriptにもほかの言語同様に変数と定数があります。
今回は、その変数と定数の宣言方法をみていきます。

変数の宣言はいくつか方法があります。
それらの違いで重要なものとして、再代入と再定義があります。

varとletとconstの比較

JavaScriptの変数・定数の宣言方法の違いで、再代入と再定義が重要になってきます。

再代入
再代入可能は、その変数への代入が何度でも許されていることになります。
逆に、再代入不可は、その変数への代入は1度のみとなります。

再定義
再定義可能は、その変数名で複数回の変数定義ができることになります。
逆に、再定義不可は、その変数名での変数定義は一度きりになります。

変数の定義の話はスコープが関わってきますが、ここではスコープについては触れません。

var

JavaScriptで変数を宣言する方法の一つ目はvarを使うことです。

varを使って変数を宣言した場合、再代入可能・再定義可能となります。

var i = 0;
i = 2; // 再代入
var i = 2; // 再定義

再定義可能ですので、同じ変数名で二重に定義してしまい、エラーの原因となりやすいので、注意が必要です。

また、varによる宣言には巻き上げという挙動があります。

var 宣言は、現れる場所に関係なく、コードを実行する前に処理されます。これは巻き上げと呼ばれており、後述します。

↑のように書かれています。
コード実行前に処理されることを念頭に置いておく必要があります。

let

JavaScriptで変数を宣言する方法の二つ目はletを使うことです。

letを使って変数を宣言した場合、再代入可能・再定義不可となります。

let i = 0;
i = 2; // 再代入
let i = 2; // エラー：再定義

letでは、巻き上げの問題は解消されています。

const

JavaScriptで定数を宣言する方法はconstを使うことです。

constを使って変数を宣言した場合、再代入不可・再定義不可となります。
定数ですので、もちろん値の書き換えはできません。（再代入不可）

const i = 0;
i = 2; // エラー：再代入
const i = 2; // エラー：再定義

定数は再代入（後からの変更）ができないため、宣言に初期化をすることが必須となります。

定数constでも、巻き上げの問題は解消されています。

一つの例として、forループの中で、setTimeoutしてみます。

このとき、ループ変数をvarとletでそれぞれ宣言してみます。

for(var i = 0; i < 3; i++) {
    setTimeout(function(){ console.log(i); });
}

varで宣言した場合、結果として3が三つ表示されます。

for(let i = 0; i < 3; i++) {
    setTimeout(function(){ console.log(i); });
}

letで宣言した場合、結果として0と1と2が表示されます。

終わり