X

Javascript: разница между var и let

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

Синтаксис обоих объявлений похож

var testVar;
let testVar;

Отличие 1: let в отличии от var, не добавляется к глобальному объекту window,  при объявлении в глобальной области видимости.

var testVar = 'Test var';
let testLet = 'Test let';

console.log(typeof window.testVar);
console.log(typeof window.testLet);

// string
// undefined

Отличие 2: видимость переменной объявленной через let, ограничивается блоком объявления

{
    var testVar = 'Test var';
    let testLet = 'Test let';
}
console.log(testVar);
console.log(testLet);

// Test var
// ReferenceError: testLet is not defined

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

for (var i=0; i<10; i++);
console.log(i);

for (let j=0; j<10; j++);
console.log(j);

// 10
// ReferenceError: j is not defined

Отличие 3: переменные объявленные через let нельзя объявить повторно.

Пример с var

var testVar = 'Test var';
var testVar = 'Test var 1';
console.log(testVar);

// Test var 1

Пример с let

let testLet = 'Test let';
let testLet = 'Test let 1';
console.log(testLet);

// SyntaxError: redeclaration of let testLet script-01.js:6:4 note: Previously declared at line 5, column 4

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

var testVar = 'Test var';
testVar = 'Test var 1';

let testLet = 'Test let';
testLet = 'Test let 1';

console.log(testVar);
console.log(testLet);

// Test var 1
// Test let 1

Отличие 4: let позволяет избавиться от классической проблемы замыканий

Пример с var. В замыкании сохраняется ссылка на i, а не его значение

for (var i=0; i<5; i++) {
    setTimeout(()=>{
        console.log(i);
    },0);
}

// 5
// 5
// 5
// 5
// 5

Пример с let. В замыкании сохраняется значение i, а не ссылка на него

for (let i=0; i<5; i++) {
    setTimeout(()=>{
        console.log(i);
    },0);
}

// 0
// 1
// 2
// 3
// 4

Выводы

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

Когда использовать let, а когда var?

Пожалуй еще один вопрос, на который стоит ответить, это как определиться коогда использовать var, а когда let. Я отвечу так: всегда используйте let и забудьте про var!

Категории: JavaScript
Тэги: letvar