Как работать с переменными в JavaScript

Статья рассказывает о том, как работать с переменными в JavaScript: что можно хранить в них, как их объявлять, какие правила именования соблюдать, какие ошибки избегать и как управлять областью видимости переменных. Также вы узнаете о константах – специальном виде переменных, которые сохраняют свое значение постоянным.

JavaScript — это один из основных языков программирования для веб-разработки. Он позволяет создавать интерактивные и динамические страницы, анимации, игры, приложения и многое другое. Однако, чтобы писать хороший код на JS, нужно знать его основы, в том числе то, как работать с переменными.

Знание о переменных — это важный шаг для того, чтобы стать хорошим программистом. Переменные позволяют нам работать с данными разных типов, выполнять различные операции над ними и создавать сложные структуры данных. Правильно работая с переменными, вы будете писать правильный, читаемый и понятный код.

Что такое переменные

Переменные — это именованные контейнеры для хранения данных. Они позволяют нам сохранять, изменять и использовать значения в наших программах.

Что можно хранить в переменных

Во первых, стоит обозначить, что Javasript — это динамически типизированный язык, то есть тип данных переменной определяется автоматически в зависимости от того, что мы в нее записываем. Мы можем присваивать переменным разные типы данных в разное время, и язык сам позаботится о преобразовании их при необходимости.

const number = 25; // Число
const main_header = "Добро пожаловать в Эльбрус"; // Строка
const name = undefined; // Значение имени не определено
const arr = ["Хочу","учиться", 7, true] // Массив

В JavaScript существует несколько основных типов данных: Числа (Numbers), Числа произвольной длины (Bigint), Строки (Strings), Логические значения (Booleans), Массивы (Arrays), Объекты (Objects), в том числе функции и Даты (Date), значения null и undefined. Подробнее читайте тут.

Кроме одиночных значений в переменные можно записывать математические выражения и иные инструкции, например:

