От автора: в этой статье я расскажу об использовании в ES6 let и const, двух новых ключевых слов, добавленных в JavaScript с приходом ES6. Они улучшают JavaScript, предоставляя способ определения переменных и констант области видимости блока.
Эта статья является одной из многих, в которых рассматриваются новые функции JavaScript, введенные в ES6, включая Map и WeakMap, Set и WeakSet, новые методы, доступные для String, Number и Array, и новый синтаксис, доступный для функций.
let
До ES5 JavaScript имел только два типа областей видимости: область действия и глобальную область. Это вызывало множество разочарований и неожиданных действий для разработчиков, переходящих с других языков, таких как C, C ++ или Java. JavaScript не хватало области видимости блока, что означает, что переменная доступна только в блоке, в котором она определена. Блок — это все, что находится внутри открывающейся и закрывающейся фигурных скобок. Давайте рассмотрим следующий пример:
|
1 2 3 4 5 6 7 8 9 10 11 |
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 3 4 |
1 2 1 2 |
Большинство разработчиков, перешедших из упомянутых выше языков, будут ожидать, что за пределами блока if, мы не можем получить доступ к переменной bar. Например, запуск эквивалентного кода в C приводит к ошибке bar’ undeclared at line …, которая связана с использованием bar вне if.
Эта ситуация изменилась в ES6 с введением области видимости блока. Члены организации ECMA понимали, что они не могут изменить поведение ключевого слова var, поскольку это приведет к потере обратной совместимости. Поэтому они решили ввести новое ключевое слово, let. Последнее может использоваться для определения переменных, ограничивая их область действия блоком, в котором они объявлены. Кроме того, в отличие от var, переменные, объявленные с использованием let, не поднимаются. Если вы ссылаетесь на переменную в блоке до того, как встретится объявление этой переменной, это приведет к созданию ReferenceError. Но что это означает на практике? Это полезно только для новичков? Вовсе нет!
Чтобы объяснить вам, чем полезно let, давайте рассмотрим следующий код, взятый из моей статьи 5 дополнительных заданий для собеседования по JavaScript:
|
1 2 3 4 5 6 |
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:
|
1 2 3 4 5 6 |
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 не являются неизменяемыми. Как утверждает Матиас Байненс в своем посте в блоге ES2015 const не являются неизменяемыми, const создает неизменную привязку, но это не значит, что само значение неизменно, как показывает следующий код:
|
1 2 3 4 |
const foo = {}; foo.bar = 42; console.log(foo.bar); // → 42 |
Если вы хотите, чтобы значения объекта были действительно неизменными, используйте Object.freeze(). const, как и let поддерживаются браузерами одинаково хорошо. Оператор const поддерживается в Node и во всех современных браузерах. Но имеет место ряд ошибок в Internet Explorer 11, о которых вы можете узнать из таблицы совместимости ES6. Ниже приведен пример использования const:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
'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 в ближайшее время не будет отменено, я бы рекомендовал вам по возможности использовать let и const, чтобы уменьшить подверженность вашего кода ошибкам.
Автор: Aurelio De Rosa
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
