Операторы и приведение типов

Маленькая загадка: в JavaScript '5' + 3 даёт '53', а '5' - 3 — 2. Почему при сложении числа «склеиваются», а при вычитании считаются правильно? В этом уроке ты изучишь операторы и узнаешь, как JavaScript сам преобразует типы.

Арифметические операторы

Кроме сложения, вычитания, умножения и деления, в JavaScript есть два полезных оператора. % даёт остаток от деления: 7 % 3 = 1. ** возводит в степень: 2 ** 3 = 8. Остаток удобен для проверки чётности: если n % 2 равно нулю, число чётное.

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

10
4
21
3.5
1
1024
14
20

Как и в математике, умножение и деление выполняются раньше сложения, а скобки меняют порядок. Есть и краткие формы для изменения переменной: x += 5 означает x = x + 5, а x++ увеличивает значение на 1.

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

15
12
24
25

Сравнение: === и ==

Операторы сравнения (>, <, >=, <=) всегда возвращают true или false. Проверить равенство можно двумя способами. Строгое равенство === сравнивает и значение, и тип. Нестрогое равенство == перед сравнением приводит типы, поэтому может давать неожиданные результаты.

console.log(5 > 3);
console.log(5 === 5);
console.log(5 === '5');
console.log(5 == '5');
console.log(0 == false);
console.log(5 !== '5');

true
true
false
true
true
true

Приведение типов

Вот ответ на загадку: оператор + и складывает числа, и склеивает строки. Если хотя бы одна сторона — строка, JavaScript превращает в строку и другую и соединяет их. А -, * и / работают только с числами, поэтому превращают строки в числа. Значение, которое нельзя превратить в число, даёт NaN (Not a Number — «не число»).

console.log('5' + 3);
console.log('5' - 3);
console.log('5' * '2');
console.log(true + 1);
console.log('hello' * 2);
console.log(typeof NaN);

53
2
10
2
NaN
number

Вместо того чтобы угадывать, надёжнее преобразовывать типы самому — это называется явным преобразованием. Number() превращает значение в число, String() — в строку, Boolean() — в логическое значение. parseInt() читает целое число из начала строки, например 42 из '42px'.

const input = '25';
console.log(input + 5);
console.log(Number(input) + 5);
console.log(Number('abc'));
console.log(parseInt('42px'));
console.log(String(100) + 1);

255
30
NaN
42
1001

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

• && (И) — истина, если оба условия истинны.
• || (ИЛИ) — истина, если истинно хотя бы одно условие.
• ! (НЕ) — меняет значение на противоположное: !true даёт false.

Условием может быть любое значение. Шесть значений считаются ложноподобными (falsy): false, 0, пустая строка '', null, undefined и NaN. Все остальные значения истинноподобные (truthy) — даже строки '0' и 'false', ведь они не пустые.

const age = 16;
const hasTicket = true;

console.log(age >= 14 && hasTicket);
console.log(age >= 18 && hasTicket);
console.log(age >= 18 || hasTicket);
console.log(!hasTicket);
console.log(Boolean(''), Boolean('0'), Boolean(0));

true
false
true
false
false true false

const price = '15';
const quantity = 3;
// 1) print price * quantity
// 2) print price + quantity
// 3) print the correct sum using Number()

45
153
18