let sum = 2 + 2; // Математическое выражение
let condition = x > y; // Логическое выражение
let loop = for (let i = 0; i < 10; i++) { // Цикл

Также через переменные можно получать доступ к элементам DOM-дерева и далее выполнять различные операции с ними, например:

// Выбираем элемент с селектором главного заголовка страницы
let main_header = document.querySelector('main_header'); 

// Вешаем на элемент слушатель события: по событию "click" будет срабатывать функция open
main_header.addEventListener("click", open); 

Функции — это тоже переменные?

В JS функции являются такими же значениями переменных, как числа, булевы значения, строки и массивы. Давайте рассмотрим на примере:

function message() {
	alert('Добро пожаловать!');
}

message(); // Выскочит сообщение 'Добро пожаловать!'

В данном случае имя функции совпадает с именем переменной. Если мы захотим переопределить значение переменной message, то выйдет так:

message = 7; // Меняем значение переменной message
console.log(message); // Выведет 7

Но если мы вызовем снова функцию message, то возникнет ошибка, так как переменная message больше не содержит в себе функцию:

message();
// VM80:1 Uncaught TypeError: message is not a function at <anonymous>:1:1

Наиболее видно это в стрелочных функциях:

var message = function nameFunction () {
  alert('Добро пожаловать!');
}
// Параметр имя функции (nameFunction) не обязателен
// Eсли его исключить, то функция будет считаться анонимной

var message = function() {
  alert('Добро пожаловать!');
}

Где хранятся значения переменных?

В изучаемом нами языке существует два способа хранения значений переменных: по значению и по ссылке ↓

• Хранение по значению означает, что в переменной сберегается само значение, а не ссылка на него. Это относится к примитивным типам данных: числам, строкам, логическим значениям и символам. Когда мы присваиваем одной переменной значение другой этого же типа, мы копируем значение, а не ссылку на него, например:

let a = 10; // Переменная a хранит значение 10
let b = a; // Переменная b хранит копию значения a
a = 20; // Мы меняем значение a на 20

console.log(a); // Выводит 20
console.log(b); // Выводит 10, так как b не зависит от a

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

let arr1 = [1, 2, 3]; // Переменная arr1 хранит ссылку на массив [1, 2, 3]
let arr2 = arr1; // Переменная arr2 хранит копию ссылки arr1
arr1[0] = 10; // Мы меняем первый элемент массива по ссылке arr1

console.log(arr1); // Выводит [10, 2, 3]
console.log(arr2); // Выводит [10, 2, 3], так как arr2 ссылается на тот же массив

Правила объявления переменной

Использование переменной в JavaScript начинается с ее объявления. Для этого существуют три ключевых слова: let, var и const.

let

С помощью слова let переменные объявляются с так называемой блочной видимостью. Обратиться к переменной разрешается только в определенном блоке кода (например, в цикле или условии), в котором она объявлена:

let x = 10; // Объявляем переменную x со значением 10
if (true) {
    let y = 20; // Объявляем переменную y со значением 20 внутри блока if
    console.log(x + y); // Выводит 30, так как x и y доступны внутри блока 
}

console.log(x); // Выводит 10, так как x объявлена вне блока
console.log(y); // Выдаст ошибку, так как y не доступна вне блока

var

Слово var используется для объявления переменных с так называемой функциональной областью видимости. Это значит, что использовать переменную можно либо в пределах ее «родной» функции (где она объявлена) либо глобально, если ее объявление произошло вне функции:

var x = 10; // Объявляем переменную x со значением 10
function foo() {
    var y = 20; // Объявляем переменную y со значением 20 внутри функции
    foo console.log(x + y); // Выводит 30, так как x и y доступны внутри функции
}

foo(); // Вызываем функцию
foo console.log(x); // Выводит 10, так как x объявлена глобально

console.log(y); // Выдаст ошибку, так как y не доступна вне функции

const

Слово const отвечает за константы — так называются переменные, значения которых не меняются. Видимость констант — блочная, как и в случае объявленных с помощью слова let переменных. Рассмотрим на примере:

const PI = 3.14; // Объявляем константу PI со значением 3.14
PI = 3.15; // Выдаст ошибку, так как нельзя изменить значение константы
if (true) {
    const E = 2.71; // Объявляем константу E со значением 2.71 внутри блока if
    console.log(PI + E); // Выводит 5.85, так как PI и E доступны внутри блока
    }
    console.log(PI); // Выводит 3.14, так как PI объявлена вне блока
    console.log(E); // Выдаёт ошибку, так как E не доступна вне блока

Как присваивать значение переменной

Конечно, переменную можно объявить без присвоения ей значения, например:

let phoneNumber;
var name;

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

В этом случае значения переменных phoneNumber и name будут равны undefined. Но чаще всего нам все-таки нужно записать в переменную иное значение. Для присвоения значения используется оператор присваивания (=):

let a = 10; // Присваиваем переменной a значение 10
let b = a + 5; // Присваиваем переменной b результат выражения a + 5
let c = Math.sqrt(b); // Присваиваем переменной c результат вызова функции Math.sqrt(b)

Правила именования переменных

Для того, чтобы дать переменной имя, нужно соблюдать следующие правила:

• Имя переменной должно начинаться с буквы, символа подчёркивания (_) или знака доллара ($).
• Имя переменной не может содержать пробелов или специальных символов, кроме подчеркивания и доллара.
• Имя переменной не может совпадать с ключевыми словами языка JavaScript, такими как let, var, const, if и for.
• Оно должно быть понятным и отражать смысл хранимого значения.
• Оно должно следовать одному из стилей написания: camelCase (первое слово с маленькой буквы, остальные с большой), snake_case (слова разделяются подчеркиваниями), SCREAMING_SNAKE_CASE (слова заглавными буквами, разделенные подчеркиваниями) или PascalCase (все слова с большой буквы), например:

let userName = "Вася"; // camelCase
let user_name = "Вася"; // snake_case
let UserName = "Вася"; // PascalCase
let USER_NAME = "Вася"; // SCREAMING_SNAKE_CASE

Ошибки при работе с переменными

При работе с переменными в JavaScript можно столкнуться с различными ошибками, которые могут привести к неправильному поведению программы или её остановке. Некоторые из наиболее частых ошибок:

• Использование необъявленной переменной. Если мы пытаемся обратиться к переменной, которая не была объявлена, мы получим ошибку ReferenceError:

const a = 10;
console.log(b); // Выдаст ошибку ReferenceError: x is not defined

• Изменение значения константы. Если попробовать поменять значение константы, которая была объявлена с помощью const, «вылезет» ошибка TypeError:

const PI = 3.14; // Объявляем константу PI
PI = 3.15; // Пытаемся изменить значение PI
// Выдаст ошибку TypeError: Assignment to constant variable

• Переопределение переменной. Нельзя объявлять ту же переменную второй раз в той же области видимости. В этом случае «вылазит» ошибка SyntaxError или происходит сбой в логике работы программы. Например:

let x = 10; // Объявляем переменную x
let x = 20; // Пытаемся объявить ещё одну переменную x
// Выдаст ошибку SyntaxError: Identifier 'x' has already been declared

Что такое область видимости переменной

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

• Глобальная область видимости «покрывает» всю программу. Переменные, объявленные в ней, называются глобальными переменными и могут использоваться в любом месте программы, например:

let x = 10; // Объявляем глобальную переменную x
function foo() {
    console.log(x); // Можем использовать x внутри функции foo
}

foo(); // Вызываем функцию foo
console.log(x); // Можем использовать x вне функции foo

• Локальная область видимости ограничена определенным блоком кода (например, функцией, циклом или условием). Переменные, объявленные в ней, называются локальными переменными и доступны только внутри блока кода, в котором они объявлены, например:

function foo() {
    let y = 20; // Объявляем локальную переменную y внутри функции    
    fooconsole.log(y); // Можем использовать y внутри функции foo
}

foo(); // Вызываем функцию foo
console.log(y); // Не можем использовать y вне функции foo, выдаст ошибку ReferenceError: y is not defined

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

let x = 10; // Объявляем глобальную переменную x
function foo() {let x = 20; // Объявляем локальную переменную x внутри функции    fooconsole.log(x); // Выводит 20, так как используется локальная переменная x
}

foo(); // Вызываем функцию foo
console.log(x); // Выводит 10, так как используется глобальная переменная x

Константы

Константы — это специальный вид переменных, которые не могут менять своё значение после объявления. Что о них нужно знать?

• Константы полезны для хранения значений, которые не должны изменяться в ходе действия программы, например, числа Пи или постоянная Больцмана, названия цветов или дней недели.
• Для объявления константы следует применять ключевое слово const.
• Явное определение значения при объявлении константы помогает обеспечить её неизменяемость и предотвращает нежелательные изменения значений в коде (важно помнить что константы работают с примитивами, если там будет объект то он изменится, в таком случае константа будет защищать только неизменность типа).
• Константы также имеют блочную видимость, как и переменные, объявленные с помощью let.
• Если вы видите имя переменной, написанной в верхнем регистре — это негласное соглашение (правило опционально, но оно помогает повысить читаемость кода и избежать ошибок) разработчиков о том, что значение данной переменной ни в коем случае нельзя менять, например:

// Постоянное значение скорости света
const SPEED_OF_LIGHT = 299_792_458;

* Обратите внимание: число 299792458 записано через символы нижнего подчеркивания, которые позволяют улучшить читаемость кода, но сохраняют числовой тип данных.

Что еще нужно знать о работе с переменными в JavaScript

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

function foo() {
    x = 10; // Объявляем переменную x без ключевого слова
}

foo(); // Вызываем функцию foo
console.log(x); // Выводит 10, так как x стала глобальной переменной

Переменные можно объявлять после их использования. Это возможно благодаря так называемому поднятию (hoisting), которое перемещает объявления переменных в начало области видимости. Данная практика может сбивать с толку и ухудшать читаемость кода, поэтому также не рекомендуется. Вот пример:

console.log(x); // Выводит undefined, так как x ещё не определена
let x = 10; // Объявляем переменную x после её использования

Переменные можно проверять на наличие и тип значения с помощью оператора typeof. Результат работы этого оператора — строка, которая указывает на тип данных конкретной переменной:

let name = "Вася"; // Строка
let age = 25; // Число
let isAdmin = true; // Логическое значение
let hobbies = ["футбол", "музыка"]; // Массив
let person = {name: "Вася", age: 25}; // Объект

console.log(typeof name); // Выводит "string"
console.log(typeof age); // Выводит "number"
console.log(typeof isAdmin); // Выводит "boolean"
console.log(typeof hobbies); // Выводит "object"
console.log(typeof person); // Выводит "object"