TLDR:

Какое ключевое слово следует использовать при создании новой переменной?…

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

Let: всякий раз, когда вы используете let, вы должны иметь возможность обосновать, почему переменная должна быть переназначена.

Вар: Никогда.

Собственно статья:

ES2015 представил множество замечательных новых утилит для разработчика JavaScript. Это включает в себя добавление двух новых ключевых слов, используемых для определения переменных: const и let. Но зачем вводить новые ключевые слова, которые, кажется, делают то же самое, что и уже существующее ключевое слово var? На самом деле все эти ключевые слова имеют свои уникальные особенности (а в случае с var—причуды).

Так что же это за уникальные функции, которые привносят эти новые ключевые слова? Ну, прежде чем я углублюсь в это, я просто хочу сказать одну вещь: вы никогда не должны использовать var снова, используйте вместо этого let. Имейте это в виду, когда будете читать эту статью.

Вар против Лет

Let в основном гораздо более безопасная и разумная версия var. Вы можете думать о варе как о злом близнеце. Вот основные отличия:

Область действия

var ограничен функцией:

function logStuff(array) {
  for (var i = 0; i < array.length; i += 1) {
    console.log(array[i]);
  }
  console.log(i); // -> 2
}
logStuff(['Jannelle', 'Jon', 'Haley']);

let имеет блочную область видимости:

function logStuff (array) {
  for (let i = 0; i < array.length; i += 1) {
    console.log(array[i]);
  }
  console.log(i) // undefined
}
logStuff(['Jannelle', 'Jon', 'Haley']);

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

Подъем

При создании переменной с помощью var фактическая переменная «поднимается» наверх своей области действия раньше. По сути, это означает, что перед тем, как компилятор запустит какой-либо код, он сначала найдет все объявления var и сделает следующее:

  1. Создайте соответствующее пространство в памяти для переменной.
  2. Сделайте ссылку (имя переменной) доступной в верхней части текущей функции.

Например, эти две функции функционально идентичны:

function varSucks() {
  var x;
  x = 2;
  console.log(x);
}
function varSucks2() {
  x = 2;
  console.log(x);
  var x;
}

Однако при использовании let ссылки создаются только после запуска фактической строки, в которой объявлена ​​​​переменная.

Например:

function letIsBetter() {
  x = 2;
  console.log(x); // Reference Error (this is a good thing)
  let x = 4;
}

Так почему именно это хорошо для нас? Короче говоря, использование let заставляет нас писать более разумный код и предотвращает неприятные ошибки.

Const: лучший из трех.

Хорошо, я солгал. Я сказал вам, пусть это новый вар. Ну, правда в том, что const на самом деле является новой переменной var, в большинстве случаев это так. Это потому, что каждый раз, когда вы можете использовать const, вы должны это делать, а в остальных случаях вы можете использовать let. Const — это сокращение от константы. Когда вы используете ключевое слово const, вы, по сути, говорите: «Создайте переменную (или, что еще лучше, привязку значения) и не позволяйте ей переназначаться».

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

Например, это было бы совершенно нормально:

const name = 'Chis';
let age = 24;
age += 1;
console.log(age) // -> 25

Хотя это вызовет ошибку:

const name = 'Chris';
const age = 24;
age += 1; // TypeError: Assignment to constant variable.

При этом это работает просто отлично:

const friends = ['Jannelle', 'Jon', 'Haley'];
friends.push('Ian');
console.log(friends) // ['Jannelle', 'Jon', 'Haley', 'Ian'];

Это потому, что мы не переназначаем переменной новое значение, а скорее манипулируем существующим значением. То же самое касается объектов и других структур данных Javascript.

Подсказка: если вы когда-нибудь запутались, если операция переназначает, ищите знак равенства. Не видите ни одного? Тогда, вероятно, никакого назначения не происходит.

Так почему const вместо let?

Использование констант для переменных, которые не собираются изменяться, предотвращает ошибки разработчика и поощряет более функциональный подход при решении проблем.

Спасибо за чтение

Хотя между этими ключевыми словами есть еще несколько различий, я считаю, что разработчики JavaScript должны помнить об этом при создании своего кода.