В прошлый раз я писал о подъеме переменных и функций. И сегодня я собираюсь написать о новом способе объявления переменных в ES6, последней версии javascript.
Все эти годы мы объявляли переменные с помощью ключевого слова «var». И одна из распространенных проблем заключается в том, что он не соответствует объему блочного уровня. Он всегда предоставлял область действия на функциональном уровне.
Что такое блок?
Все, что заключено в фигурные скобки ({…}), можно назвать блоком, в который мы помещаем одно или несколько утверждений. Обычно на основе этих фигурных скобок мы форматируем наш код с помощью клавиш табуляции. Я прав?
Мы используем блоки {} при написании операторов function, if-else, for, while и switch.
Что Джон увидит в консоли, если запустит приведенный ниже фрагмент?
for(var i = 0; i < 10; i++){
setTimeout(function(){ console.log(i)},100);
}
Джон ожидал увидеть числа, напечатанные от 1 до 10. Но он увидел только 10, отображаемые 10 раз. Джон не мог понять, как это произошло.
Это потому, что переменная «i» находится вне блока «for». И каждый раз, когда цикл выполняется, это одно и то же «i». И когда цикл выполняется 10 раз, «i» становится «10». Через несколько микросекунд, когда вызывается наш setInterval, «i» не может иметь никакого другого значения, кроме 10.
позволять
ES6 вводит ключевое слово «let», которое обеспечивает область действия на уровне блоков, и мы можем использовать его вместо «var». Теперь давайте перепишем наш пример.
for(var i = 0; i < 10; i++){
setTimeout(function(){ console.log(i)},100);
}
Если мы запустим это, мы получим ожидаемый результат. т.е. числа напечатаны от 1 до 10. Это потому, что переменная «i» находится внутри блока for, и каждый раз, когда цикл запускается, он создает новый «i», и, следовательно, мы можем увидеть ожидаемый результат.
Выражение функции с немедленным вызовом (IIFE)
Очень часто мы используем IIFE, как показано ниже, чтобы избежать использования глобальных переменных. И мы знаем, что наличие глобальных переменных может создавать конфликты между библиотеками и приводить к неожиданным ошибкам и неподдерживаемому коду. Глобальные переменные — это плохо.
(function(){
var id = 100;
})();
Но этот IIFE больше не нужен, так как «let» обеспечивает область видимости на уровне блоков. Мы избегаем глобального охвата, как показано ниже.
{
let id = 100;
}
Это выглядит круто. И мы можем использовать блоки независимо друг от друга без каких-либо сопутствующих ключевых слов.
константа
Если значение вашей переменной не будет постоянно меняться, объявите ее с помощью ключевого слова «const».
Если мы попытаемся изменить значение в любое время в будущем, это вызовет ошибку. const помогает нам уменьшить вероятность ошибок.
const myId = 100; . . myId = 200; // TypeError
Но для изменяемых значений, таких как массив или объект, ключевое слово const только гарантирует, что оно не будет переназначено. Но это не вызовет никакой ошибки, если мы изменим значение;
const marks = [95,92,78] . . marks[0] = 80; // No Error marks = [80, 90, 79]; // TypeError
Javascript по-прежнему остается нетипизированным языком. Это означает, что при объявлении переменной мы не можем сказать им хранить только данные определенного типа, скажем, число или строку. Если пользователь хочет иметь эту функцию, он может использовать Typescript, который позволяет разработчику поддерживать тип данных, а затем компилируется в простой javascript.
Переменные, объявленные с использованием ключевых слов «let» и «const», не будут подняты.
Вывод:
Что ж, теперь у нас есть три способа (var, let, const) объявления переменной. Но когда что использовать? В каком порядке мы должны расставлять приоритеты?
Совет экспертов таков:
- Всегда старайтесь использовать «const» везде, где это возможно.
- Если вы собираетесь переназначить свою переменную, используйте «let»
- Никогда не используйте «var», так как у «var» нет действительного преимущества перед «let».
