Вы же помните карточки библиотечного каталога, верно?

Это вторая запись в моей серии блогов Академия аналогий, в которой концепции Javascript исследуются с помощью аналогий. Прочтите вступление к серии здесь

Если вы миллениал или не миллениал, но не любите книги, возможно, вы ничего не знаете о карточках библиотечного каталога. Хотя с 1700-х годов существовали различные версии этого инструмента, первый каталог библиотечных карточек, специально предназначенный для публичного использования в США, был создан в 1863 году.

Идея карточек библиотечного каталога достаточно проста.

Библиотеки могут быть большими и содержать бесчисленное количество книг. Когда вы имеете дело с десятками полок, бывает сложно отследить конкретную книгу. В каталоге библиотечных карточек каждой книге будет назначен читательский билет, и все карточки будут храниться в одном предмете мебели (см. Выше). Таким образом, вместо того, чтобы бесконечно бродить по библиотеке в поисках того, кто знает, сколько времени, можно было просто рыться в библиотечных карточках в поисках книги, которую они хотели, и карточка указала бы им, где эта книга хранилась в библиотеке.

Какое это имеет отношение к Javascript?

Отличный вопрос! Сегодня мы собираемся изучить переменные, один из основных строительных блоков Javascript, и вместе мы узнаем, как библиотечные карточки могут помочь нам понять, как работают переменные.

Допустим, мы создали очень простую функцию, которая после того, как пользователь вводит свое имя (например, София), возвращает фразу «Добро пожаловать, София!». Это была бы прекрасная возможность использовать переменную. Мы могли бы объявить переменную name (let name) и присвоить ей значение, равное вводу пользователя (let name = userInput). Это использует невероятно полезное свойство, принадлежащее переменным, объявленным с помощью let; значение такой переменной можно переназначить. Когда для name впервые установлено значение «София», оно не является постоянным (это будет константа или const в JavaScript). Переменная, объявленная с помощью let, может быть переназначена в блоке, в котором она определена.

А теперь вернемся к нашим библиотечным карточкам.

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

В JavaScript есть примитивные значения и ссылочные значения.

Примитивы включают Undefined, Null, Boolean, Number или String. Можно представить себе, что присвоение переменной примитивного значения было бы похоже на запись информации, к которой вам нужен доступ, прямо на библиотечной карточке с помощью Sharpie. Например, возможно, вам не нужна целая книга. Может быть, вы знаете название и просто хотите узнать об авторе. Вытащите карту, и вот она!

Однако эта информация написана Sharpie! Мы бы описали это в технических терминах, сказав, что примитивы неизменны. Это означает, что можно получить доступ к примитивному значению, присвоенному переменной, но нельзя его изменить.

Если мы объявим переменную let yearPublished = 1864, а затем отдельно напишем функцию addTen(), которая принимает yearPublished и возвращает yearPublished + 10, наша функция вернет 1874, но значение нашего исходного yearPublished останется 10 («написано в Sharpie»).

Однако со справочными значениями все работает немного иначе.

Если переменной в JavaScript назначен объект, ему будет присвоено ссылочное значение. Когда объекты инициализируются, они создаются в определенном месте в памяти вашего компьютера. Переменная, присвоенная этому объекту, получает не сам объект, а местоположение этого объекта. Это то, что называется «эталоном».

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

Чтобы глубже погрузиться в эти концепции, ознакомьтесь со следующим:

Переменные MDN

Примитивы

Примитивное значение против эталонного значения

Каталоги библиотечных карточек