【今さら聞けない】JavaScriptの変数・定数 let / var / const の使い分け方

こんにちは、タロウです。

今回はScript系言語の変数・定数にはどれを使用すべきか(違いも含め)にフォーカスを当てて
書きたいと思います！
超初心者向けです。

let / var / const の違いについて

目的とスコープ(=公開範囲)が違います。
さらには上書きできないものや、どこで定義しても使えるものなど割と自由に使えてしまいます。
例えば、if分の中で定義した変数は、if分を抜けると使えなくなります。

変数には”let”、定数には”const”

【let / var / const】の3種類は大きく変数と定数に分けられます。

変数

途中で値の書き換えができる
ものによっては参照している箇所より後で定義してもエラーとならない

処理中に値を保持しておく“器”のことを指します。
中身には文字列、数値、配列、二次元配列などなど、様々な型を入れることができ、
javaScriptは型定義（String hoge = “” のString部分）を意識せずに定義することができます。
※javaは必要、phpは不要・・言語によって違う・・

定数

定義時に値を入れ、それ以降書き換えることができない
主に固定値やループ回数など、誤って書き換えてしまうとまずいものに使用する

Functionの先頭やソースの先頭で定義して、クラス全体で使用することが多いです。
変数同様に様々な型を入れることができますが、文字列か数値がほとんどです。（比較時などの参照ようにしか使えないため）

それぞれの違いについて解説

定数はconst一択ですが、
変数は、ひと昔まで var で定義するのが主流（よく見る）でした。
今は let を使用するのが推奨される風潮があります。

const

＜使用例＞

const hoge = "定数だよ";
console.log(hoge); // 定数だよ　が出力される

定数で定義した値をログ出力しています。

＜エラーとなる例＞

const hoge = "定数だよ";
hoge = "値変えたい"; // constの定義に対して値を入れようとしているため、エラーとなる

定数に対して、後から値を変えようとするとエラーとなります。

let

ブロックスコープを持つ変数宣言方法です。
(ブロックスコープ：if文などの括弧で括られた関数内を対象とした参照範囲のこと)
使用することでスコープを明確化、可読性の良いソースとなり、バグを防ぐことにもつながります。
＜使用例＞

let hoge = "letで定義したよ";
hoge = "値を変えたよ";
console.log(hoge); // 値を変えたよ　が出力される

＜エラーとなる例＞

console.log(hoge);
let hoge = "letで定義したよ"; // 定義が後なのでエラーになる

// -------------------------------
if (true) {
    let fuga = "ifの中で定義";
}
console.log(fuga); // 有効なブロック外になるためエラーにになる

var

関数スコープを持つ変数宣言方法
言わずと知れた変数宣言で、既存システムがある開発現場ではほぼほぼコレが使用されていると思います。
~~僕もついつい手が走ります~~

何が可読性を悪くするのか、letと何が違うのか　を次で解説します。
＜使用例＞

var hoge = "varで定義したよ";
console.log(hoge); // varで定義したよ　が出力される

// ----------------------------------------
if (true) {
    var fuga = "ifの中で定義";
}
console.log(fuga); // ifの中で定義　が出力される

// ----------------------------------------
ver fuga = "最初の宣言";
var fuga = “2回目の宣言”;
console.log(fuga); // 2回目の宣言　が出力される（上書きされる）

verは関数スコープのため、ifなどのブロックに関係なく参照、代入が出来てしまいます。
javaなどブロックスコープの言語でなれているとかなり違和感があります。
また、変数名を重複して宣言することができるため、うっかり同じ変数名で定義してしまい値を上書きしてしまう可能性もあります。