グローバルオブジェクトについて

Question

windowについて調べていたのですが、

var i = 5;
console.log(window.i === i); //true;

となるのに対し、

let i = 5;
console.log(window.i === i); //false;

となることにきがついたのですが、なぜでしょうか。
letに関しては、window.i = undefined となるようにすることに何か意味があったのでしょうか。
分かる方、分かりやすくお願いします。

---------------解決方法----------------
https://qiita.com/ConquestArrow/items/8cb01744af15afff33c0

名前の競合を避けるためにlet宣言がブロックスコープで扱われる。

Comments

[m.ts10806]

varとletの違いについては調べてみた上での質問でしょうか。

[salah0615]

はい、ひととおり調べました。
スコープの扱いと変数重複に関してしか載っていないように思います。
その二つとこの挙動が関係あるのでしょうか。

[salah0615]

すいません。
自分が調べ足りなかったようでした。
let宣言だとダメだというような趣旨のページがようやく見つかりました。

[salah0615]

https://qiita.com/ConquestArrow/items/8cb01744af15afff33c0

[m.ts10806]

お手数ですが質問本文に追記願います。
こちらは質問に対する追記修正依頼のコメント欄で確認などにも使われますが、結果を質問本文を編集して返すのが通例ですので。また、デフォルト非表示であるため、質問本文との連動性はあまりありません。

[salah0615]

だいたい、このような感じでよろしいのでしょうか。

Answer 1

既に回答がついていますが、スコープの違いについて言及しておきます。

変数宣言 (var)

``var` による変数宣言は原則として、関数スコープです。

function sample () {
  var a = 1; // この変数は関数スコープ
  
  console.log(a); // 1
}

sample();
console.log(a); // ReferenceError

ただし、var にはグローバルコードで宣言された変数はグローバルスコープになるという性質があります。

var b = 1; // この変数はグローバルスコープ


console.log(b);                // 1
console.log(this.b);        // 1
console.log(window.b); // 1

ES3までは、var宣言された変数にはDontDelete属性がありましたが、現在ではなくなったので、上記変数宣言は下記コードと等価になります。

window.b = 1; // この変数はグローバルスコープ

let, const

let, const による変数定義(こちらは変数宣言とは呼びません)はブロックスコープです。

{
  let c = 1;       // この変数はブロックスコープ
  const d = 2; // この変数はブロックスコープ
  
  console.log(c); // 1
  console.log(d); // 2
}

console.log(c); // ReferenceError
console.log(d); // ReferenceError
}

ただし、let, const による変数定義はグローバルコードでもブロックスコープのままです。

let c = 1;       // この変数はブロックスコープ
const d = 2; // この変数はブロックスコープ
  
console.log(c); // 1
console.log(d); // 2
console.log(this.c);        // undefined
console.log(window.c); // undefined
console.log(this.d);        // undefined
console.log(window.d); // undefined

上記コードでは見えないブロック文が内在していると解釈すると、分かりやすいと思います。
重要な違いとして、グローバル変数による名前衝突を回避できる点があげられます。

<script>
let c = 1; // この変数はブロックスコープ

document.addEventListener('click', function (event) {
  console.log(c);
}, false);
</script>
<script>
let c = 2; // この変数もブロックスコープなので、先に定義された変数 c と衝突しない

document.addEventListener('click', function (event) {
  console.log(c);
}, false);
</script>

Re: salah0615 さん

Comments

[salah0615]

親切にありがとうございます！
よく分かりました。

Answer 2

良い疑問点だなと思いました。

仕組み的なものは、書かれていたこちらの記事にほとんどのことは載っていますが、
https://qiita.com/ConquestArrow/items/8cb01744af15afff33c0
疑問に対して、簡単にお答えしたいと思います。

letに関しては、window.i = undefined となるようにすることに何か意味があったのでしょうか。

分かる方、分かりやすくお願いします。

varでは、function外で宣言した場合にグローバルオブジェクト（ブラウザならwindow）のメンバーとして登録されることになります。

これは、質問者様が調べられたとおり、

var i = 5;
console.log(window.i === i); //true;

ということになるので、

var i = 5;
// と書くことは
window.i = 5;
// と書くのと同じ

…という意味になります。

しかしながら、変数宣言をしただけのつもりで書いていたとしても、
実際にはグローバルオブジェクトの一部になってしまうというのは、大きな問題があります。

例えば、 console.log でお馴染みの console は、実際にはグローバルオブジェクトである
window.consoleを参照しています。

console.log('test');

は

window.console.log('test');

と同じになります。

これがどういうことになるかと言うと、
もし、書いたコードの中で、consoleという変数宣言をしてオブジェクトを代入したりすると、

var console = {};

標準のwindow.consoleを上書きしてしまうため、以降、console.logが使えなくなります。

なお、functionの中で書いた分にはグローバルオブジェクトを置き換えないので大丈夫です。

function a() {
    var console = {}; //これは大丈夫
}

このように、グローバルオブジェクトを書き換えたりしてしまうことは、
どういう不具合を引き起こすか予測できないため危険なのですが、
varは意図せずに置き換えてしまう可能性が高かったので、
より安全に変数宣言できる仕組みとして、letが作られた、ということになります。

現在では、varを使うこと自体が推奨されておらず、
全てletで事足りるはずですので、とにかくletを使うと覚えておけば問題は無いでしょう。

Comments

[salah0615]

なるほど！
letを使うとundefinedになることの存在意義がよく分かりました！
ありがとうございます。