Операторы в JavaScript: полный разбор с примерами

Операторы - это то, как выражения выполняют работу

Практически любая нетривиальная строка JavaScript состоит из операторов - символов, которые берут одно или два значения и возвращают новое. + складывает, === сравнивает, && объединяет булевы значения, ? : выбирает одно из двух. Большинство операторов в js знакомы по другим языкам, но у некоторых есть свои особенности, о которых стоит знать заранее.

Пройдёмся по ним по категориям, а в конце разберём те, что нужны реже, но без которых в нужный момент не обойтись.

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

С базовыми всё предсказуемо:

console.log(7 + 3);    // 10
console.log(7 - 3);    // 4
console.log(7 * 3);    // 21
console.log(7 / 3);    // 2.3333...
console.log(7 % 3);    // 1   (остаток)
console.log(7 ** 3);   // 343 (возведение в степень)

Стоит обратить внимание на несколько моментов:

• / - это всегда деление с плавающей точкой. 7 / 2 даст 3.5, а не 3. Если нужен именно целочисленный результат, используйте Math.floor(7 / 2) или Math.trunc(7 / 2).
• % возвращает остаток, а не математический модуль. Знак результата совпадает со знаком левого операнда: -7 % 3 - это -1, а не 2.
• + - оператор с двойным смыслом. Если хотя бы один из операндов - строка, происходит не сложение, а конкатенация: "3" + 1 даёт "31". Об этом чуть ниже подробнее.

Инкремент и декремент

let count = 5;
count++;           // пост-инкремент: count теперь равен 6
console.log(count);

let other = ++count;  // пре-инкремент: сначала count становится 7, затем присваивается
console.log(other, count);

Разница между count++ и ++count проявляется только тогда, когда значение выражения используется прямо в той же строке. Если это самостоятельный оператор, они делают одно и то же. Большинство стайл-гайдов вообще рекомендуют писать count += 1 - так понятнее.

У оператора + раздвоение личности

Вот на этом хоть раз спотыкался каждый:

console.log(1 + 2);         // 3
console.log("1" + 2);       // "12"
console.log(1 + "2");       // "12"
console.log("price: " + 5); // "price: 5"

Если хотя бы один из операндов - строка, + превращается в конкатенацию и приводит вторую сторону к строке. Все остальные арифметические операторы работают наоборот: строки приводятся к числам:

console.log("10" - 2);   // 8
console.log("10" * 2);   // 20
console.log("10" / "2"); // 5

Главное правило: когда собираете строки - используйте шаблонные литералы (`price: ${5}`). А когда считаете числа - убедитесь, что на вход действительно приходят числа: Number(x) или parseInt(x, 10) приводят типы явно.

Операторы сравнения в JavaScript

Операторы сравнения возвращают булево значение. Есть два варианта: строгое и нестрогое сравнение.

console.log(5 === 5);    // true
console.log(5 === "5");  // false  (разные типы)
console.log(5 == "5");   // true   (== приводит типы)
console.log(5 !== "5");  // true
console.log(5 != "5");   // false

=== и !== - это строгое сравнение: и значение, и тип должны совпадать. А вот == и != сначала приводят типы, и из-за этого случаются сюрпризы вроде null == undefined, который возвращает true, или [] == false, тоже true. По умолчанию используйте === и !==. Единственное распространённое исключение - конструкция x == null: удобный способ проверить, равно ли x либо null, либо undefined.

Операторы сравнения работают с числами так, как и ожидаешь, а со строками - по алфавиту:

console.log(3 < 5);         // true
console.log(5 >= 5);        // true
console.log("apple" < "banana");  // true
console.log("Z" < "a");           // true (заглавные буквы идут раньше строчных)

Сравнение строк идёт по кодам символов, поэтому регистр имеет значение. Если нужна «человеческая» сортировка - используйте String.prototype.localeCompare.

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

&& (И), || (ИЛИ) и ! (НЕ) умеют комбинировать булевы значения - но на практике они работают интереснее, чем можно было бы ожидать от чистой булевой алгебры.

console.log(true && false);  // false
console.log(true || false);  // true
console.log(!true);          // false

Нюанс вот в чём: && и || возвращают не true или false, а один из своих операндов. && вернёт первое falsy-значение, либо последнее, если все значения truthy. || - первое truthy-значение, либо последнее, если все falsy.

console.log("hi" && 42);      // 42     (оба истинны, возвращает последнее)
console.log(0 && "hi");       // 0      (первое ложное)
console.log("" || "fallback"); // "fallback"
console.log("name" || "anon"); // "name"

Именно поэтому вы часто встретите такие конструкции, как const displayName = user.name || "Guest" - берём первое непустое значение. Коротко и ёмко, но есть нюанс: || считает 0, "" и false поводом взять запасной вариант. Если для вас это валидные значения, используйте ?? (о нём ниже).

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

const user = null;
// Безопасно - правая часть пропускается, потому что user ложно.
user && user.sendEmail();

Оператор нулевого слияния ??

