JavaScriptの変数宣言　varとletの違い

2019 12/25

2019.12.25

はじめに

JavaScript(通称バニラJS)の変数宣言って何が違うの？？という質問がよくされるのでちょっとまとめてみようと思います。

変数とは

端的にまとめると「データの入れ物」です。
スクリプトが最終的な答えを導くための一連の「データのやりとり」だと定義すると、変数とは「やりとりされる途中経過のデータを一時的に保存する」ものと定義できます。

変数宣言とは

変数を使うにあたり、変数の名前をJavaScriptに登録して、値を格納するための領域をメモリ上に確保することです。

宣言の種類

var命令

ただ宣言するだけだとデフォルトでundefinedと言う特別な値を変数に割り当てます。

// 抽象的な書き方
var 変数名;

// 具体的な書き方
var sample

変数宣言をして値をセットする時は

// 抽象的な書き方
var 変数名 = 値;

// 具体的な書き方
var test = "こんにちは　世界！"

let命令(ES2015から)

基本的にはvar命令と同じ構文です。

// 抽象的な書き方
let 変数名;

// 具体的な書き方
let sample

変数宣言をして値をセットする時は

// 抽象的な書き方
let 変数名 = 値;

// 具体的な書き方
let test = "こんにちは　世界！"

let命令とvar命令の違い

①変数名を重複して使えない

let命令は同名の変数を使うことができません。

let test = "テスト"
let test = "テスト"
// Identifier 'test' has already been declaredと言うエラーが出る。

var命令は同名の変数と使うことができます。
裏では２回目の宣言時に上書きされています。

var test = "テスト"
var test = "２回目だよ〜ん"
console.log(test);
// "2回目だよ〜ん"が表示される。

②ブロックスコープの違い

ES2015からブロックスコープという概念が追加されました。
結論

var命令はブロックスコープは無視してしまう。
let命令はブロックスコープに厳密。

どういうことかというと、ifのようなブロックの中に変数を定義した時に変数の有効範囲が定まり、その有効範囲が異なるということです。

var命令は一見すると便利なものに見えますが、スクリプトを書いているうちに自分が意図した変数の値になっていないということが多発してしまい、使いんですね。
（日を跨いだり、他の人のコードを読む時にめっちゃ大変・・・）

反対に、厳密にブロックスコープを守ってくれるletを使っていると非常に変数データを管理しやすいのです。

その結果、よく聞くのが「let命令をなるべく使おうね！」という合言葉というわけです。
（書いてみれば分かる・・・！）

下が具体例です。

var slogan = "I'M a super engineer.";
if(slogan.constructor.name == "String"){
    var num = 5;
    let sample = 10;

    console.log(num);
    //5が表示される
    console.log(sample);
    //10が表示される

}

console.log(num);
//5が表示される
console.log(sample);
//変数sampleはスコープ外なのでエラー

これはローカル変数やグローバル変数についての理解が深くなければ違和感がないかもしれないので別記事にまとめます。