Понимание ES6 | Разница между ключевыми словами "var", "const" и "let"

Известный нам язык JavaScript является надмножеством ECMAScrpt. Ядро JavaScript определено в ECMA-262, все типы данных, такие как переменные, функции, массив, объекты и т. Д., Определены в ECMA-262.

ECMAScript 6 был формализован в 2015 году и официально назывался «ECMAScript 2015». ECMAScript 6 включает очень широкие и совершенно новые объекты и шаблоны, изменения синтаксиса новых методов для существующих объектов. Основное внимание в ECMAScript 6 уделяется решению проблем, с которыми сталкивались разработчики.

В этом блоге я объясню разницу между объявлением переменных var, let и const.

Ключевое слово var

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

function getVars(condition) {
   if (condition) {
      var vars = "abc";
      return vars;
   } else {
      // vars is available here but value of vars will be undefined
     return null;
   }
   console.log(vars); // vars will print out - 'abc', if condition is true
}

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

function getVars(condition) {
   var vars; // vars will get hoisted on top of function
   if (condition) {
      vars = "abc";
      return vars;
   } else {
      // vars is available here but value of vars will be undefined
      return null;
   }
   console.log(vars); // vars will print out - 'abc', if condition is true
}

Как видно из приведенного выше кода, переменная vars объявлена ​​поверх функции, но ее инициализация происходит в том же месте, что и раньше. Таким образом, если условие возвращает false, переменная vars по-прежнему доступна со значением undefined.

Именно из-за такого поведения многие новые разработчики JavaScript могут неправильно понять подъем переменной и в конечном итоге столкнуться с ошибками. По этой причине в ECMAScript 6 было введено объявление уровня блока, чтобы сделать переменную более мощной, и были введены еще два типа данных, называемые let и const.

Ключевое слово let

Объявление ключевого слова let такое же, как и ключевое слово var. Вы можете просто заменить ключевое слово var на let, и все. Единственная разница в том, что let ограничит область действия переменной только внутри уровня блока (не на уровне функции). Давайте разберемся в приведенном выше примере с помощью let:

function getVars(condition) {
   if (condition) {
      let vars = "abc";
      return vars;
   } else {
      // vars is not accessible here return null;
   }
   console.log(vars); // vars will throw error regardless of the condition result.
}

Объявление let - это объявление уровня блока, поэтому после выхода функции из блока if (condition) { ... } переменная vars станет недоступной для функции. Вот почему он выдаст ошибку, когда вы попытаетесь вызвать его в console.log(vars);. Итак, чтобы переменная, объявленная с помощью let, была доступна через функцию, вам необходимо объявить ее поверх функции, как показано ниже:

function getVars(condition) {
   let vars;
   if (condition) {
      vars = "abc";
      return vars;
   } else {
      // vars will be accessible here return null;
   }
   console.log(vars); // vars will print out - 'abc', if condition is true else it will print 'undefined'.
}

Ключевое слово const

ECMAScript 6 также включает еще один способ объявления переменной с именем const. Переменная, объявленная с использованием const, будет постоянной на протяжении всей функции и не может быть изменена после объявления. Вот почему каждая const переменная должна быть инициализирована в своем объявлении, как показано ниже:

const firstName = "Ashish";   // valid constant
// throws error
firstName = "Panchal";
// invalid constant
const lastName;        // it needs to be initialized as well

Аналогично объявлению let Объявление const также является объявлением уровня блока, это означает, что переменная, объявленная с помощью const, не будет доступна за пределами области действия блока.

if (condition) {
   const vars = "abc";
}
// throws error
console.log(vars);    // vars will not be accessible here

В приведенном выше коде vars объявлен с const, и после завершения выполнения условия if переменная vars не будет доступна за пределами блока.

Любая переменная, объявленная в коде с помощью var или let, не может использоваться для повторного объявления ее с помощью const, см. Пример ниже:

var vars = "abc";
let num = 50;
// both throws error
const vars = "def";
const num = 100;

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

Первоначально опубликовано на сайте ashishuideveloper.in 15 сентября 2018 г.