$ sudo teach IT

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

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

Что вы узнаете в рамках статьи

  • Основные способы создания переменных в JavaScript
  • Отличия между var, let и const
  • Правила и лучшие практики именования переменных
  • Почему важно правильно выбирать тип объявления переменной
  • Как избежать распространённых ошибок при работе с переменными

Ключевые термины

  • Переменная — именованное хранилище для данных
  • Область видимости — часть кода, где переменная доступна
  • var — устаревший способ объявления переменных с функциональной областью видимости
  • let — современный способ объявления с блочной областью видимости
  • const — объявление константы, значение которой нельзя изменить
  • camelCase — стиль именования, где первое слово с маленькой буквы, последующие — с заглавной

Зачем нужны переменные?

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

Почему без переменных не обойтись?

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

Аналогия с ящиками

Подумайте о переменных как о ящиках или коробках:

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

Пример из реальной жизни

Представьте, что вы ведёте учёт в магазине:

  • Переменная totalSales хранит общую сумму продаж.
  • Переменная customerName хранит имя покупателя.
  • Переменная isAvailable хранит состояние наличия товара (например, true или false).

В процессе работы программы значения этих переменных будут изменяться в зависимости от действий пользователя и бизнес-логики.

Возможности переменных

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

Создание переменных в JavaScript

1. Объявление без ключевого слова

В JavaScript можно присвоить значение переменной без предварительного объявления с помощью ключевого слова. Например:

myVariable = 10;

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

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

  • Переменная создаётся автоматически и становится свойством глобального объекта (window в браузере).
  • Если вы ошиблись в имени переменной, JavaScript не выдаст ошибку, а создаст новую глобальную переменную, что может привести к трудноуловимым багам.
  • Такие переменные доступны во всей программе, что увеличивает риск конфликтов имён и путаницы.

Почему это опасно?

  • Загрязнение глобальной области видимости Глобальные переменные живут и доступны во всём коде, что усложняет отладку и поддержку.
  • Ошибки при опечатках Если написать myVarible = 10; (пропущена буква a), вместо ошибки будет создана новая глобальная переменная с неправильным именем — и это сложно заметить.
  • Сложности с масштабированием В больших проектах такие непреднамеренные глобальные переменные приводят к неожиданным побочным эффектам.

Рекомендации

  • Всегда объявляйте переменные явно с помощью const или let.
  • Используйте строгий режим JavaScript ("use strict";), который запрещает создание переменных без объявления и выдаёт ошибку при попытке.

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

"use strict";

myVariable = 10; // Ошибка! Переменная не объявлена

2. Объявление с var

До выхода стандарта ES6 основным способом объявления переменных в JavaScript было использование ключевого слова var:

var myVariable = 10;

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

Что такое функциональная область видимости?

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

Пример:

function testVar() {
  if (true) {
    var x = 5;
  }
  console.log(x); // 5 — переменная доступна вне блока if
}

testVar();

Здесь x объявлена внутри блока if, но доступна и снаружи, так как var «поднимается» к началу функции (механизм называется hoisting).

Важно! Мы еще не проходили функции и условные операторы, более подробно мы будем о них говорить в дальнейшем.

Чем это может быть опасно?

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

Hoisting (всплытие переменных)

Переменные, объявленные с var, всплывают — объявление переменной поднимается в начало функции, но присвоение значения остаётся на месте.

function example() {
  console.log(a); // undefined, а не ошибка
  var a = 10;
}
example();

Это может вызвать путаницу, если не учитывать поведение var.

Почему var считается устаревшим?

  • Ограничения области видимости и hoisting могут привести к трудноуловимым ошибкам.
  • Современный JavaScript рекомендует использовать let и const, которые имеют блочную область видимости и более предсказуемое поведение.

Резюме по var

  • Используется в старом коде и поддерживается во всех браузерах.
  • Имеет функциональную область видимости.
  • Подвержен hoisting.
  • Рекомендуется заменить на let и const в новых проектах.

3. Объявление с let

Ключевое слово let появилось в стандарте ECMAScript 6 (ES6) и стало современным способом объявления переменных в JavaScript.

let myVariable = 10;

Что такое блочная область видимости?

