Когда мы изучаем язык программирования, появляются несколько основных понятий, таких как объявление переменных, и они настолько просты, что мы можем начать их использовать без каких-либо знаний об их функционировании.
Я знаю о чем вы подумали: «Зачем вы тратите время на то, чтобы написать нам об этом?»
Потому что я думаю, что стоит потратить несколько минут, чтобы глубже понять эти элементы, каково их значение и как мы должны их использовать. Это вам избежать некоторых распространенных ошибок и написать код лучше.
В этой статье мы сосредоточимся на том, как хранить данные в JavaScript.
Var
«Давным-давно в далекой галактике…» единственным вариантом определения переменных в JavaScript было использование ключевого слова var, и этого было достаточно для управления данными в коде. Но с введением стандарта ES6 некоторые странности и недостатки старого JS стали довольно очевидными:
Область действия: ключевое слово var позволяет определять переменные только в глобальной и локальной области (либо в области функции). Неважно, сколько у вас вложенных блоков кода, есть только эти две возможности.
Константы: если вы хотите определить что-то, что не будет изменяться во время выполнения кода, вы можете положиться только на здравый смысл разработчиков. Мы можем использовать некоторые полезные соглашения, чтобы разъяснить смысл (например, прописные буквы), но нет ничего, что могло бы гарантировать, что значение не изменится.
Переопределение переменных: вы можете повторять объявление одной и той же переменной, столько раз, сколько хотите (в одной и той же области видимости), и это немного сбивает с толку, если вы хотите сохранить переменные уникальными.
Определения
Прежде чем начать с технических вещей, давайте введем некоторые общие определения:
Переменная — это «контейнер», в котором хранятся многократно использованные данные (очень тривиально).
Идентификаторы — это имена переменных (тоже очень тривиально).
Блок — это фрагмент кода, разделенный парой фигурных скобок (ccskrf), например: if, for, function, и. т. д.
Область действия, определяет видимость переменных внутри кода. Если у вас есть какие-либо сомнения, спросите себя: «Где в коде видна моя переменная?»
ПРИМЕЧАНИЕ , не путайте область действия с контекстом выполнения, который является разными.
** Контекст (или контекст выполнения) ** — это среда, в которой выполняется код JavaScript. Для простоты можно сказать, что контекст — это объект, которому принадлежит код, а this — это ключевое слово, которое является ссылкой на него. Поэтому спросите себя: «На какой объект ссылается this?»
Теперь предположим, что наш разработчик очень увлечен Star Wars (это хорошо), но с подозрением относится к новым стандартам, таким как ES6 (что плохо), хотя существует он уже некоторое время. Поэтому он предпочитает писать свой код в старом стиле ES5, и это будет выглядеть так:
console.log("I am a %s", jedi); var jedi = "Ani"; // выведите переменную jedi перед ее определением // => Я undefined function useTheForce(comeToTheDarkSide) { var jedi = "Obi-Wan Kenobi"; var jedi = "Anakin Skywalker"; if (comeToTheDarkSide) { var jedi = "Darth Vader"; console.log("I am %s", jedi); // => I am Darth Vader } console.log("I am %s", jedi); // Я Darth Vader } useTheForce(true); console.log("I am %s", jedi); // =>Я Ani
Как вы видите, есть три блока кода (включая и глобальный), но только две области видимости. Это из-за того, что код в скобках if не создает область видимости. Консоль выдаст «Я Дарт Вейдер» два раза, а затем «Я Ани» в глобальном масштабе.
Также обратите внимание, что одна и та же переменная объявляется два раза подряд внутри функции, а затем еще раз в выражении if. Это означает, что мы имеем объявление одной и той же переменной в одной и той же области видимости три раза, из-за чего выдается исключение.
Последним, но не менее важным является вывод первого log: мы выведем значение нашей переменной перед ее определением. Это совершенно законно с var и называется «Поднятием (hoisting)».
«Подъем» предполагает, что объявленные переменные и функции физически перемещаются в начало вашего кода. Технически происходит объявления переменных и функций, которые помещаются в память на этапе компиляции, но остаются в коде именно там, где вы их написали. Основная важность подъема состоит в том, что он позволяет вам использовать функции перед тем, как объявлять их в своем коде.
Об этом вы можете почитать здесь.
В нашем примере объявление переменной «jedi» помещается в память и инициализируется значением по умолчанию (undefined).
Let
На данный момент наш разработчик понимает, что ES6 не так уж и плох, и он решает дать let шанс:
console.log("I am a %s", jedi); let jedi = "Ani"; // выведем переменную jedi перед
