В этом уроке я представлю let и const , два новых ключевых слова, добавленных в JavaScript с появлением ES6. Они улучшают JavaScript, предоставляя способ определения переменных и констант области блока.
Эта статья является одной из многих, посвященных новым функциям JavaScript, представленным в ES6, включая Map и WeakMap , Set и WeakSet , новые методы, доступные для String , Number и Array , и новый синтаксис, доступный для функций .
let
До ES5 JavaScript имел только два типа области действия: область действия функции и глобальная область действия. Это вызвало большое разочарование и неожиданное поведение разработчиков из других языков, таких как C, C ++ или Java. В JavaScript отсутствовала область действия блока, а это означает, что переменная доступна только в пределах блока, в котором она определена. Блок — это все, что находится внутри открывающей и закрывающей фигурной скобки. Давайте посмотрим на следующий пример:
function foo() { var par = 1; if (par >= 0) { var bar = 2; console.log(par); // prints 1 console.log(bar); // prints 2 } console.log(par); // prints 1 console.log(bar); // prints 2 } foo();
После запуска этого кода вы увидите следующий вывод в консоли:
1 2 1 2
Большинство разработчиков, работающих на упомянутых выше языках, ожидают, что за пределами блока if вы не сможете получить доступ к переменной bar . Например, выполнение эквивалентного кода на C приводит к ошибке 'bar' undeclared at line ... которая относится к использованию bar вне if .
Эта ситуация изменилась в ES6 с доступностью области видимости блока. Члены организации ECMA знали, что не могут изменить поведение ключевого слова var , поскольку это нарушит обратную совместимость. Поэтому они решили ввести новое ключевое слово let . Последний может использоваться для определения переменных, ограничивающих их область действия блоком, в котором они объявлены. Кроме того, в отличие от var , переменные, объявленные с помощью let , не отображаются. Если вы ссылаетесь на переменную в блоке до того, как встретите объявление let для этой переменной, это приведет к ReferenceError . Но что это означает на практике? Это хорошо только для новичков? Не за что!
Чтобы объяснить, почему вы полюбите let , рассмотрим следующий код, взятый из моей статьи 5 Дополнительные упражнения по JavaScript :
var nodes = document.getElementsByTagName('button'); for (var i = 0; i < nodes.length; i++) { nodes[i].addEventListener('click', function() { console.log('You clicked element #' + i); }); }
Здесь вы можете распознать хорошо известную проблему, связанную с объявлением переменных, их областью действия и обработчиками событий. Если вы не знаете, о чем я говорю, посмотрите статью, о которой я упоминал, и возвращайтесь.
Благодаря ES6 мы можем легко решить эту проблему, объявив переменную i в цикле for с помощью let :
var nodes = document.getElementsByTagName('button'); for (let i = 0; i < nodes.length; i++) { nodes[i].addEventListener('click', function() { console.log('You clicked element #' + i); }); }
Оператор let поддерживается в Node и во всех современных браузерах. Однако в Internet Explorer 11 есть несколько ошибок, о которых вы можете прочитать в таблице совместимости ES6 .
Демонстрационная версия, которая показывает разницу между var и let , показана ниже и также доступна на JSBin :
Const
const отвечает на общую потребность разработчиков связывать мнемоническое имя с заданным значением, чтобы значение не могло быть изменено (или, проще говоря, определите константу). Например, если вы работаете с математическими формулами, вам может понадобиться создать объект Math . Внутри этого объекта вы хотите связать значения π и e с мнемоническим именем. const позволяет вам достичь этой цели. Используя его, вы можете создать константу, которая может быть глобальной или локальной для функции, в которой она объявлена.
Константы, определенные с помощью const следуют тем же правилам области видимости, что и переменные, но их нельзя повторно объявить Константы также совместно используют функцию с переменными, объявленными с использованием let что они имеют область видимости блока, а не область функции (и, следовательно, они не отображаются). В случае, если вы попытаетесь получить доступ к константе до ее объявления, вы получите ReferenceError . Если вы попытаетесь присвоить другое значение переменной, объявленной с помощью const , вы получите TypeError .
Обратите внимание, однако, что const не об неизменяемости. Как утверждает Матиас Биненс в своем блоге, const ES2015 не касается неизменности , const создает неизменяемую привязку, но не указывает, что значение является неизменным, как показано в следующем коде:
const foo = {}; foo.bar = 42; console.log(foo.bar); // → 42
Если вы хотите сделать значения объекта действительно неизменяемыми, используйте Object.freeze () .
Поддержка браузера для const одинаково хороша как для let . Оператор const поддерживается в Node и во всех современных браузерах. Но и здесь есть некоторые ошибки в Internet Explorer 11, о которых вы можете прочитать в таблице совместимости ES6 .
Пример использования const показан ниже:
'use strict'; function foo() { const con1 = 3.141; if (con1 > 3) { const con2 = 1.414; console.log(con1); // prints 3.141 console.log(con2); // prints 1.414 } console.log(con1); // prints 3.141 try { console.log(con2); } catch(ex) { console.log('Cannot access con2 outside its block'); } } foo();
Демонстрационная версия предыдущего кода показана ниже и также доступна на JSBin .
Вывод
В этом уроке я представил вам let и const , два новых метода объявления переменных, которые были введены в язык с ES6. Хотя var не исчезнет в ближайшее время, я бы посоветовал вам использовать const и по возможности уменьшать восприимчивость вашего кода к ошибкам. Для дальнейшего чтения вам может также понравиться наш быстрый совет Как объявлять переменные в JavaScript , который углубляется в механику объявления переменных.