Правила определения объема

Основное отличие - это правила определения объема. Переменные, объявленные ключевым словом var, относятся к непосредственному телу функции (отсюда и к области действия функции), в то время как let переменные ограничиваются непосредственным охватывающим блоком, обозначенным { } (отсюда и область действия блока).

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

  console.log(foo, bar); // Foo Bar

  {
    var moo = "Mooo"
    let baz = "Bazz";
    console.log(moo, baz); // Mooo Bazz
  }

  console.log(moo); // Mooo
  console.log(baz); // ReferenceError
}

run();

Причина, по которой ключевое слово let было введено в язык, заключалась в том, что область действия функции сбивала с толку и была одним из основных источников ошибок в JavaScript.

Взгляните на этот пример из другого вопроса о переполнении стека:

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, поднимаются (инициализируются с помощью undefined перед запуском кода), что означает, что они доступны в их охватывающей области видимости даже до того, как они будут объявлены:

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

run();

let переменные не инициализируются, пока не будет оценено их определение. Доступ к ним до инициализации приводит к 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"; // not allowed to be globally scoped

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

Повторное объявление

В строгом режиме var позволит вам повторно объявить ту же переменную в той же области, в то время как let вызывает SyntaxError.

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

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

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>
<p>Clicking on each number will log to console:</p> 
<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, поэтому вы получаете шесть при каждом щелчке.

Общий обходной путь - заключить это в анонимную функцию и передать i в качестве аргумента. Таких проблем теперь также можно избежать, используя let вместо var, как показано в приведенном ниже коде.

