varとletの違いは２つある

はじめに

「javascriptの変数宣言は"let"で行え！」と言われているので素直に従っていましたが、
改めてなぜ"var"を使わない方が良いかをまとめてみます。

(1)letは変数の重複を許可しない

varで同名の変数を宣言してみます。

var name = "hoge"
var name = "fuga"

console.log(name);

>>fuga

上書きされて二つ目の宣言の"fuga"が出力されました。

同じくletでも同名の変数を宣言してみます。

var name = "hoge"
var name = "fuga"

console.log(name);

>>Uncaught SyntaxError: Identifier 'name' has already been declared

既に宣言済みだよとのエラーメッセージが出力されました。

※letは変数の再宣言ができないため、変数の重複が起こらないという利点があります。

(2)letはブロックスコープを認識する。

大前提として、javascriptはブロックスコープを認識しません。

下記をご覧ください。

if(true){
    var i = 5;
}

console.log(i);

>>5

JAVAやC#などのプログラミング言語を学習してきた方からすれば違和感を覚えるかもしれませんが、javascriptのvar命令はブロックスコープを認識しません。

そして、一般的にプログラミングのルールとして「スコープはできる限り限定すべき」というものがあります。そのルールに即した命令がlet命令です。

if(true){
    let i = 5;
}

console.log(i);

>>usestrit.html:11 Uncaught ReferenceError: i is not defined

まとめ

①変数の重複を防ぐため
②スコープの範囲を限定するため

上記2点を理由にvarよりletを使う方が好ましいです。

注）限定的にvarを使った方が良い場面もありますが、あまり登場しないのでとりあえずletを使う方が良いでしょう。

参考

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで