Часть 2: Var vs Const vs Let

Эта статья является частью 2 из серии «Современный ES6 + Javascript для тех, кто мало знает об этом старом Javascript».

Источники: Эта часть серии статей была взята из книги Понимание ECMAScript 6 Николаса К. Закаса .

Ваше здоровье! Эта история была переиздана и спонсирована tech.io
# opensourceknowledge # LearnForFree

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

Объявления переменных с использованием var обрабатываются так, как если бы они находились в верхней части функции (или в глобальной области, если они объявлены вне функции), независимо от того, где происходит фактическое объявление; это называется подъемом. См. Пример ниже, чтобы увидеть, что делает подъем:

function getValue(condition) {
  if (condition) {
    var value = "blue";
    // other code
    return value;
  } else {
    // value exists here with a value of undefined
    return null;
  }
  // value exists here with a value of undefined
}

Если вы новичок в JavaScript, вы можете подумать, что значение переменной будет создано только в том случае, если условие оценивается как истинное. На самом деле, движки JavaScript работают не за кулисами; значение переменной создается независимо от того, как движок изменяет функцию getValue, чтобы она выглядела примерно так:

function getValue(condition) {
  var value;
  
  if (condition) {
    value = "blue";
    // other code
    return value;
  } else {
    return null;
  }
}

Объявление значения поднимается наверх, а инициализация остается на том же месте. Это означает, что значение переменной по-прежнему доступно из предложения else. Это происходит так, поскольку переменная просто имеет значение undefined, наоборот, поскольку она не была инициализирована.

См. также:  Импорт нескольких экспортированных классов с одинаковым именем - основы Angular

Очевидно и понятно, что новым разработчикам JavaScript будет непросто научиться поднимать объявления, но учтите, что неправильное понимание этого уникального поведения может привести к ошибкам. Чтобы решить эту проблему, ES6 представил параметры области видимости на уровне блоков, чтобы сделать управление жизненным циклом переменной немного более мощным.

Объявления на уровне блоков

Объявления уровня блока — это объявления, которые объявляют переменные, которые находятся далеко за пределами заданной области действия блока. Области видимости блока, также известные как лексические области видимости, создаются либо внутри функции, либо внутри блока (обозначены символами { и }). Область видимости блока — это то, сколько языков на основе C работает, и введение объявлений уровня блока в ECMAScript 6 предназначено для обеспечения такой же гибкости (и единообразия) в JavaScript.

Пусть декларация

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

function getValue(condition) {
  if (condition) {
    let value = "blue";
    // other code
    return value;
  } else {
    // value doesn't exist here
    return null;
  }
  // value doesn't exist here
}

Ниже приведен снимок экрана, на котором показана разница между var и let (проверьте комментарии в блоке кода).

Как видите, функция getValue с let ведет себя аналогично другим языкам программирования. Поскольку значение переменной объявляется с использованием let вместо var, объявление не поднимается в верхнюю часть определения функции, и значение переменной становится недоступным после того, как выполнение вытекает из блока if. Если условие оценивается как ложное, значение никогда не объявляется и не инициализируется.

См. также:  #pragma mark и настраиваемые предупреждения и ошибки в XCode

Нет повторного объявления

Если идентификатор уже был определен в области видимости, то использование идентификатора в объявлении let внутри этой области вызывает ошибку. Проверьте ниже:

var count = 30;
// Error: `count` has already been declared.
let count = 40;

В этом примере счетчик объявляется дважды: один раз с var и один раз с let. Поскольку let не будет переопределять идентификатор, который уже существует в той же области, объявление let вызовет ошибку.

С другой стороны, ошибка не появляется, если объявление let создает новую переменную с тем же именем, что и переменная в содержащей ее области видимости, проверьте код ниже:

var count = 30;
if (condition) {
  // Does not throw an error
  let count = 40;
  
  // more code
}

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

Постоянные объявления

Кроме того, вы можете определять переменные в ES6 с синтаксисом объявления const. Переменные, объявленные с помощью ключевого слова const, считаются константами, а это означает, что их значения нельзя изменить после установки. Таким образом, каждая константная переменная должна быть инициализирована в объявлении, как показано ниже:

// Valid constant
const maxItems = 30;
// Syntax error: missing initialization
const name;

Переменная maxItems инициализируется, поэтому ее объявление const должно работать без проблем. Однако переменная name вызовет синтаксическую ошибку, если вы попытаетесь запустить программу, содержащую этот код, потому что имя не инициализировано.

Большое спасибо…

  • Если вам понравилась моя статья, а также моя страсть к преподаванию, не забудьте подписаться на меня, а также на CodeBurst, нажав на ссылки ниже.
  • Если вы хотите нанять меня для вашего следующего крутого проекта или просто поздороваться … мой идентификатор в твиттере — @harmanmanchanda, за то, что я связался со мной! Мои DM открыты для публики, так что просто напишите мне.
Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: