Курс по JavaScript для начинающих: Модуль 2. Базовый синтаксис. Урок 3. Переменные (var, let и const)

Введение

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

Переменные и их назначение

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

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

Перед тем как перейти к способам объявления переменных, важно знать основные правила их именования:

1. Переменные могут содержать буквы, цифры, символы $ и _.
   • Пример: myVariable, $price, _value
2. Имя переменной должно начинаться с буквы, $ или _, но не с цифры.
   • Правильно: myVariable, _hidden, $data
   • Неправильно: 1stValue, 123abc
3. Имена переменных чувствительны к регистру, что означает, что myVariable и myvariable — это разные переменные.
4. Используйте осмысленные имена переменных, которые отражают их содержание или назначение.
   • Пример: userName, totalAmount
5. Не используйте зарезервированные слова, такие как let, class, return, и другие, в качестве имен переменных.

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

Объявление переменной — это процесс создания переменной и присвоения ей имени. В этот момент память для переменной выделяется, но значение ей еще не присвоено. Например:

let myVariable;

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

let myVariable = 10; // Объявление и инициализация
myVariable = 20;     // Инициализация (присвоение нового значения)

Объявление переменных с var

До введения let и const в ES6 (ECMAScript 2015), var был основным способом объявления переменных в JavaScript.

var name = "John";
var age = 25;

Особенности var:

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

Пример поднятия:

console.log(x); // undefined
var x = 5;

В этом примере переменная x поднимается к началу своей области видимости, но ее значение еще не присвоено, поэтому выводится undefined.

Объявление переменных с let

let был введен в ES6 и стал предпочтительным способом объявления переменных, поскольку он решает некоторые проблемы, связанные с var.

Особенности let:

• Блочная область видимости: Переменные, объявленные с let, имеют область видимости блока. Это значит, что они доступны только внутри блока кода, в котором объявлены (например, внутри фигурных скобок {}).
• Поднятие (hoisting): Переменные, объявленные с let, поднимаются, но не инициализируются. Это значит, что попытка доступа к переменной до ее объявления вызовет ошибку.

Пример блочной области видимости:

if (true) {
    let y = 10;
    console.log(y); // 10
}
console.log(y); // Ошибка: y не определена

Объявление переменных с const

const также был введен в ES6 и используется для объявления констант, значения которых не могут изменяться.

const name = "John";
const age = 25;

Особенности const:

• Блочная область видимости: Переменные, объявленные с const, имеют область видимости блока, аналогично let.
• Константа: Значение переменной, объявленной с const, не может быть изменено после его присвоения.

Пример использования const:

const z = 100;
console.log(z); // 100
z = 200; // Ошибка: Переприсвоение константы

Когда использовать var, let и const

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

Заключение

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

Контрольные вопросы

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

• var
• let
• const

Какая область видимости у переменных, объявленных с let?

• Глобальная
• Функциональная
• Блочная

Что произойдет, если попытаться изменить значение переменной, объявленной с const?

• Значение изменится
• Будет выброшено исключение (ошибка)
• Ничего не произойдет
• Значение изменится, если это строка

Что такое поднятие (hoisting) в контексте переменных, объявленных с var?

• Переменные поднимаются к началу своей области видимости
• Переменные поднимаются к началу блока
• Переменные остаются на месте
• Переменные не инициализируются

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

• var
• let
• const
• function

Что такое объявление переменной?

• Присвоение переменной значения
• Создание переменной и присвоение ей имени без указания значения
• Удаление переменной
• Изменение значения переменной

Что такое инициализация переменной?

• Присвоение переменной значения
• Создание переменной и присвоение ей имени без указания значения
• Удаление переменной
• Объявление переменной внутри функции

Упражнения

Задание 1: Объявление переменных

1. Создайте переменные для хранения вашего имени, возраста и факта наличия автомобиля. Используйте подходящие ключевые слова (var, let, const).
2. Выведите значения этих переменных в консоль.

Пример:

let name = "Иван";
const age = 30;
var hasCar = true;

console.log(name); // Иван
console.log(age); // 30
console.log(hasCar); // true

Задание 2: Изменение значений переменных

1. Объявите переменную let для хранения текущего года.
2. Измените значение этой переменной на следующий год и выведите его в консоль.

Пример:

let currentYear = 2024;
currentYear = 2025;

console.log(currentYear); // 2025