LearnJS

Переменные в JavaScript

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

Если говорить совсем простыми словами, переменную можно представить как подписанную коробку. У коробки есть имя, а внутри лежит какое-то значение. Когда значение понадобится, мы обращаемся к коробке по имени.

let message = 'Привет';

console.log(message);

В этом примере мы создали переменную message, записали в нее строку ‘Привет’ и вывели это значение в консоль.

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

В JavaScript программа часто работает не только с готовыми числами и строками, но и с данными, которые нужно где-то сохранить.

Например, мы можем сразу вывести текст:

console.log('Изучаем JavaScript');

Но если этот текст нужен в нескольких местах, удобнее сохранить его в переменную:

let course = 'Изучаем JavaScript';

console.log(course);
console.log(course);

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

Переменные помогают не повторять одно и то же значение много раз и делают код понятнее. Когда мы видим имя userName, price или age, уже примерно понятно, какие данные там лежат.

Как создать переменную

Чтобы создать переменную, чаще всего используют ключевое слово let.

let userName;

В этой строке мы объявили переменную с именем userName. Пока значения в ней нет.

let говорит JavaScript: создай переменную. После let пишется имя переменной.

Можно сразу создать переменную и записать в нее значение:

let userName = 'Алексей';

Здесь происходит два действия:

  • создается переменная userName;
  • в нее записывается значение ‘Алексей’.

Как записать значение

Для записи значения используется знак равно =. В JavaScript он означает не “равно” как в математике, а “записать значение”.

let age;

age = 25;

Сначала мы создали переменную age, а потом записали в нее число 25.

То же самое можно сделать в одну строку:

let age = 25;

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

let age = 25;

console.log(age);

В консоли будет:

25

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

let age = 25;

console.log(age);
console.log('age');

Результат будет разным:

25
age

Как изменить значение

Значение переменной, созданной через let, можно изменить.

let message = 'Привет';

message = 'Здравствуйте';

console.log(message);

В консоли будет:

Здравствуйте

Сначала в переменной message лежала строка ‘Привет’. Потом мы записали туда новое значение ‘Здравствуйте’. Старое значение заменилось новым.

Важно не писать let второй раз, если переменная уже создана.

Правильно:

let count = 1;

count = 2;

Неправильно:

let count = 1;

let count = 2;

Во втором случае JavaScript выдаст ошибку, потому что переменная с таким именем уже была объявлена в этой области кода.

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

В программе может быть много переменных. Обычно каждую переменную пишут на отдельной строке, так код легче читать.

let userName = 'Алексей';
let age = 25;
let city = 'Москва';

console.log(userName);
console.log(age);
console.log(city);

В консоли появятся три значения:

Алексей
25
Москва

Можно встретить запись через запятую:

let userName = 'Алексей',
  age = 25,
  city = 'Москва';

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

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

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

Плохой пример:

let a = 'Алексей';
let b = 25;

По таким именам непонятно, что это за данные.

Лучше так:

let userName = 'Алексей';
let userAge = 25;

Теперь видно, что в первой переменной хранится имя пользователя, а во второй - возраст.

Для имен переменных есть несколько правил:

  • имя может содержать буквы, цифры, символ $ и нижнее подчеркивание _;
  • имя не должно начинаться с цифры;
  • нельзя использовать пробелы;
  • нельзя называть переменную зарезервированным словом, например let или return;
  • регистр имеет значение: name и Name - разные имена.

Если имя состоит из нескольких слов, часто используют стиль camelCase:

let firstName = 'Ирина';
let totalPrice = 1500;
let isStudent = true;

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

Частые ошибки

Первая ошибка - использовать переменную до того, как она создана.

console.log(userName);

let userName = 'Алексей';

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

Вторая ошибка - забыть кавычки у строки.

let city = Москва;

JavaScript подумает, что Москва - это имя переменной. Если такой переменной нет, появится ошибка. Строки нужно писать в кавычках:

let city = 'Москва';

Третья ошибка - путать имя переменной и обычный текст.

let language = 'JavaScript';

console.log(language);
console.log('language');

Первая строка выведет значение переменной, а вторая выведет обычный текст language.

Четвертая ошибка - давать переменным слишком короткие и непонятные имена. В маленьком примере это может не мешать, но когда кода станет больше, разобраться будет сложнее.

Что дальше

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

Дальше нужно понять разницу между let, const и var. Все три слова используются для объявления переменных, но работают они не одинаково. Это и разберем в следующем уроке.