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 не хватало области видимости блока, что означает, что переменная доступна только в блоке, в котором она определена. Блок — это все, что находится внутри открывающейся и закрывающейся фигурных скобок. Давайте рассмотрим следующий пример:

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, не поднимаются. Если вы ссылаетесь на переменную в блоке до того, как встретится объявление этой переменной, это приведет к созданию ReferenceError. Но что это означает на практике? Это полезно только для новичков? Вовсе нет!

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

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
  nodes.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.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 создает неизменную привязку, но это не значит, что само значение неизменно, как показывает следующий код:

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 в ближайшее время не будет отменено, я бы рекомендовал вам по возможности использовать 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree