既に回答がついていますが、スコープの違いについて言及しておきます。
変数宣言 (var)
``var` による変数宣言は原則として、関数スコープです。
JavaScript
1function sample () {
2 var a = 1; // この変数は関数スコープ
3
4 console.log(a); // 1
5}
6
7sample();
8console.log(a); // ReferenceError
ただし、var
にはグローバルコードで宣言された変数はグローバルスコープになるという性質があります。
JavaScript
1var b = 1; // この変数はグローバルスコープ
2
3
4console.log(b); // 1
5console.log(this.b); // 1
6console.log(window.b); // 1
ES3までは、var宣言された変数にはDontDelete属性がありましたが、現在ではなくなったので、上記変数宣言は下記コードと等価になります。
JavaScript
1window.b = 1; // この変数はグローバルスコープ
let, const
let
, const
による変数定義(こちらは変数宣言とは呼びません)はブロックスコープです。
JavaScript
1{
2 let c = 1; // この変数はブロックスコープ
3 const d = 2; // この変数はブロックスコープ
4
5 console.log(c); // 1
6 console.log(d); // 2
7}
8
9console.log(c); // ReferenceError
10console.log(d); // ReferenceError
11}
ただし、let
, const
による変数定義はグローバルコードでもブロックスコープのままです。
JavaScript
1let c = 1; // この変数はブロックスコープ
2const d = 2; // この変数はブロックスコープ
3
4console.log(c); // 1
5console.log(d); // 2
6console.log(this.c); // undefined
7console.log(window.c); // undefined
8console.log(this.d); // undefined
9console.log(window.d); // undefined
上記コードでは見えないブロック文が内在していると解釈すると、分かりやすいと思います。
重要な違いとして、グローバル変数による名前衝突を回避できる点があげられます。
HTML
1<script>
2let c = 1; // この変数はブロックスコープ
3
4document.addEventListener('click', function (event) {
5 console.log(c);
6}, false);
7</script>
8<script>
9let c = 2; // この変数もブロックスコープなので、先に定義された変数 c と衝突しない
10
11document.addEventListener('click', function (event) {
12 console.log(c);
13}, false);
14</script>
Re: salah0615 さん