の違いについて教えてください"を使う"、"var"?

Question

ECMAScript6に導入 の let 決.

聞いたのですが、これらの記述としての"地方"の変数がまだないように動作しなの var キーワードとなります。

何が違っていたのか？べきであ let 定することが var?

Answer 1

スコープの規則

主な違いは、ルールをスコープです。 var変数はlet（従って、ブロック範囲）で表さ即時封入のブロックにスコープされている間{ }キーワードで宣言された変数は、即時関数本体（したがって関数スコープ）にスコープされます。

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar);

  {
    let baz = "Bazz";
    console.log(baz);
  }

  console.log(baz); // ReferenceError
}

run();

letキーワードが言語に導入された理由は、関数スコープが混乱していたとJavaScriptのバグの主な情報源の一つであった。

別のstackoverflowの質問をhref="https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example">

var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value: " + i);
  };
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

匿名関数は、同一の同じ変数にバインドされて以来、

My value: 3各時間funcs[j]();をコンソールに出力された起動します。

人々はループから正しい値をキャプチャするために、すぐに呼び出された関数を作成作成する必要がありましたが、それも毛深いだっます。

巻き上げ

varキーワードで宣言された変数は、それらが宣言される前でも、彼らは彼らの囲みスコープ内でアクセス可能であることを意味ブロックの先頭に「掲揚」されているもののます：

function run() {
  console.log(foo); // undefined
  var foo = "Foo";
  console.log(foo); // Foo
}

run();

その定義が評価されるまで、変数が初期化されていませんしましょう。 ReferenceErrorで初期化結果の前にそれらにアクセスします。変数の初期化が処理されるまで、ブロックの先頭から「一時的なデッドゾーン」にあると言わます。

function checkHoisting() {
  console.log(foo); // ReferenceError
  let foo = "Foo";
  console.log(foo); // Foo
}

checkHoisting();

グローバルオブジェクトのプロパティを作成する

トップレベルで、letは、varとは異なり、グローバルオブジェクトのプロパティを作成しません。

var foo = "Foo";  // globally scoped
let bar = "Bar"; // globally scoped

console.log(window.foo); // Foo
console.log(window.bar); // undefined

再宣言

varがでSyntaxErrorを発生させながら、strictモードでは、letは、あなたが同じスコープで同じ変数を再宣言できるようになります。

'use strict';
var foo = "foo1';
var foo = "foo2'; // No problem, 'foo' is replaced.

let bar = "bar1";
let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared

Answer 2

letも閉鎖に伴う問題を回避するために使用することができます。それは以下の例に示すように、古い参照を維持するのではなく、新鮮な値をバインドします。

for(var i=1; i<6; i++) {
  $("#div" + i).click(function () { console.log(i); });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>

上記のコードは、古典的なJavaScriptの閉鎖問題を示します。 i変数への参照ではなくiの実際の値よりも、クリックハンドラの閉鎖に格納されてます。

6そう、あなたがクリックするたびに6を取得し保持している唯一のカウンターオブジェクトがありますので、ひとつひとつのクリックハンドラは、同じオブジェクトを参照します。

一般的な問題を回避するには、匿名関数でこれをラップし、引数としてiを渡すことです。このような問題はまた、以下のコードに示すようにlet代わりvar用いて今回避することができる。

<サブ>（クロームとFirefox 50でテスト済み）

for(let i=1; i<6; i++) {
  $("#div" + i).click(function () { console.log(i); });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>