Переменные, объявленные с помощью let, имеют область видимости, ограниченную ближайшим блоком кода, который заключается в фигурные скобки {} — например, внутри циклов, условий или функций.

Пример:

function testLet() {
  if (true) {
    let x = 5;
    console.log(x); // 5 — переменная доступна внутри блока
  }
  console.log(x); // Ошибка! x не определена вне блока if
}

testLet();

Здесь x существует только внутри блока if и недоступна снаружи.

Чем блочная область видимости полезна?

  • Помогает избежать ошибок, связанных с неожиданным переопределением переменных
  • Улучшает читаемость и поддержку кода — вы точно знаете, где переменная живёт и используется
  • Позволяет безопасно объявлять переменные в циклах и условиях, не боясь конфликтов

Отличия от var

  • let имеет блочную область видимости, а var — функциональную
  • let не подвержен всплытию так, как var. Переменная становится доступна только после объявления (так называемая «временная мёртвая зона»)

Пример временной мёртвой зоны:

console.log(a); // Ошибка: нельзя использовать переменную до объявления
let a = 10;

Рекомендации

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

4. Объявление с const

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

const myVariable = 10;

Что значит «значение нельзя изменить»?

После того, как вы присвоили переменной значение с помощью const, попытка сделать это снова вызовет ошибку.

const x = 5;
x = 10; // Ошибка! Попытка изменить значение константы

Область видимости const

Переменные, объявленные через const, имеют блочную область видимости — доступны только внутри блока {}.

{
  const y = 20;
}
console.log(y); // Ошибка — y не определена вне блока

Когда использовать const?

  • Для значений, которые не должны менять свою ссылку — например, константы, функции, объекты, которые не планируется переназначать.
  • Это помогает сделать код более надёжным и предотвратить случайные ошибки.

Почему рекомендуется всегда начинать с const?

  • Если переменная не должна изменяться, const предотвратит случайное переопределение.
  • Если понадобится изменить — можно заменить на let.
  • Такой подход улучшает читаемость и надёжность кода.

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

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

Основные правила

  • Используйте допустимые символы: В имени переменной можно использовать латинские буквы (a-z, A-Z), цифры (0-9), а также символы $ и _. Например: user_name, $price, totalCount1 — все это допустимые имена.
  • Не начинайте имя с цифры: Имена не могут начинаться с числа, это вызовет ошибку. Например: 1count — недопустимо, а count1 — правильно.
  • Имена чувствительны к регистру: Переменные name, Name и NAME — три разных переменных. Будьте внимательны с использованием заглавных и строчных букв.
  • Используйте осмысленные и понятные имена: Вместо a, b или x лучше использовать userAge, totalPrice или dogName. Это улучшает читаемость кода и облегчает его поддержку.
  • Не используйте зарезервированные слова: Такие слова, как let, const, var, if, for и другие, нельзя использовать в качестве имён переменных. Это вызовет синтаксическую ошибку.

Стиль именования — camelCase

В JavaScript принято использовать стиль camelCase:

  • Первое слово начинается с маленькой буквы
  • Каждое следующее слово начинается с заглавной буквы
  • Между словами нет пробелов и подчёркиваний

Примеры:

let userName = "Alex";
let totalCount = 42;
let myDogName = "Buddy";

Этот стиль широко используется, потому что:

  • Улучшает читаемость длинных имён
  • Легко выделяет слова внутри имени
  • Стандартизирован в большинстве JS-проектов и библиотек

Дополнительные советы

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

const MAX_USERS = 100;

Старайтесь избегать слишком коротких или неинформативных имён — код станет сложнее для понимания.

Используйте имена, которые отражают смысл и назначение переменной.

Наиболее частые ошибки

  • Использование переменных без объявления (автоматическое создание глобальных переменных).
  • Применение var и непонимание области видимости, что ведёт к неожиданным багам.
  • Переименование переменных без учёта чувствительности к регистру.
  • Использование непонятных и неинформативных имён.

Наиболее частые вопросы

Вопрос: Можно ли изменить значение переменной, объявленной через const?\
Ответ: Нет, попытка изменить вызовет ошибку.

Вопрос: В чем разница между let и var?\
Ответ: let имеет блочную область видимости, var — функциональную.

Итоги

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

 

На следующий урок