Javascript: разница между var и let
Часто замечаю, что новички или пенсионеры веб-разработки путаются между использованием var и let в Javascript. В этой статье разберемся, что и когда использовать...
Синтаксис обоих объявлений похож
|
0 1 2 3 |
var testVar; let testVar; |
Отличие 1: let в отличии от var, не добавляется к глобальному объекту window, при объявлении в глобальной области видимости.
|
0 1 2 3 4 5 6 7 8 9 |
var testVar = 'Test var'; let testLet = 'Test let'; console.log(typeof window.testVar); console.log(typeof window.testLet); // string // undefined |
Отличие 2: видимость переменной объявленной через let, ограничивается блоком объявления
|
0 1 2 3 4 5 6 7 8 9 10 |
{ var testVar = 'Test var'; let testLet = 'Test let'; } console.log(testVar); console.log(testLet); // Test var // ReferenceError: testLet is not defined |
Именно по этой причине, let рекомендуется использовать везде, где нет необходимости обращений к глобальным и родительским объектам. Вот еще один пример, который наглядно демонстрирует это свойство
|
0 1 2 3 4 5 6 7 8 9 |
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
|
0 1 2 3 4 5 6 |
var testVar = 'Test var'; var testVar = 'Test var 1'; console.log(testVar); // Test var 1 |
Пример с let
|
0 1 2 3 4 5 6 |
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 |
Пожалуй, стоит заметить, что это относится именно к объявлению переменных, обычное присваивание будет работать одинаково.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
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, а не его значение
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
for (var i=0; i<5; i++) { setTimeout(()=>{ console.log(i); },0); } // 5 // 5 // 5 // 5 // 5 |
Пример с let. В замыкании сохраняется значение i, а не ссылка на него
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
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!
Автор: | Рейтинг: / | Теги:
3 комментария
Написать свой