Оператор ?? в javascript работает похоже на ||, но срабатывает только на null или undefined - значения 0, "" и false он пропускает как вполне валидные.

const count = 0;

console.log(count || 10);   // 10  (0 является falsy, поэтому используется запасное значение)
console.log(count ?? 10);   // 0   (0 не является nullish, поэтому сохраняется)

const name = undefined;
console.log(name ?? "Anon"); // "Anon"

Используйте ??, если валидным значением может быть что-то ложное - ноль, пустая строка, явный false. А || берите, когда любое ложное значение должно означать «ничего нет». В современном коде ?? - более безопасный выбор по умолчанию для необязательных значений с ненулевым дефолтом.

Оператор присваивания в JavaScript

= просто присваивает значение. Составные формы объединяют присваивание с каким-нибудь другим оператором:

let x = 10;
x += 5;    // x = x + 5  → 15
x -= 3;    // 12
x *= 2;    // 24
x /= 4;    // 6
x %= 4;    // 2
x **= 3;   // 8
console.log(x);

Есть ещё логические операторы присваивания - ||=, &&= и ??=, которые записывают новое значение только при выполнении определённого условия:

const config = { timeout: 0, retries: null };

config.timeout ??= 5000;   // присваивается только если null/undefined; 0 остаётся
config.retries ??= 3;      // null, поэтому присваивается
config.host ||= "localhost"; // undefined ложно, поэтому присваивается

console.log(config);

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

Тернарный оператор в JavaScript

Запись условие ? a : b - это выражение-аналог if/else. Если условие истинно, возвращается a, иначе - b:

const age = 20;
const status = age >= 18 ? "adult" : "minor";
console.log(status);

const count = 1;
const label = count === 1 ? "item" : "items";
console.log(`${count} ${label}`);

Тернарный оператор хорош для коротких выборок значения. Но как только вы начинаете его вкладывать - превращается в головоломку: если у вас получается a ? b : c ? d : e, лучше взять if/else или объект-словарь.

Оператор typeof и instanceof в JavaScript

Оператор typeof возвращает строку с типом своего операнда:

console.log(typeof 42);         // "number"
console.log(typeof "hi");       // "string"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object"  ← исторический баг, исправить нельзя
console.log(typeof []);         // "object"
console.log(typeof function(){}); // "function"

Пара граблей, которые стоит запомнить раз и навсегда: typeof null возвращает "object" (баг из 1995 года, который уже никогда не починят), а массивы тоже определяются как "object". Поэтому для массивов используйте Array.isArray(x), а для null - обычное x === null.

Оператор instanceof проверяет, был ли объект создан на основе конкретного конструктора:

class Dog {}
const rex = new Dog();

console.log(rex instanceof Dog);     // true
console.log(rex instanceof Object);  // true (каждый объект является)
console.log([] instanceof Array);    // true

Spread и rest - один и тот же ...

Синтаксис ... встречается в двух ситуациях. В роли spread он «разворачивает» итерируемый объект на отдельные элементы:

const nums = [1, 2, 3];
const more = [0, ...nums, 4];
console.log(more);                // [0, 1, 2, 3, 4]

const user = { name: "Ada" };
const full = { ...user, age: 30 };
console.log(full);                // { name: "Ada", age: 30 }

console.log(Math.max(...nums));   // 3

В роли rest он, наоборот, собирает несколько значений в один массив - обычно в параметрах функции или при деструктуризации:

function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4));  // 10

const [first, ...others] = [10, 20, 30, 40];
console.log(first, others);    // 10 [20, 30, 40]

Синтаксис один - задачи противоположные. Spread распаковывает, rest собирает. Кто из них кто - решает контекст: в вызове или литерале это spread, в списке параметров или шаблоне деструктуризации - rest.

Приоритет операторов в JavaScript (если сомневаетесь - ставьте скобки)

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

console.log(1 + 2 * 3);          // 7, а не 9
console.log((1 + 2) * 3);        // 9
console.log(true || false && false);  // true, потому что && связывает сильнее, чем ||

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

Побитовые операторы (скорее всего, вам не они нужны)

Для полноты картины: &, |, ^, ~, <<, >> и >>> работают с двоичным представлением целых чисел. Встретить их можно в коде для графики, в низкоуровневых протоколах и изредка - в API с флагами-битмасками.

console.log(5 & 3);   // 1   (0101 & 0011 = 0001)
console.log(5 | 3);   // 7
console.log(5 ^ 3);   // 6
console.log(~5);      // -6
console.log(1 << 3);  // 8

Один распространённый, но сомнительный трюк: n | 0 усекает число до 32-битного целого, и раньше это использовали как более быструю замену Math.trunc. Не надо так - Math.trunc понятнее и работает с числами за пределами 32-битного диапазона.

Дальше: if/else

Операторы возвращают значения, а if/else на основе этих значений выбирает, какую ветку кода выполнить. По сути, большую часть времени вы будете скармливать результаты операторов сравнения и логических операторов именно в условные конструкции - об этом и пойдёт речь на следующей странице.