_{(Проверено в Chrome и 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>
<p>Clicking on each number will log to console:</p> 
<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>

В чем разница между let и var?

• Переменная, определенная с помощью оператора var, известна в функции он определяется в с самого начала функции. (*)
• Переменная, определенная с помощью оператора let, известна только в block, в котором он определен, с момента его определения и далее. (**)

Чтобы понять разницу, рассмотрим следующий код:

// i IS NOT known here
// j IS NOT known here
// k IS known here, but undefined
// l IS NOT known here

function loop(arr) {
    // i IS known here, but undefined
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( var i = 0; i < arr.length; i++ ) {
        // i IS known here, and has a value
        // j IS NOT known here
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( let j = 0; j < arr.length; j++ ) {
        // i IS known here, and has a value
        // j IS known here, and has a value
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here
}

loop([1,2,3,4]);

for( var k = 0; k < arr.length; k++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS NOT known here
};

for( let l = 0; l < arr.length; l++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS known here, and has a value
};

loop([1,2,3,4]);

// i IS NOT known here
// j IS NOT known here
// k IS known here, and has a value
// l IS NOT known here

Здесь мы видим, что наша переменная j известна только в первом цикле for, но не до и после. Тем не менее, наша переменная i известна во всей функции.

Также учтите, что переменные с областью видимости блока не известны до того, как они будут объявлены, потому что они не поднимаются. Вам также не разрешено повторно объявлять одну и ту же переменную области блока в одном блоке. Это делает переменные с блочной областью видимости менее подверженными ошибкам, чем переменные с глобальной или функциональной областью видимости, которые поднимаются и которые не вызывают ошибок в случае нескольких объявлений.

Насколько безопасно использовать let сегодня?

Некоторые люди возразят, что в будущем мы будем использовать ТОЛЬКО операторы let и что операторы var станут устаревшими. Гуру JavaScript Кайл Симпсон написал очень подробная статья о том, почему он считает, что это не так.

Однако сегодня это определенно не так. Фактически, нам нужно спросить себя, безопасно ли использовать оператор let. Ответ на этот вопрос зависит от вашей среды:

• Если вы пишете код серверного JavaScript (Node.js), вы можно безопасно использовать оператор let.

• Если вы пишете код JavaScript на стороне клиента и используете транспилятор на основе браузера (например, Traceur или babel-standalone), вы можете безопасно используйте оператор let, однако ваш код, скорее всего, не будет оптимальным с точки зрения производительности.

• Если вы пишете код JavaScript на стороне клиента и используете транспилятор на основе узла (например, сценарий оболочки traceur или Babel), вы можно безопасно использовать оператор let. А поскольку ваш браузер будет знать только о перенесенном коде, недостатки производительности должны быть ограничены.

• Если вы пишете код JavaScript на стороне клиента и не используете транспилятор, вам необходимо рассмотреть возможность поддержки браузером.

  Некоторые браузеры по-прежнему не поддерживают let:

Актуальный обзор того, какие браузеры поддерживают оператор let на момент чтения этого ответа, см. На странице < strong> эта Can I Use страница.

(*) Переменные с глобальной и функциональной областью видимости можно инициализировать и использовать до того, как они будут объявлены, поскольку переменные JavaScript поднял. Это означает, что объявления всегда находятся в верхней части области видимости.

(**) Переменные с областью действия блока не поднимаются

Вот объяснение ключевого слова let с некоторыми примерами.

let работает очень похоже на var. Основное отличие состоит в том, что область видимости переменной var - это вся включающая функция.

Эта таблица в Википедии показывает, какие браузеры поддерживают Javascript 1.7.

Обратите внимание, что его поддерживают только браузеры Mozilla и Chrome. IE, Safari и, возможно, другие этого не делают.

В принятом ответе отсутствует точка:

{
  let a = 123;
};

console.log(a); // ReferenceError: a is not defined

let

Область действия блока

Переменные, объявленные с использованием ключевого слова let, имеют блочную область видимости, что означает, что они доступны только в блок, в котором они были объявлены.

На верхнем уровне (вне функции)

На верхнем уровне переменные, объявленные с использованием let, не создают свойств глобального объекта.

var globalVariable = 42;
let blockScopedVariable = 43;

console.log(globalVariable); // 42
console.log(blockScopedVariable); // 43

console.log(this.globalVariable); // 42
console.log(this.blockScopedVariable); // undefined

Внутри функции

Внутри функции (но вне блока) let имеет ту же область видимости, что и var.

(() => {
  var functionScopedVariable = 42;
  let blockScopedVariable = 43;

  console.log(functionScopedVariable); // 42
  console.log(blockScopedVariable); // 43
})();

console.log(functionScopedVariable); // ReferenceError: functionScopedVariable is not defined
console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined

Внутри блока

Переменные, объявленные с использованием let внутри блока, недоступны за пределами этого блока.

{
  var globalVariable = 42;
  let blockScopedVariable = 43;
  console.log(globalVariable); // 42
  console.log(blockScopedVariable); // 43
}

console.log(globalVariable); // 42
console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined

Внутри петли

На переменные, объявленные с let в циклах, можно ссылаться только внутри этого цикла.

for (var i = 0; i < 3; i++) {
  var j = i * 2;
}
console.log(i); // 3
console.log(j); // 4

for (let k = 0; k < 3; k++) {
  let l = k * 2;
}
console.log(typeof k); // undefined
console.log(typeof l); // undefined
// Trying to do console.log(k) or console.log(l) here would throw a ReferenceError.

Петли с закрытием

Если вы используете let вместо var в цикле, с каждой итерацией вы получаете новую переменную. Это означает, что вы можете безопасно использовать замыкание внутри цикла.

// Logs 3 thrice, not what we meant.
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

// Logs 0, 1 and 2, as expected.
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 0);
}

Временная мертвая зона

Из-за временной мертвой зоны переменные, объявленные с использованием let, не могут быть доступны до их объявления. Попытка сделать это вызывает ошибку.

console.log(noTDZ); // undefined
var noTDZ = 43;
console.log(hasTDZ); // ReferenceError: hasTDZ is not defined
let hasTDZ = 42;

Нет повторного объявления

Вы не можете объявить одну и ту же переменную несколько раз, используя let. Вы также не можете объявить переменную с использованием let с тем же идентификатором, что и другая переменная, которая была объявлена ​​с использованием var.

var a;
var a; // Works fine.

let b;
let b; // SyntaxError: Identifier 'b' has already been declared

var c;
let c; // SyntaxError: Identifier 'c' has already been declared

const

const очень похож на let - он блочный и имеет TDZ. Однако есть две разные вещи.

Нет переназначения

Переменная, объявленная с использованием const, не может быть переназначена.

const a = 42;
a = 43; // TypeError: Assignment to constant variable.

Обратите внимание, что это не означает, что значение неизменяемо. Его свойства еще можно изменить.

const obj = {};
obj.a = 42;
console.log(obj.a); // 42

Если вы хотите иметь неизменяемый объект, вы должны использовать Object.freeze().

Требуется инициализатор

Вы всегда должны указывать значение при объявлении переменной с помощью const.

const a; // SyntaxError: Missing initializer in const declaration

Проще говоря,

for (let i = 0; i < 5; i++) {
  // i accessible ✔️
}
// i not accessible ❌

for (var i = 0; i < 5; i++) {
  // i accessible ✔️
}
// i accessible ✔️

⚡️ Песочница для игры

Вот пример разницы между ними (поддержка Chrome только началась):

Как вы можете видеть, переменная var j по-прежнему имеет значение за пределами области цикла for (область действия блока), но переменная let i не определена за пределами области цикла for.

"use strict";
console.log("var:");
for (var j = 0; j < 2; j++) {
  console.log(j);
}

console.log(j);

console.log("let:");
for (let i = 0; i < 2; i++) {
  console.log(i);
}

console.log(i);

Основное отличие заключается в разнице области, тогда как let может быть доступна только в объявленной области, например в цикле for, var можно получить, например, вне цикла. Из документации в MDN (примеры также из MDN):

let позволяет объявлять переменные, область действия которых ограничена блоком, оператором или выражением, в которых они используются. В этом отличие от ключевого слова var, которое определяет переменную глобально или локально для всей функции независимо от области действия блока.

Переменные, объявленные с помощью let, имеют в качестве своей области действия блок, в котором они определены, а также любые содержащиеся в нем подблоки. Таким образом, let работает очень похоже на var. Основное отличие состоит в том, что область видимости переменной var - это вся включающая функция:

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}`

На верхнем уровне программ и функций let, в отличие от var, не создает свойства глобального объекта. Например:

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

При использовании внутри блока let ограничивает область действия переменной этим блоком. Обратите внимание на разницу между var, область видимости которого находится внутри функции, в которой он объявлен.

var a = 1;
var b = 2;

if (a === 1) {
  var a = 11; // the scope is global
  let b = 22; // the scope is inside the if-block

  console.log(a);  // 11
  console.log(b);  // 22
} 

console.log(a); // 11
console.log(b); // 2

Также не забывайте, что это функция ECMA6, поэтому она еще не полностью поддерживается, поэтому лучше всегда переносить ее в ECMA5 с помощью Babel и т. Д. Для получения дополнительной информации о visit веб-сайт Babel

Есть некоторые тонкие различия, let область видимости ведет себя больше, чем область видимости переменных в более или менее любых других языках.

например Он относится к охватывающему блоку, они не существуют до объявления и т. Д.

Однако стоит отметить, что let является лишь частью новых реализаций Javascript и имеет разную степень поддержки браузером.

• Переменная не поднимается

  let не будет поднимать всю область блока, в котором они появляются. В отличие от этого, var может подниматься, как показано ниже.

  {
     console.log(cc); // undefined. Caused by hoisting
     var cc = 23;
  }
  
  {
     console.log(bb); // ReferenceError: bb is not defined
     let bb = 23;
  }
  

  Собственно, Пер @Bergi, var и let подняты.

• Сборка мусора

  Область блока let полезна для закрытия и сборки мусора для освобождения памяти. Рассмотреть возможность,

  function process(data) {
      //...
  }
  
  var hugeData = { .. };
  
  process(hugeData);
  
  var btn = document.getElementById("mybutton");
  btn.addEventListener( "click", function click(evt){
      //....
  });
  

  Обратному вызову обработчика click переменная hugeData вообще не нужна. Теоретически после process(..) запусков огромная структура данных hugeData может быть собрана мусором. Однако возможно, что какой-то JS-движок все равно будет поддерживать эту огромную структуру, поскольку функция click закрывает всю область видимости.

  Однако область видимости блока может превратить эту огромную структуру данных в сборку мусора.

  function process(data) {
      //...
  }
  
  { // anything declared inside this block can be garbage collected
      let hugeData = { .. };
      process(hugeData);
  }
  
  var btn = document.getElementById("mybutton");
  btn.addEventListener( "click", function click(evt){
      //....
  });
  

• let петель

  let в цикле может повторно привязывать его к каждой итерации цикла, не забудьте переназначить ему значение с конца предыдущей итерации цикла. Рассмотреть возможность,

  // print '5' 5 times
  for (var i = 0; i < 5; ++i) {
      setTimeout(function () {
          console.log(i);
      }, 1000);  
  }
  

  Однако замените var на let

  // print 1, 2, 3, 4, 5. now
  for (let i = 0; i < 5; ++i) {
      setTimeout(function () {
          console.log(i);
      }, 1000);  
  }
  

  Поскольку let создает новую лексическую среду с этими именами для а) выражения инициализатора б) каждой итерации (прежде для оценки выражения приращения), более подробная информация о здесь.

Разница заключается в области переменных, объявленных для каждой из них.

На практике разница в масштабах имеет ряд полезных последствий:

1. let переменные видны только в их ближайшем охватывающем блоке ({ ... }).
2. let переменные можно использовать только в строках кода, которые появляются после объявления переменной (даже если они подняты!).
3. let переменные не могут быть повторно объявлены последующими var или let.
4. Глобальные let переменные не добавляются к глобальному объекту window.
5. let переменные просты в использовании с замыканиями (они не вызывают состояния гонки < / а>).

Ограничения, накладываемые let, уменьшают видимость переменных и увеличивают вероятность того, что неожиданные конфликты имен будут обнаружены раньше. Это упрощает отслеживание и анализ переменных, включая их достижимость (помогает освободить неиспользуемую память) .

Следовательно, let переменные с меньшей вероятностью будут вызывать проблемы при использовании в больших программах или когда независимо разработанные фреймворки комбинируются новыми и неожиданными способами.

var может быть полезен, если вы уверены, что хотите получить эффект однократной привязки при использовании замыкания в цикле (# 5) или для объявления видимых извне глобальных переменных в вашем коде (# 4). Использование var для экспорта может быть отменено, если _14 _ мигрирует из пространства транспилятора на базовый язык.

Примеры

1. Не использовать за пределами ближайшего включающего блока: этот блок кода вызовет ошибку ссылки, потому что второе использование x происходит за пределами блока, в котором он объявлен с let:

{
    let x = 1;
}
console.log(`x is ${x}`);  // ReferenceError during parsing: "x is not defined".

Напротив, тот же пример с var работает.

2. Бесполезно перед объявлением:
Этот блок кода выдаст ReferenceError перед запуском кода, потому что x используется перед объявлением:

{
    x = x + 1;  // ReferenceError during parsing: "x is not defined".
    let x;
    console.log(`x is ${x}`);  // Never runs.
}

Напротив, тот же пример с var анализирует и запускается без каких-либо исключений.

3. Без повторного объявления: Следующий код демонстрирует, что переменная, объявленная с помощью let, не может быть повторно объявлена ​​позже:

let x = 1;
let x = 2;  // SyntaxError: Identifier 'x' has already been declared

4. Глобальные объекты, не прикрепленные к window:

var button = "I cause accidents because my name is too common.";
let link = "Though my name is common, I am harder to access from other JS files.";
console.log(link);  // OK
console.log(window.link);  // undefined (GOOD!)
console.log(window.button);  // OK

5. Простое использование с замыканиями. Переменные, объявленные с помощью var, не работают с замыканиями внутри циклов. Вот простой цикл, который выводит последовательность значений, которые переменная i имеет в разные моменты времени:

for (let i = 0; i < 5; i++) {
    console.log(`i is ${i}`), 125/*ms*/);
}

В частности, это выводит:

i is 0
i is 1
i is 2
i is 3
i is 4

В JavaScript мы часто используем переменные значительно позже, чем когда они были созданы. Когда мы демонстрируем это, задерживая вывод с закрытием, переданным в setTimeout:

for (let i = 0; i < 5; i++) {
    setTimeout(_ => console.log(`i is ${i}`), 125/*ms*/);
}

... вывод остается неизменным, пока мы придерживаемся let. Напротив, если бы мы использовали вместо этого var i:

for (var i = 0; i < 5; i++) {
    setTimeout(_ => console.log(`i is ${i}`), 125/*ms*/);
}

... цикл неожиданно выводит "i is 5" пять раз:

i is 5
i is 5
i is 5
i is 5
i is 5

Вот пример, который можно добавить к тому, что уже написали другие. Предположим, вы хотите создать массив функций adderFunctions, где каждая функция принимает единственный аргумент Number и возвращает сумму аргумента и индекса функции в массиве. Попытка сгенерировать adderFunctions с помощью цикла с использованием ключевого слова var не сработает так, как кто-то наивно ожидал:

// An array of adder functions.
var adderFunctions = [];

for (var i = 0; i < 1000; i++) {
  // We want the function at index i to add the index to its argument.
  adderFunctions[i] = function(x) {
    // What is i bound to here?
    return x + i;
  };
}

var add12 = adderFunctions[12];

// Uh oh. The function is bound to i in the outer scope, which is currently 1000.
console.log(add12(8) === 20); // => false
console.log(add12(8) === 1008); // => true
console.log(i); // => 1000

// It gets worse.
i = -8;
console.log(add12(8) === 0); // => true

Вышеупомянутый процесс не генерирует желаемый массив функций, потому что область видимости i выходит за рамки итерации блока for, в котором была создана каждая функция. Вместо этого в конце цикла i в закрытии каждой функции относится к значению i в конце цикла (1000) для каждой анонимной функции в adderFunctions. Это совсем не то, что мы хотели: теперь у нас есть массив из 1000 различных функций в памяти с точно таким же поведением. И если мы впоследствии обновим значение i, мутация затронет все adderFunctions.

Однако мы можем попробовать еще раз, используя ключевое слово let:

// Let's try this again.
// NOTE: We're using another ES6 keyword, const, for values that won't
// be reassigned. const and let have similar scoping behavior.
const adderFunctions = [];

for (let i = 0; i < 1000; i++) {
  // NOTE: We're using the newer arrow function syntax this time, but 
  // using the "function(x) { ..." syntax from the previous example 
  // here would not change the behavior shown.
  adderFunctions[i] = x => x + i;
}

const add12 = adderFunctions[12];

// Yay! The behavior is as expected. 
console.log(add12(8) === 20); // => true

// i's scope doesn't extend outside the for loop.
console.log(i); // => ReferenceError: i is not defined

На этот раз i восстанавливается на каждой итерации цикла for. Каждая функция теперь сохраняет значение i во время создания функции, и adderFunctions ведет себя так, как ожидалось.

Теперь, изображение смешивает два поведения, и вы, вероятно, поймете, почему не рекомендуется смешивать новые let и const со старыми var в одном скрипте. Это может привести к получению впечатляюще запутанного кода.

const doubleAdderFunctions = [];

for (var i = 0; i < 1000; i++) {
    const j = i;
    doubleAdderFunctions[i] = x => x + i + j;
}

const add18 = doubleAdderFunctions[9];
const add24 = doubleAdderFunctions[12];

// It's not fun debugging situations like this, especially when the
// code is more complex than in this example.
console.log(add18(24) === 42); // => false
console.log(add24(18) === 42); // => false
console.log(add18(24) === add24(18)); // => false
console.log(add18(24) === 2018); // => false
console.log(add24(18) === 2018); // => false
console.log(add18(24) === 1033); // => true
console.log(add24(18) === 1030); // => true

Не позволяйте этому случиться с вами. Используйте линтер.

ПРИМЕЧАНИЕ. Это обучающий пример, предназначенный для демонстрации _22 _ / _ 23_ поведения в циклах и с закрытием функций, которые также будут легко понять. Это был бы ужасный способ складывать числа. Но общий метод сбора данных при закрытии анонимных функций может встретиться в реальном мире в других контекстах. YMMV.

Пусть следующие две функции покажут разницу:

function varTest() {
    var x = 31;
    if (true) {
        var x = 71;  // Same variable!
        console.log(x);  // 71
    }
    console.log(x);  // 71
}

function letTest() {
    let x = 31;
    if (true) {
        let x = 71;  // Different variable
        console.log(x);  // 71
    }
    console.log(x);  // 31
}

Объем блока VS функции:

Основное различие между var и let заключается в том, что переменные, объявленные с помощью var, имеют область видимости функции. В то время как функции, объявленные с let, имеют область видимости блока. Например:

function testVar () {
  if(true) {
    var foo = 'foo';
  }

  console.log(foo);
}

testVar();  
// logs 'foo'


function testLet () {
  if(true) {
    let bar = 'bar';
  }

  console.log(bar);
}

testLet(); 
// reference error
// bar is scoped to the block of the if statement 

переменные с var:

Когда вызывается первая функция testVar, переменная foo, объявленная с var, по-прежнему доступна за пределами оператора if. Эта переменная foo будет доступна везде в рамках testVar функции.

переменные с let:

Когда вызывается вторая функция testLet, переменная bar, объявленная с let, доступна только внутри оператора if. Поскольку переменные, объявленные с помощью let, имеют область видимости блока (где блок - это код в фигурных скобках, например if{}, for{}, function{}).

let переменные не поднимаются:

Еще одно различие между var и let заключается в том, что переменные с объявлением let не поднимаются. Пример - лучший способ проиллюстрировать это поведение:

переменные с let не поднимаются:

console.log(letVar);

let letVar = 10;
// referenceError, the variable doesn't get hoisted

переменные с var действительно поднимаются:

console.log(varVar);

var varVar = 10;
// logs undefined, the variable gets hoisted

Global let не привязывается к window:

Переменная, объявленная с let в глобальной области (т.е. код, не входящий в функцию), не добавляется в качестве свойства глобального объекта window. Например (этот код находится в глобальной области видимости):

var bar = 5;
let foo  = 10;

console.log(bar); // logs 5
console.log(foo); // logs 10

console.log(window.bar);  
// logs 5, variable added to window object

console.log(window.foo);
// logs undefined, variable not added to window object

Когда let следует использовать вместо var?

По возможности используйте let вместо var, потому что это просто более конкретная область видимости. Это уменьшает потенциальные конфликты имен, которые могут возникнуть при работе с большим количеством переменных. var можно использовать, когда вы хотите, чтобы глобальная переменная явно находилась в объекте window (всегда внимательно относитесь к этому, если это действительно необходимо).

let интересен тем, что позволяет нам делать что-то вроде этого:

(() => {
    var count = 0;

    for (let i = 0; i < 2; ++i) {
        for (let i = 0; i < 2; ++i) {
            for (let i = 0; i < 2; ++i) {
                console.log(count++);
            }
        }
    }
})();

Что приводит к подсчету [0, 7].

В то время как

(() => {
    var count = 0;

    for (var i = 0; i < 2; ++i) {
        for (var i = 0; i < 2; ++i) {
            for (var i = 0; i < 2; ++i) {
                console.log(count++);
            }
        }
    }
})();

Считает только [0, 1].

Также кажется, что, по крайней мере, в Visual Studio 2015, TypeScript 1.5, «var» допускает несколько объявлений одного и того же имени переменной в блоке, а «let» - нет.

Это не приведет к ошибке компиляции:

var x = 1;
var x = 2;

Это будет:

let x = 1;
let x = 2;

ES6 представил два новых ключевых слова (let и const), заменяющие var.

Когда вам нужно замедление на уровне блока, вы можете использовать let и const вместо var.

В таблице ниже приведены различия между var, let и const.

var - это глобальная переменная (с возможностью подъема).

let и const - это область действия блока.

test.js

{
    let l = 'let';
    const c = 'const';
    var v = 'var';
    v2 = 'var 2';
}

console.log(v, this.v);
console.log(v2, this.v2);
console.log(l); // ReferenceError: l is not defined
console.log(c); // ReferenceError: c is not defined

При использовании let

Ключевое слово let связывает объявление переменной с областью действия любого блока (обычно пары { .. }), в котором оно содержится. Другими словами, let неявно захватывает область видимости любого блока для объявления своей переменной.

Доступ к let переменным в объекте window невозможен, так как к ним нельзя получить доступ глобально.

function a(){
    { // this is the Max Scope for let variable
        let x = 12;
    }
    console.log(x);
}
a(); // Uncaught ReferenceError: x is not defined

При использовании var

var и переменные в ES5 имеют области в функциях, что означает, что переменные действительны внутри функции, а не вне самой функции.

Доступ к var переменным возможен в объекте window, потому что к ним нельзя получить доступ глобально.

function a(){ // this is the Max Scope for var variable
    { 
        var x = 12;
    }
    console.log(x);
}
a(); // 12

Если вы хотите узнать больше, продолжайте читать ниже

один из самых известных вопросов на собеседовании по сфере охвата также может быть достаточным для точного использования let и var, как показано ниже;

При использовании let

for (let i = 0; i < 10 ; i++) {
    setTimeout(
        function a() {
            console.log(i); //print 0 to 9, that is literally AWW!!!
        }, 
        100 * i);
}

Это связано с тем, что при использовании let для каждой итерации цикла переменная ограничена и имеет свою собственную копию.

При использовании var

for (var i = 0; i < 10 ; i++) {
    setTimeout(
        function a() {
            console.log(i); //print 10 times 10
        }, 
        100 * i);
}

Это связано с тем, что при использовании var для каждой итерации цикла переменная ограничена и имеет общую копию.

Если я правильно прочитал спецификации, то let к счастью также можно использовать, чтобы избежать самовызывающиеся функции, используемые для имитации только закрытых членов - популярный шаблон проектирования, который снижает читаемость кода, усложняет отладку, не добавляет реальной защиты кода или другое преимущество - кроме, может быть, удовлетворения чьего-то желания семантики, так что прекратите ее использовать. / rant

var SomeConstructor;

{
    let privateScope = {};

    SomeConstructor = function SomeConstructor () {
        this.someProperty = "foo";
        privateScope.hiddenProperty = "bar";
    }

    SomeConstructor.prototype.showPublic = function () {
        console.log(this.someProperty); // foo
    }

    SomeConstructor.prototype.showPrivate = function () {
        console.log(privateScope.hiddenProperty); // bar
    }

}

var myInstance = new SomeConstructor();

myInstance.showPublic();
myInstance.showPrivate();

console.log(privateScope.hiddenProperty); // error

См. "Эмуляция частных интерфейсов"

Некоторые хаки с let:

1.

    let statistics = [16, 170, 10];
    let [age, height, grade] = statistics;

    console.log(height)

2.

    let x = 120,
    y = 12;
    [x, y] = [y, x];
    console.log(`x: ${x} y: ${y}`);

3.

    let node = {
                   type: "Identifier",
                   name: "foo"
               };

    let { type, name, value } = node;

    console.log(type);      // "Identifier"
    console.log(name);      // "foo"
    console.log(value);     // undefined

    let node = {
        type: "Identifier"
    };

    let { type: localType, name: localName = "bar" } = node;

    console.log(localType);     // "Identifier"
    console.log(localName);     // "bar"

Получатель и сеттер с let:

let jar = {
    numberOfCookies: 10,
    get cookies() {
        return this.numberOfCookies;
    },
    set cookies(value) {
        this.numberOfCookies = value;
    }
};

console.log(jar.cookies)
jar.cookies = 7;

console.log(jar.cookies)

Ниже показано, как 'let' и 'var' различаются по области действия:

let gfoo = 123;
if (true) {
    let gfoo = 456;
}
console.log(gfoo); // 123

var hfoo = 123;
if (true) {
    var hfoo = 456;
}
console.log(hfoo); // 456

gfoo, определенный let, изначально находится в глобальной области, и когда мы снова объявляем gfoo внутри if clause, ее область видимости изменена и когда новая значение присваивается переменной внутри этой области, оно не влияет на глобальную область.

Принимая во внимание, что hfoo, определенный var, изначально находится в глобальной области, но опять же, когда мы объявляем ее внутри if clause, она рассматривает глобальную область видимости hfoo, хотя var была снова использована для ее объявления. И когда мы повторно назначаем его значение, мы видим, что глобальная область видимости hfoo также затронута. Это основное отличие.

let является частью es6. Эти функции легко объяснят разницу.

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

пусть vs вар. Все дело в сфере.

переменные var являются глобальными и доступны практически везде, в то время как переменные let не являются глобальными и существуют только до тех пор, пока их не убьет закрывающая скобка.

Посмотрите мой пример ниже и обратите внимание, как переменная lion (let) по-разному действует в двух console.logs; он выходит за рамки 2-го console.log.

var cat = "cat";
let dog = "dog";

var animals = () => {
    var giraffe = "giraffe";
    let lion = "lion";

    console.log(cat);  //will print 'cat'.
    console.log(dog);  //will print 'dog', because dog was declared outside this function (like var cat).

    console.log(giraffe); //will print 'giraffe'.
    console.log(lion); //will print 'lion', as lion is within scope.
}

console.log(giraffe); //will print 'giraffe', as giraffe is a global variable (var).
console.log(lion); //will print UNDEFINED, as lion is a 'let' variable and is now out of scope.

Как уже упоминалось выше:

Разница лишь в масштабах. Область var ограничена ближайшим функциональным блоком, а let областью действия ближайшего охватывающего блока, который может быть меньше функционального блока. Оба являются глобальными, если они находятся вне какого-либо блока. Давайте посмотрим на пример:

Пример1:

В обоих примерах у меня есть функция myfunc. myfunc содержит переменную myvar, равную 10. В моем первом примере я проверяю, равно ли myvar 10 (myvar==10). Если да, я снова объявляю переменную myvar (теперь у меня есть две переменные myvar) с помощью ключевого слова var и присваиваю ей новое значение (20). В следующей строке я печатаю его значение на своей консоли. После условного блока я снова печатаю значение myvar на своей консоли. Если вы посмотрите на вывод myfunc, myvar имеет значение, равное 20.

Пример2: Во втором примере вместо использования ключевого слова var в условном блоке я объявляю myvar с помощью ключевого слова let. Теперь, когда я вызываю myfunc, я получаю два разных результата: myvar=20 и myvar=10.

Так что разница очень проста, то есть в ее объеме.

Я хочу связать эти ключевые слова с контекстом выполнения, потому что контекст выполнения важен во всем этом. Контекст выполнения имеет две фазы: фазу создания и фазу выполнения. Кроме того, у каждого контекста исполнения есть переменная среда и внешняя среда (ее лексическая среда).

На этапе создания контекста выполнения var, let и const по-прежнему сохраняют свою переменную в памяти с неопределенным значением в среде переменных данного контекста выполнения. Разница в фазе исполнения. Если вы используете ссылку на переменную, определенную с помощью var, до того, как ей будет присвоено значение, она просто будет неопределенной. Никакого исключения не будет.

Однако вы не можете ссылаться на переменную, объявленную с помощью let или const, пока она не будет объявлена. Если вы попытаетесь использовать его до того, как он будет объявлен, то на этапе выполнения контекста выполнения возникнет исключение. Теперь переменная все еще будет в памяти благодаря этапу создания контекста выполнения, но движок не позволит вам ее использовать:

function a(){
    b;
    let b;
}
a();
> Uncaught ReferenceError: b is not defined

С переменной, определенной с помощью var, если движок не может найти переменную в среде переменных текущего контекста выполнения, он поднимется по цепочке областей видимости (внешняя среда) и проверит переменную среду внешней среды для переменной. Если он не может найти его там, он продолжит поиск в Scope Chain. Это не относится к let и const.

Вторая особенность let - вводить область видимости блока. Блоки обозначены фигурными скобками. Примеры включают функциональные блоки, блоки if, блоки для блоков и т. Д. Когда вы объявляете переменную с помощью let внутри блока, переменная доступна только внутри блока. Фактически, каждый раз, когда блок запускается, например, в цикле for, он создает новую переменную в памяти.

ES6 также вводит ключевое слово const для объявления переменных. const также имеет блочную область видимости. Разница между let и const заключается в том, что переменные const необходимо объявлять с помощью инициализатора, иначе это приведет к ошибке.

И, наконец, когда дело доходит до контекста выполнения, переменные, определенные с помощью var, будут прикреплены к объекту this. В глобальном контексте выполнения это будет объект окна в браузерах. Это не относится к let или const.

Поскольку в настоящее время я пытаюсь глубоко разобраться в JavaScript, я поделюсь своим кратким исследованием, которое содержит некоторые из уже обсужденных замечательных частей, а также некоторые другие детали в другой перспективе.

Понять разницу между var и let станет проще, если мы поймем разницу между function и областью действия.

Рассмотрим следующие случаи:

(function timer() {
    for(var i = 0; i <= 5; i++) {
        setTimeout(function notime() { console.log(i); }, i * 1000);
    }
})();


   Stack            VariableEnvironment //one VariablEnvironment for timer();
                                       // when the timer is out - the value will be the same value for each call
5. [setTimeout, i]  [i=5] 
4. [setTimeout, i]  
3. [setTimeout, i]
2. [setTimeout, i]
1. [setTimeout, i]
0. [setTimeout, i]

####################    

(function timer() {
    for (let i = 0; i <= 5; i++) {
        setTimeout(function notime() { console.log(i); }, i * 1000);
    }
})();

   Stack           LexicalEnvironment - each iteration has a new lexical environment
5. [setTimeout, i]  [i=5]       
                      LexicalEnvironment 
4. [setTimeout, i]    [i=4]     
                        LexicalEnvironment 
3. [setTimeout, i]      [i=3]       
                         LexicalEnvironment 
2. [setTimeout, i]       [i=2]
                           LexicalEnvironment 
1. [setTimeout, i]         [i=1]
                             LexicalEnvironment 
0. [setTimeout, i]           [i=0]

когда timer() вызывается, создается ExecutionContext, который будет содержать как VariableEnvironment, так и все LexicalEnvironments, соответствующие каждой итерации.

И пример попроще

Объем функции

function test() {
    for(var z = 0; z < 69; z++) {
        //todo
    }
    //z is visible outside the loop
}

Область действия блока

function test() {
    for(let z = 0; z < 69; z++) {
        //todo
    }
    //z is not defined :(
}

Я только что наткнулся на один вариант использования, в котором мне пришлось использовать var вместо let, чтобы ввести новую переменную. Вот такой случай:

Я хочу создать новую переменную с динамическими именами переменных.

let variableName = 'a';
eval("let " + variableName + '= 10;');
console.log(a);   // this doesn't work

var variableName = 'a';
eval("var " + variableName + '= 10;');
console.log(a);   // this works

Приведенный выше код не работает, потому что eval вводит новый блок кода. Объявление с использованием var объявит переменную вне этого блока кода, поскольку var объявляет переменную в области видимости функции.

let, с другой стороны, объявляет переменную в области видимости блока. Таким образом, переменная a будет видна только в блоке eval.

Теперь я думаю, что есть лучшая область видимости переменных для блока операторов с использованием let:

function printnums()
{
    // i is not accessible here
    for(let i = 0; i <10; i+=)
    {
       console.log(i);
    }
    // i is not accessible here

    // j is accessible here
    for(var j = 0; j <10; j++)
    {
       console.log(j);
    }
    // j is accessible here
}

Я думаю, что люди начнут использовать здесь let после этого, чтобы у них была такая же область видимости в JavaScript, как и в других языках, Java, C # и т. Д.

Люди, не имеющие четкого представления об области видимости в JavaScript, раньше допускали ошибку.

Подъем не поддерживается с помощью let.

При таком подходе ошибки, присутствующие в JavaScript, удаляются.

Обратитесь к Подробно о ES6: let и const, чтобы лучше понять это.

В этой статье четко определяется разница между var, let и const.

const - это сигнал о том, что идентификатор не будет переназначен.

let, это сигнал о том, что переменная может быть переназначена, например, счетчик в цикле или замена значения в алгоритме. Он также сигнализирует о том, что переменная будет использоваться только в блоке, в котором она определена, а это не всегда вся содержащая функция.

var теперь самый слабый сигнал, доступный при определении переменной в JavaScript. Переменная может быть или не быть переназначена, и переменная может или не может использоваться для всей функции или только для цели блока или цикла.

https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75#.esmkpbg9b

Я думаю, что термины и большинство примеров немного утомительны. Основная проблема, с которой я лично столкнулся с этой разницей, - это понимание того, что такое «Блок». В какой-то момент я понял, что блоком будут любые фигурные скобки, кроме оператора IF. открывающая скобка { функции или цикла будет определять новый блок, все, что определено с помощью let внутри него, не будет доступно после закрывающей скобки } того же объекта (функции или цикла); Имея это в виду, было легче понять:

let msg = "Hello World";

function doWork() { // msg will be available since it was defined above this opening bracket!
  let friends = 0;
  console.log(msg);

  // with VAR though:
  for (var iCount2 = 0; iCount2 < 5; iCount2++) {} // iCount2 will be available after this closing bracket!
  console.log(iCount2);
  
    for (let iCount1 = 0; iCount1 < 5; iCount1++) {} // iCount1 will not be available behind this closing bracket, it will return undefined
  console.log(iCount1);
  
} // friends will no be available after this closing bracket!
doWork();
console.log(friends);

Эта диаграмма - лучший способ понять разницу между let, const и var. Глобальная область: Область, в которой любая функция может вызывать эту переменную.

Область действия функции: переменную можно использовать в теле функции.

Область действия блока: переменная, которую можно использовать между двумя фигурными скобками.

Проверьте эту ссылку в MDN

let x = 1;

if (x === 1) {
let x = 2;

console.log(x);
// expected output: 2
}

console.log(x);
// expected output: 1

Взгляните на это изображение, я создал один очень простой пример для демонстрации переменных const и let. Как видите, при попытке изменить переменную const вы получите сообщение об ошибке (Попытка переопределить «имя», которое является постоянным »), но посмотрите на переменную let ...

Сначала мы объявляем let age = 33, а затем назначаем другое значение age = 34;, и это нормально, у нас нет ошибок, когда мы пытаемся изменить let переменную.

Область действия переменной var - это функция и глобальная область, но область действия переменной let - область блока (фигурная скобка {}).

const myFun=()=> {
      var str1 = "hello";
      let str2 = "program";
    
      console.log(str1, str2); // hello program
    
      {
        var myvar1 = "hiii"
        let myvar2 = "ooo";
        console.log(myvar1, myvar2); // hiii ooo
      }
    
      console.log(myvar1); // hiii
      console.log(myvar2); // ReferenceError
    }
    console.log(myvar1); // not defined
    myFun();

ECMAScript 6 добавил еще одно ключевое слово для объявления переменных, кроме "const", кроме "позволять".

Основная цель введения «let» и «const» вместо «var» - иметь область видимости блока вместо традиционной лексической области видимости. В этой статье очень кратко различие между var и let, а также обсуждение const.

До 2015 года использование ключевого слова var было единственным способом объявить переменную JavaScript.

После ES6 (версия JavaScript) он допускает 2 новых ключевых слова: let и const.

let = можно переназначить
const = нельзя переназначить (const, которое происходит от константы, краткой формы 'const')

Пример:

• Предположим, что для объявления названия страны / имени вашей матери здесь больше всего подходит const. потому что у вас меньше шансов изменить название страны или фамилию матери рано или поздно.

• Ваш возраст, вес, зарплата, скорость велосипеда и другие подобные данные, которые часто меняются или требуют переназначения. в этих ситуациях используется let.

Используйте ключевое слово var только тогда, когда вы хотите установить глобальную переменную в своем скрипте или вы хотите повторно объявить ту же переменную в той же области. Когда появился ES2015, используйте ключевое слово let, если вы хотите установить переменную в качестве области действия функции, области блока, области цикла или не хотите повторно объявлять переменную в той же области.