【JavaScript】letとvarの違い

#プログラミング勉強日記
2021年1月7日
今まではとりあえずletを使えばいいと思っていて、letとvarの違いを知らなかった。今日はそのletとvarの違いを学んだので、簡単にまとめる。

#JavaScriptの変数宣言について
　JavaScriptの変数定義方法は、varを使うのが主流だった。
　ECMAScript 2015 (ES6)からはletとconstが追加された。letはvarに代わる変数定義方式として用いられ、constは定数を定義するために使われる。constは定数なので、後から変更不可能である。

変数定義

// letとvarは同じように利用可能である
var str1 = "Hello";
let str2 = "Hello";

#letとvarの違い

##変数のスコープの違い
　letはブロックスコープで、varは関数スコープである。
　letを使って定義した変数はブロックスコープを持っている。varではブロックスコープに対応できないので、ES6でletが追加された。(if文やfor文などの中で定義された変数は、そのブロックの中でしか使えないことをブロックスコープという。)

letを使用する場合

let num = 100;
if(num = 100) {
  // numが100だったら100を足す(number = 200)
  let number = num + 100;
}
console.log(number);

実行結果

ReferenceError: number is not defined

varを使用する場合

var num = 100;
if(num = 100) {
  // numが100だったら100を足す(number = 200)
  var number = num + 100;
}
console.log(number);

実行結果

200

　このようにvarで宣言された変数にはブロックスコープが存在しない。

##varは変数の重複定義ができる
　バグにつながる仕様だが、varは同じ変数名で重複定義ができる。

var testVar = "こんにちは";
console.log(testVar);
var testVar = "Hello";
console.log(testVar);

実行結果

こんにちは
Hello

　letで変数を重複定義すると、プログラム実行前にconsoleエラーになる。

#参考文献
JavaScriptのletとvarの違いについて現役エンジニアが解説【初心者向け】
JavaScriptの変数宣言はletにすべきか 『入門JavaScriptプログラミング』から解説