переменные JavaScript - это контейнеры для хранения значений данных. По сути, это одна из самых фундаментальных концепций, которую нужно усвоить. Вы наверняка слышали о трех способах объявления переменных: var, let & const. В этой статье мы рассмотрим, как мы объявляем переменные и как называем их. Мы рассмотрим, как переменные ведут себя в нашем коде, с подъемом и областью видимости (локальной и глобальной).
🤓 Хотите быть в курсе новостей веб-разработчиков?
🚀 Хотите, чтобы последние новости доставлялись прямо на ваш почтовый ящик?
🎉 Присоединяйтесь к растущему сообществу дизайнеров и разработчиков!
Подпишитесь на мою рассылку здесь → https://easeout.eo.page
Что такое переменные?
Переменные - это именованные контейнеры для хранения значений данных. Любая информация, на которую мы хотим ссылаться несколько раз, может быть сохранена в переменной для дальнейшего использования. В JavaScript значение, содержащееся внутри переменной, может быть любого типа данных, включая число, строку или объект.
До выпуска ES6 был только один способ объявить переменную - использовать ключевое слово var. Вы по-прежнему будете видеть, что var довольно часто используется при работе со старым кодом. Мы рассмотрим новые соглашения позже в статье, а пока давайте рассмотрим пример с использованием var:
// Assign a string of “John Doe” to the “name” identifier var name = “John Doe”;
Здесь мы объявили нашу переменную с помощью var, наш идентификатор - name, затем мы присвоили переменную с помощью = значение «Джон Доу».
Теперь мы можем использовать name в нашем коде. JavaScript запомнит, что имя представляет собой строковое значение John Doe.
// Check if variable is equal to a value
if (name === “John Doe”) {
console.log(true);
}
// output: true
Как упоминалось ранее, переменные могут использоваться для представления любого типа данных JavaScript. В этом примере мы объявим переменные со строковыми, числовыми, объектными, логическими значениями и значениями NULL.
// Assignment of various variables
var name = “John”;
var total = 100;
var city = [ “sydney”, “tokyo”, “montreal” ];
var things = { food: “pizza”, drink: “wine” };
var success = true;
var nothing = null;
Мы можем использовать console.log, чтобы увидеть значение, содержащееся в конкретной переменной.
// Send total variable to the console console.log(total); // output: 100
Переменные хранят данные в памяти, к которым впоследствии можно получить доступ и изменить. Переменным также можно назначить новое значение. В следующем примере показано, как пароль может быть сохранен в переменной, а затем обновлен.
// Assign value to password variable var password = “qwerty1”; // Reassign variable value with a new value password = “qwerty2”; console.log(password); // output: qwerty2
Конечно, пароль, скорее всего, будет надежно храниться в базе данных. Однако этот пример иллюстрирует ситуацию, в которой нам может потребоваться обновить значение переменной. Значение пароля было qwerty1, но мы переназначили его на qwerty2, что является значением, которое JavaScript распознает с этого момента.
Именование переменных
В JavaScript имена переменных известны как идентификаторы. Давайте посмотрим на некоторые правила, которым нужно следовать при именовании наших переменных:
- Имена переменных могут состоять только из букв (a-z), цифр (0–9), символов знака доллара ($) и подчеркивания (_).
- Имена переменных не могут содержать пробелов (табуляции или пробелы).
- Числа не могут начинать имя какой-либо переменной
- Есть несколько зарезервированных ключевых слов, которые нельзя использовать в качестве имени переменной.
- Имена переменных чувствительны к регистру
JavaScript также имеет соглашение об использовании верблюжьего регистра (иногда стилизованного как camelCase) в именах функций и переменных, объявленных с помощью var или let. Это практика написания первого слова строчными буквами, а затем заглавная первая буква каждого последующего слова без пробелов между ними. Большинство переменных, не являющихся константами, будут следовать этому соглашению, за некоторыми исключениями. Имена постоянных переменных, объявленных с помощью ключевого слова const, обычно пишутся в верхнем регистре.
Может показаться, что нужно усвоить множество правил, но очень быстро станет второй натурой писать правильные и обычные имена переменных.
Разница между var, let и const
В JavaScript есть три разных ключевых слова для объявления переменной, что добавляет языку дополнительный уровень сложности. Различия между ними основаны на области действия, подъеме и переназначении.
Итак, какой метод лучше? Общепринятой практикой является максимально возможное использование const и let в случае циклов и переназначения. Как правило, var можно избежать вне работы над унаследованным кодом.
Переменная область видимости
Область действия в JavaScript относится к текущему контексту кода, который определяет доступность переменных для JavaScript. Есть два типа области: локальная и глобальная:
- Глобальные переменные - это переменные, объявленные вне блока.
- Локальные переменные - это переменные, объявленные внутри блока.
В приведенном ниже примере давайте создадим глобальную переменную.
// Initialize a global variable var action= “run”;
Мы узнали, что переменные можно переназначать. Используя локальную область видимости, мы можем создавать новые переменные с тем же именем, что и переменная во внешней области, без изменения или переназначения исходного значения.
В приведенном ниже примере мы создадим глобальную переменную «действие». Внутри функции находится локальная переменная с тем же именем. Отправляя их в консоль, мы можем увидеть, как значение переменной отличается в зависимости от области действия, а исходное значение не изменяется.
// Initialize a global variable
var action = “walk”;
function hurry() {
// Initialize a local, function-scoped variable
var action = “run”;
console.log(action);
}
// Log the global and local variable
console.log(action);
hurry();
console.log(action);
// output:
walk
run
walk
В этом примере локальная переменная имеет область действия. Переменные, объявленные с помощью ключевого слова var, всегда имеют функциональную область видимости, что означает, что они распознают функции как имеющие отдельную область видимости. Следовательно, эта переменная с локальной областью видимости недоступна из глобальной области видимости.
Однако новые ключевые слова let и const имеют блочную область видимости. Это означает, что новая локальная область видимости создается из любого блока, включая функциональные блоки, операторы if и циклы for и while.
Чтобы проиллюстрировать разницу между функциональными и блочными переменными, мы назначим новую переменную в блоке if с помощью let.
var race = true;
// Initialize a global variable
let action = “walk”;
if (race) {
// Initialize a block-scoped variable
let action = “run”;
console.log(`It's a race! Let's ${action}.`);
}
console.log(`It's not a race. Let's ${action}.`);
// output:
It's a race! Let's run.
It's not a race. Let's walk.
В этом примере переменная действия имеет одно значение глобально (прогулка) и другое значение локально (бег). Однако, если бы мы использовали var, результат был бы другим.
// Use var to initialize a variable
var action = “walk”;
if (race) {
// Attempt to create a new variable in a block
var action = “run”;
console.log(`It's a race! Let's ${action}.`);
}
console.log(`It's not a race. Let's ${action}.`);
// output:
It's a race! Let's run.
It's not a race. Let's run.
В результате этого примера и глобальная переменная, и переменная с блочной областью видимости имеют одно и то же значение run. Это потому, что вместо создания новой локальной переменной с var вы переназначаете ту же переменную в той же области. var не признает if быть частью другой, новой области. Обычно рекомендуется объявлять переменные с блочной областью видимости, поскольку они создают код, который с меньшей вероятностью может непреднамеренно переопределить значения переменных.
Подъем
До сих пор в большинстве примеров мы использовали var для объявления переменной и инициализировали ее значением. После объявления и инициализации мы можем получить доступ к переменной или переназначить ее.
Если мы попытаемся использовать переменную до того, как она будет объявлена и инициализирована, она вернет undefined.
// Attempt to use a variable before declaring it console.log(x); // Variable assignment var x = 100; // output: undefined
Однако, если мы опускаем ключевое слово var, мы больше не объявляем переменную, а только инициализируем ее. Он вернет ReferenceError и остановит выполнение скрипта.
// Attempt to use a variable before declaring it console.log(x); // Variable assignment without var x = 100; // output: ReferenceError: x is not defined
Причина этого заключается в подъеме, поведении JavaScript, в котором объявления переменных и функций перемещаются в верхнюю часть своей области видимости. Поскольку поднимается только фактическое объявление, а не инициализация, значение в первом примере возвращает undefined.
Чтобы более наглядно продемонстрировать эту концепцию, ниже представлен написанный нами код и то, как JavaScript на самом деле его интерпретировал.
// The code we wrote console.log(x); var x = 100; // How JavaScript interpreted it var x; console.log(x); x = 100;
JavaScript сохранил x в памяти как переменную перед выполнением скрипта. Поскольку он все еще вызывался до того, как был определен, результатом будет undefined, а не «100». Однако это не вызывает ошибку ReferenceError и не останавливает скрипт.
Хотя ключевое слово var на самом деле не изменило местоположение var, это полезное представление о том, как работает подъемник. Однако такое поведение может вызвать проблемы, потому что программист, который написал этот код, вероятно, ожидает, что результат x будет истинным, тогда как вместо этого он не определен.
Мы также можем увидеть, как подъем может привести к непредсказуемым результатам в следующем примере:
// Initialize x in the global scope
var x = 100;
function hoist() {
// A condition that should not affect the outcome of the code
if (false) {
var x = 200;
}
console.log(x);
}
hoist();
// output:
undefined
В этом примере мы объявили x равным 100 глобально. В зависимости от оператора if x может измениться на 200, но, поскольку условие было ложным, оно не должно повлиять на значение x. Вместо этого x был поднят на вершину функции hoist(), и значение стало неопределенным.
Этот тип непредсказуемого поведения потенциально может вызвать ошибки в программе. Поскольку let и const имеют блочную область видимости, они не будут подниматься таким образом, как показано ниже.
// Initialize x in the global scope
let x = true;
function hoist() {
// Initialize x in the function scope
if (3 === 4) {
let x = false;
}
console.log(x);
}
hoist();
// output:
true
Повторное объявление переменных, которое возможно с var, вызовет ошибку с let и const.
// Attempt to overwrite a variable declared with var var x = 1; var x = 2; console.log(x); // output: 2 // Attempt to overwrite a variable declared with let let y = 1; let y = 2; console.log(y); // output: Uncaught SyntaxError: Identifier ‘y’ has already been declared
Подводя итог, можно сказать, что переменные, представленные в var, потенциально могут быть затронуты подъемом - механизмом в JavaScript, в котором объявления переменных сохраняются в памяти. Это может привести к неопределенным переменным в коде. Введение let и const решает эту проблему, выдавая ошибку при попытке использовать переменную перед ее объявлением или при попытке объявить переменную более одного раза.
Константы
Многие языки программирования содержат константы, которые представляют собой значения, которые нельзя изменять или изменять. В JavaScript идентификатор const смоделирован на основе констант, и значения, присвоенные const, нельзя переназначить.
Обычно все идентификаторы const записываются в верхнем регистре. Это помечает их как легко отличимые от других значений переменных.
В приведенном ниже примере мы инициализируем переменную ACTION как константу с ключевым словом const. Попытка переназначить переменную приведет к ошибке.
// Assign value to const const ACTION = “walk”; // Attempt to reassign value ACTION = “run”; console.log(ACTION); // cutput: Uncaught TypeError: Assignment to constant variable.
Поскольку const значения не могут быть переназначены, они должны быть объявлены и инициализированы одновременно, в противном случае также будет выдана ошибка.
// Declare but do not initialize a const const RACING; console.log(RACING); // output: Uncaught SyntaxError: Missing initializer in const declaration
Значения, которые нельзя изменить при программировании, известны как неизменяемые, в то время как значения, которые можно изменить, являются изменяемыми. Хотя const значения нельзя переназначить, они изменяемы, поскольку можно изменять свойства объектов, объявленных с помощью const.
// Create a PERSON object with two properties
const PERSON = {
name: “Joanna”,
balance: 10000
}
// Modify a property of PERSON
PERSON.balance = 15000;
console.log(PERSON);
// output:
{ name: ‘Joanna’, price: 15000 }
Константы полезны для того, чтобы дать понять вам и другим программистам, работающим над проектом вместе с вами, что предполагаемая переменная не должна быть переназначена. Если вы ожидаете, что переменная может быть изменена в будущем, вы, вероятно, захотите вместо этого использовать let для объявления переменной.
Готовы ли вы поднять свои навыки CSS на новый уровень? Начните прямо сейчас с моей новой электронной книги: Руководство по CSS: Полное руководство по современному CSS. Будьте в курсе всего, от основных концепций, таких как Flexbox и Grid, до более сложных тем, таких как анимация, архитектура и многое другое !!
Заключение
Вот и все! Мы рассмотрели, что такое переменная, правила присвоения имени переменной и способы переназначения значений переменной. Мы также узнали об области действия и подъеме, некоторых ограничениях исходного ключевого слова var, а также о том, как let и const решают эти проблемы.
Надеюсь, эта статья оказалась для вас полезной! Вы можете подписаться на меня на Medium. Я тоже в Твиттере. Не стесняйтесь оставлять любые вопросы в комментариях ниже. Буду рад помочь!
