ES6 в действии: let и const

ES6 в действии: let и const

От автора: в этой статье я расскажу об использовании в ES6 let и const, двух новых ключевых слов, добавленных в JavaScript с приходом ES6. Они улучшают JavaScript, предоставляя способ определения переменных и констант области видимости блока.

Эта статья является одной из многих, в которых рассматриваются новые функции JavaScript, введенные в ES6, включая Map и WeakMap, Set и WeakSet, новые методы, доступные для String, Number и Array, и новый синтаксис, доступный для функций.

let

До ES5 JavaScript имел только два типа областей видимости: область действия и глобальную область. Это вызывало множество разочарований и неожиданных действий для разработчиков, переходящих с других языков, таких как C, C ++ или Java. JavaScript не хватало области видимости блока, что означает, что переменная доступна только в блоке, в котором она определена. Блок — это все, что находится внутри открывающейся и закрывающейся фигурных скобок. Давайте рассмотрим следующий пример:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

После запуска этого кода вы увидите следующий вывод в консоли:

Большинство разработчиков, перешедших из упомянутых выше языков, будут ожидать, что за пределами блока if, мы не можем получить доступ к переменной bar. Например, запуск эквивалентного кода в C приводит к ошибке bar’ undeclared at line …, которая связана с использованием bar вне if.

Эта ситуация изменилась в ES6 с введением области видимости блока. Члены организации ECMA понимали, что они не могут изменить поведение ключевого слова var, поскольку это приведет к потере обратной совместимости. Поэтому они решили ввести новое ключевое слово, let. Последнее может использоваться для определения переменных, ограничивая их область действия блоком, в котором они объявлены. Кроме того, в отличие от var, переменные, объявленные с использованием let, не поднимаются. Если вы ссылаетесь на переменную в блоке до того, как встретится объявление этой переменной, это приведет к созданию ReferenceError. Но что это означает на практике? Это полезно только для новичков? Вовсе нет!

Чтобы объяснить вам, чем полезно let, давайте рассмотрим следующий код, взятый из моей статьи 5 дополнительных заданий для собеседования по JavaScript:

Здесь вы можете узнать хорошо известную проблему, которая связана с объявлениями переменных, их областью действия и обработчиками событий. Если вы не знаете, о чем я говорю, перейдите к статье, о которой я упоминал выше, а затем возвращайтесь. Благодаря ES6 мы можем легко решить эту проблему, объявив переменную i в цикле for, используя let:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Оператор let поддерживается в Node и во всех современных браузерах. Однако есть несколько проблем, связанных с Internet Explorer 11, о которых вы можете узнать из таблицы совместимости ES6. Ниже приведена онлайн демо-версия, иллюстрирующая разницу между var и let, она доступна на JSBin:

const

const предназначена для удовлетворения общей потребности разработчиков связывать мнемоническое имя с заданным значением, так чтобы значение не могло быть изменено (или более простыми словами для определения константы). Например, если вы работаете с математическими формулами, вам может понадобиться создать объект Math. Внутри этого объекта вы хотите связать значения π и e с мнемоническим именем. const позволяет сделать это. Используя его, вы можете создать константу, которая может быть глобальной или локальной для функции, в которой она объявлена.

На константы, определенные с помощью const, распространяются те же правила области видимости, что и на переменные, но их нельзя переопределить. Константы также как и переменные, созданные с помощью let, имеют область видимости блока, а не функции (и, следовательно, они не поднимаются). Если вы попытаетесь получить доступ к константе до ее объявления, вы получите ReferenceError. Если вы попытаетесь назначить другое значение переменной, объявленной с помощью const, вы получите TypeError.

Однако обратите внимание, что const не являются неизменяемыми. Как утверждает Матиас Байненс в своем посте в блоге ES2015 const не являются неизменяемыми, const создает неизменную привязку, но это не значит, что само значение неизменно, как показывает следующий код:

Если вы хотите, чтобы значения объекта были действительно неизменными, используйте Object.freeze(). const, как и let поддерживаются браузерами одинаково хорошо. Оператор const поддерживается в Node и во всех современных браузерах. Но имеет место ряд ошибок в Internet Explorer 11, о которых вы можете узнать из таблицы совместимости ES6. Ниже приведен пример использования const:

Ниже приведена демо-версия предыдущего кода, она также доступна на JSBin.

Заключение

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

Автор: Aurelio De Rosa

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по NodeJS. Основы

Прямо сейчас посмотрите курс по NodeJS!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree