Урок 3. Операторы и сравнение: == и ===

Оператор — значок действия над значениями: + складывает, > сравнивает, === проверяет равенство. Значения, над которыми действует оператор, называют операндами. В этом уроке — операторы, без которых не обходится ни одна программа, и главная ловушка новичков: разница между == и ===.

Арифметика

console.log(7 + 2);
console.log(7 - 2);
console.log(7 * 2);
console.log(7 / 2);
console.log(7 % 2);
console.log(2 ** 10);

9
5
14
3.5
1
1024

• / — обычное деление, результат может быть дробным. Целой части деления отдельного оператора нет: Math.trunc(7 / 2) даёт 3.
• % — остаток от деления: 7 % 2 — это 1. Остаток помогает проверить чётность: число чётное, если n % 2 === 0.
• ** — возведение в степень: 2 ** 10 — это 1024.

Порядок действий — как в математике: сначала **, потом *, /, %, потом + и -. Скобки меняют порядок: 2 + 2 * 2 — это 6, а (2 + 2) * 2 — 8.

Сокращённая запись

Изменить значение переменной на месте можно короче:

let score = 10;
score += 5;
score -= 3;
score *= 2;
score++;
console.log(score);

25

score += 5 — то же, что score = score + 5. Так же работают -=, *=, /=. score++ увеличивает значение на единицу, score-- — уменьшает.

Строки и плюс

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

console.log("5" + 3);
console.log(5 + 3 + "1");
console.log("1" + 5 + 3);
console.log("5" - 3);
console.log("5" * "2");
console.log("абв" * 2);

53
81
153
2
10
NaN

Выражение считается слева направо: в 5 + 3 + "1" сначала 5 + 3 — это 8, потом 8 + "1" — "81". А в "1" + 5 + 3 строка стоит первой, и всё дальше склеивается.

Эта ловушка встречается постоянно: значение из поля формы или из prompt() — всегда строка, и "2" + "2" даёт "22". Перед сложением строку переводят в число: Number("2") + Number("2") — это 4. Подробно — в справке Как перевести строку в число.

Сравнение

Операторы >, <, >=, <= сравнивают и возвращают true или false. Числа сравниваются как числа, а строки — посимвольно, по кодам символов. Это похоже на порядок слов в словаре, но не совсем:

console.log(10 > 9);
console.log("10" > "9");
console.log("арбуз" < "банан");
console.log("Яблоко" < "яблоко");

true
false
true
true

"10" > "9" — false: при сравнении строк первым сравнивается первый символ, а "1" стоит раньше "9". Большие буквы идут раньше маленьких, поэтому "Яблоко" < "яблоко". Если сравниваете числа, которые пришли строками, сначала переведите их в числа.

== и ===

Равенство проверяют два оператора:

• === — строгое равенство: true, только если совпадают и тип, и значение. 5 === "5" — false: число и строка — разные типы.
• == — нестрогое равенство: перед сравнением приводит значения к одному типу по сложным правилам. 5 == "5" — true.

console.log(5 === "5");
console.log(5 == "5");
console.log(0 == "");
console.log(0 == "0");
console.log("" == "0");
console.log(null == undefined);
console.log(null === undefined);
console.log(NaN === NaN);

false
true
true
true
false
true
false
false

Посмотрите на три строки посередине: 0 равен и "", и "0", а "" и "0" друг другу не равны. С == такие сюрпризы неизбежны. Поэтому правило: всегда пишите === и !== (строгое «не равно»). Тогда сравнение делает ровно то, что написано.

Две особые пары:

• NaN не равен ничему, даже себе. Проверка на NaN — Number.isNaN(x).
• null == undefined — true, а кроме undefined и самого себя null нестрого не равен ничему. Поэтому запись x == null иногда используют нарочно — чтобы одной проверкой поймать и null, и undefined.

Логические операторы

• && — «и»: true, если верны оба условия.
• || — «или»: true, если верно хотя бы одно.
• ! — «не»: переворачивает true в false и обратно.

const age = 20;
const hasTicket = false;

console.log(age >= 18 && hasTicket);
console.log(age >= 18 || hasTicket);
console.log(!hasTicket);

false
true
true

У && и || есть особенность: они возвращают не обязательно true или false, а одно из значений операндов. a || b возвращает a, если оно «истинное», иначе b. Этим пользуются, чтобы подставить значение по умолчанию. Но «ложными» считаются и 0, и пустая строка — и тут на помощь приходит ??.

Оператор ??

a ?? b возвращает b, только если a — null или undefined. Ноль и пустая строка остаются как есть:

const count = 0;
const title = null;

console.log(count || 10);
console.log(count ?? 10);
console.log(title ?? "Без названия");

10
0
Без названия

count || 10 заменил ноль на 10, хотя ноль — нормальное количество. ?? такой ошибки не делает. Для значений по умолчанию берите ??.

Коротко

• + - * / % ** — арифметика; % — остаток, ** — степень; порядок действий — как в математике.
• + со строкой склеивает: "5" + 3 — "53"; -, *, / переводят строки в числа.
• Строки сравниваются посимвольно: "10" < "9".
• Всегда === и !==: == приводит типы и путает.
• &&, ||, ! — «и», «или», «не»; значение по умолчанию — через ??.

Проверьте себя