Переменные и типы данных

Переменная — это коробка с именем. Вы кладёте в неё значение, а дальше обращаетесь к нему по имени.

let user = 'Аня'
user = 'Борис'

const city = 'Москва'

В первой строке завели коробку user и положили туда 'Аня'. Во второй — заменили содержимое: теперь там 'Борис'.

Слово let пишется только один раз, при создании. Оно значит «заведи коробку с таким именем». Дальше к переменной обращаются просто по имени. Написать let user второй раз нельзя — это ошибка.

const — по умолчанию

const отличается от let ровно одним: переменной, объявленной через const, нельзя присвоить новое значение.

const city = 'Москва'
city = 'Питер' // TypeError: значение менять нельзя

Зачем такое ограничение? Ради того, кто будет читать код. Увидев const, он сразу знает: дальше это значение не поменяется, можно не следить за ним.

Поэтому правило простое: пишите const всегда, а let — только когда значение действительно будет меняться. Например, у счётчика или у суммы, которая накапливается.

Как назвать переменную

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

userName лучше, чем u. isAdmin лучше, чем flag. А data не говорит вообще ничего.

Имя пишут латиницей, без пробелов. Если слов несколько, каждое следующее начинают с большой буквы: totalPrice, firstName. Начинать имя с цифры нельзя.

У каждого значения есть тип

Значения бывают разных видов. На старте вам понадобятся пять:

const age = 25          // number — число
const name = 'Аня'      // string — строка, текст в кавычках
const isAdmin = true    // boolean — true или false
let nickname            // undefined — значение не задавали
const car = null        // null — намеренно пусто

number — любое число, целое или дробное: 25, -3, 1.5. Отдельного типа для целых в языке нет.

string — текст. Он всегда в кавычках, одинарных или двойных. '25' — это не число, а строка из двух символов.

boolean — всего два значения: true (да) и false (нет). Любое сравнение даёт именно их: 5 > 3 — это true.

undefined и null — две пустоты. undefined означает «значения не задавали»: так выглядит переменная, в которую ничего не положили. null вы ставите руками, когда хотите сказать «здесь пусто нарочно».

Узнать тип можно оператором typeof. Он возвращает название типа строкой:

typeof 25       // 'number'
typeof '25'     // 'string'
typeof true     // 'boolean'
typeof nickname // 'undefined'
typeof null     // 'object'

Последняя строка — не опечатка. typeof null даёт 'object'. Это ошибка в самом языке, которой больше тридцати лет. Исправить её уже нельзя: сломается старый код. Просто запомните.

Плюс складывает числа и склеивает строки

Вот место, где спотыкаются почти все.

2 + 2     // 4
'2' + '2' // '22'
'2' + 2   // '22'

Если хотя бы с одной стороны от плюса строка, плюс не складывает, а склеивает. Число тихо превращается в текст и приклеивается рядом.

Плюс работает слева направо, и это тоже ловушка:

'Итого: ' + 2 + 3 // 'Итого: 23'

Сначала 'Итого: ' склеилось с 2, получилась строка. Потом к строке приклеилась 3.

Если у вас строка, а нужно число, превратите её явно функцией Number:

const text = '2'
Number(text) + 2 // 4

Шаблонные строки

Склеивать текст плюсами неудобно: легко потерять пробел. Есть способ проще — строка в обратных кавычках.

const name = 'Аня'
const age = 20

const withPlus = 'Привет, ' + name + '! Вам ' + age + '.'
const withTemplate = `Привет, ${name}! Вам ${age}.`

В обеих переменных одно и то же: Привет, Аня! Вам 20.. Внутри обратных кавычек ${...} открывает место для значения. Что написано в скобках, то вычисляется и вставляется в текст. Можно писать не только имя, но и выражение: ${age + 1} даст 21.

Обратная кавычка — на клавише слева от единицы, в английской раскладке. Обычные кавычки её не заменяют: в 'Вам ${age}' подстановки не будет, вы получите текст как есть.

Где писать код в задачах

В каждой задаче вас ждёт заготовка:

function nextYear(name, age) {
  // ваш код
}

Код пишется внутри заготовки, между фигурными скобками. Готовый ответ отдаётся словом return: return 'ответ'. Проверка заберёт то, что стоит после него. Что такое функции и return, подробно разберём в уроке про функции. Пока достаточно этого.

Теперь попробуйте сами. Код выполняется прямо в браузере — нажмите «Запустить», и увидите результат через миг.