JavaScript: Что такое переменная

Представьте, что нужно вывести фразу Father! два раза:

console.log('Father!');
console.log('Father!');

Такой способ вполне подойдёт, если фраза встречается всего пару раз. Но что, если она будет использоваться часто, в разных частях программы? Тогда придётся копировать одно и то же выражение снова и снова.

А что будет, если фразу нужно изменить, например заменить Father! на Mother!? Придётся искать и исправлять все вхождения вручную. Это неудобно и приводит к ошибкам.

Переменные

Чтобы не дублировать одну и ту же строку, её можно сохранить в переменной и выводить её содержимое:

const greeting = 'Father!';

console.log(greeting);
console.log(greeting);

Результат:

Father!
Father!

Переменная представляет собой имя, за которым хранится значение. В нашем примере мы создали переменную с именем greeting и записали в неё строку 'Father!'.

const greeting = 'Father!';

Переменная       Значение
┌──────────┐     ┌──────────┐
│ greeting │ ──→ │ 'Father!'│
└──────────┘     └──────────┘

Строчка const greeting = 'Father!' читается так: «возьми значение 'Father!' и присвой его переменной с именем greeting». Знак = здесь является оператором присваивания, а не обозначением равенства как в математике. Он кладёт значение в переменную.

Когда мы пишем console.log(greeting), движок подставляет вместо имени greeting то значение, которое в ней хранится. В результате на экран выводится строка 'Father!'.

console.log(greeting)
            |
            v
console.log('Father!')

let и const

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

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

const greeting = 'Father!'; // меняться не будет
let score = 0;              // будет меняться по ходу программы

Если не знаете, будет ли значение меняться, используйте const. Это хорошая практика: так код проще читать и сложнее случайно испортить данные. К let и константам мы ещё вернёмся в отдельных уроках.

Имена переменных

Имена переменных придумывает сам программист. В JavaScript можно использовать:

• латинские буквы (a-z, A-Z),
• цифры (но не в начале),
• символы _ и $.

Примеры допустимых имён: greeting, name1, helloWorld. JavaScript различает строчные и заглавные буквы. Переменные greeting, Greeting и GREETING являются тремя разными переменными.

Переменные и литералы

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

const greeting = 'Mother!';
console.log(greeting);   // => Mother!
console.log('greeting'); // => greeting

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

Литералы представляют собой данные, записанные явно (например, 'Hello', 42, 3.14). Идентификаторы являются именами переменных и функций (например, greeting, console), которые указывают на уже существующие значения или команды.

Порядок использования

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

console.log(name); // Ошибка: переменная ещё не определена
// ReferenceError: Cannot access 'name' before initialization
const name = 'Alice';

А в правильном порядке всё работает:

const name = 'Alice';
console.log(name); // => Alice

Несколько переменных в программе

В одной программе можно создать сколько угодно переменных. Каждая хранит свои данные и не мешает другим:

const greeting1 = 'Father!';
console.log(greeting1);
console.log(greeting1);

const greeting2 = 'Mother!';
console.log(greeting2);
console.log(greeting2);

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

Где создавать переменные

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

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

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

// Uncaught ReferenceError: greeting is not defined
console.log(greeting);
let greeting = 'Father!';

Запуск программы с кодом из примера выше завершается ошибкой ReferenceError: greeting is not defined. ReferenceError — это ошибка обращения. Она означает, что в коде используется имя (идентификатор), которое не определено. В самом сообщении об этом говорят прямо: greeting is not defined — «greeting не определён».

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

Ещё одна распространённая ошибка — попытаться объявить уже объявленную переменную с помощью let:

let greeting = 'Father!';
let greeting = 'Father!'; // SyntaxError: Identifier 'greeting' has already been declared

Объявлять переменную дважды нельзя. Если нужно другое значение — создайте новую переменную с другим именем или просто переприсвойте значение уже существующей let-переменной без ключевого слова.

Создайте переменную с именем url и значением https://hexlet.io. Выведите значение этой переменной на экран два раза.