Бесконечные дебаты. Должны ли вы использовать var, let или const при объявлении переменных (идентификаторов) в вашей программе JavaScript? В этом посте вы узнаете мое личное мнение об использовании этих различных синтаксических форм, и я попытаюсь объяснить, почему вы должны или не должны их использовать.

Прежде всего, давайте проясним кое-что — я не собираюсь защищать (может быть, немного) или рассказывать вам, какую синтаксическую форму вы должны использовать в своих программах JavaScript для объявления переменной. Я здесь, чтобы указать на различия и заставить вас задуматься о них — затем проведите свое собственное (более тщательное исследование) и решите, что вам следует использовать.

Примитивы против объектов?

В JavaScript есть два типа значений — примитивы и объекты. Основное различие между ними заключается в том, как они хранятся в памяти. Я не буду вдаваться в подробности того, как работает память (оставим это на другой день), но постараюсь упростить для вас. Имейте в виду, что это огромное упрощение памяти, и я использую этот рисунок только для того, чтобы показать вам, что происходит, когда вы сохраняете примитив по сравнению с объектом.

Давайте посмотрим на этот код:

⁠var name = "Ivan";

Когда мы объявляем переменную name и инициализируем ее значение "Иван", память выделяет место и сохраняет точноезначение этой переменной в "value" подал.

С другой стороны, если бы мы создали объект вроде:

var person = { name: "Ivan" }

затем память сохраняет ссылку(…начальное местоположение) на этот объект в поле «значение», а не сам объект. Вот почему, когда вы сравниваете два одинаковых примитива в JavaScript с тройными знаками равенства (===), вы получаете «true», но если вы сравниваете два (по крайней мере, вы думаете, что они одинаковые) объекты, вы получаете «ложь». И я не могу этого не подчеркнуть, на этой картинке выше показано не то, как выглядит память, а то, как она работает под капотом. Это просто упрощение для лучшего понимания.

Подробнее о разнице между примитивами и объектами в JavaScript можно прочитать здесь:

Объявление и использование переменных

Теперь, когда мы знаем разницу между значениями primitive и значениями object (и да, объекты тоже являются значениями, они просто сохраняются в памяти как ссылка), мы можем поговорить об объявлении ( создание) их.

Итак, давайте сначала поговорим о том, что означает объявление переменной. Допустим, у вас есть литерал значения, например:

{ firstName: "Ivan", lastName: "Horvat" }

и мы хотим сохранить его в памяти. Мы должны создать переменную и дать ей имя (JavaScript не требует от вас указания типа переменной, как в некоторых других языках программирования):

var person;

И затем, если мы хотим установить значение этой объявленной переменной, мы должны инициализировать ее:

person = { firstName: "Ivan", lastName: "Horvat" }

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

var person = { firstName: "Ivan", lastName: "Horvat" }

И когда мы узнаем разницу между значениями и переменными и что означает объявление и инициализация переменной, давайте взглянем на различные формы синтаксиса для объявления переменной в JavaScript.

Хорошо, что мы должны использовать при объявлении переменных в JS?

Когда появился ES6 и представил const и let, все, кажется, поддались ажиотажу и сразу же начали их использовать. По крайней мере, мне так сказали, потому что тогда я не был разработчиком JavaScript. Но я сейчас и попытаюсь объяснить, почему так произошло. В JS есть такая вещь, как область действия. Область определяет ограничение использования переменной внутри некоторого блока кода или программы. Что это значит? По сути, вы можете определить, хотите ли вы, чтобы какая-то переменная была доступна только в какой-то части вашего кода или во всей программе.

Давайте посмотрим на пример:

const hasLegs = true;
if (hasLegs) {
    var animal = "dog";
    let animalName = "Sam";
    console.log(`I have a ${animal} named ${animalName}`);
}
console.log(animal);
// dog
console.log(animalName);
// Error!

Если мы попытаемся получить доступ к animalName вне оператора if, мы получим ошибку. Это связано с тем, что let имеет блочную область видимости, что означает, что переменная, определенная (объявленная и инициализированная) с помощью ключевого слова let, может быть доступна только внутри этого блока кода (внутри скобок {}).

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

const hasLegs = true;
let age = 6
if (hasLegs) {
    age = age + 1  // OK!
    hasLegs = false  // Error!
}

Существуют большие различия между let (или var) и const.

  1. переменная, объявленная с помощью const, должна быть инициализирована (ей должно быть присвоено значение в момент объявления)
  2. вы не сможете повторно присвоить значение переменной const позже

Но если вы не можете повторно присвоить значение переменной const, это не означает, что переменные, объявленные с помощью const, являются «неизменяемыми». Давайте посмотрим на пример:

const animals = [ "dog", "cat" ]
animals = []   // Error!
animals[2] = "fish"  // OK!

Таким образом, даже если мы объявили массив как const, мы все равно можем изменить его значения! И почему так? Мы не зря начали этот пост с примитивов и объектов. Помните, мы говорили, что объекты (а массив — это особый тип объектов в JS) хранятся в памяти по ссылке? Несмотря на то, что мы изменили и массив, мы не изменили ссылку, хранящуюся в поле значения этой переменной.

Итак, теперь вы ожидаете моего совета о том, какую синтаксическую форму объявления переменной вам следует использовать? И, как вы, вероятно, читали уже сто раз, я предпочитаю

let and const

но это не значит

var

плохо. Просто нужно понимать разницу между ними. И если вы новичок или переходите с другого языка, я бы посоветовал придерживаться let и const, потому что это немного упростит вам процесс отладки.