JS операторы

Операторы JavaScript — специальные символы или ключевые слова, выполняющие операции над значениями (операндами) и возвращающие результат.

Зачем нужно

Операторы — строительные блоки любого выражения. Без понимания приоритетов операторов, правил приведения типов и различий между == и === легко получить трудноотлавливаемые баги. ES6+ добавил важные операторы: nullish coalescing (??), optional chaining (?.), логическое присваивание (&&=, ||=, ??=), которые активно используются в современном коде.

Где используется

  • Арифметика и математические вычисления
  • Сравнение значений при условиях и сортировке
  • Логические проверки в условиях и тернарных выражениях
  • Безопасный доступ к свойствам через ?. и значения по умолчанию через ??
  • Битовые операции при работе с флагами и низкоуровневыми данными

Основной контент

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

console.log(10 + 3);   // 13
console.log(10 - 3);   // 7
console.log(10 * 3);   // 30
console.log(10 / 3);   // 3.3333...
console.log(10 % 3);   // 1  (остаток от деления)
console.log(2 ** 10);  // 1024 (возведение в степень)

// Инкремент / декремент
let x = 5;
console.log(x++); // 5 (постфикс — сначала значение, потом +1)
console.log(++x); // 7 (префикс — сначала +1, потом значение)

// Унарный минус
console.log(-x);  // -7

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

// === (строгое) vs == (нестрогое с приведением типов)
console.log(1 == '1');   // true  — строка приводится к числу
console.log(1 === '1');  // false — разные типы

// Всегда используйте ===, кроме явной проверки null/undefined:
const val = null;
console.log(val == null);  // true — val равен null или undefined
console.log(val === null); // true — только null

// Сравнение с NaN
console.log(NaN === NaN);    // false — NaN не равен ничему
console.log(Number.isNaN(NaN)); // true — правильная проверка

// Операторы: > < >= <=
console.log('б' > 'а'); // true — сравнение строк по коду Unicode
console.log(null > 0);  // false
console.log(null == 0); // false — особый случай
console.log(null >= 0); // true  — ещё один особый случай!

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

// && — AND: возвращает первый falsy или последний truthy
console.log(1 && 2 && 3);    // 3
console.log(0 && 'anything'); // 0

// || — OR: возвращает первый truthy или последний falsy
console.log(0 || '' || 'default'); // 'default'
console.log(1 || 'unreached');     // 1

// ?? — Nullish Coalescing: только null/undefined, не 0/''/false
console.log(0 ?? 'default');   // 0   — 0 не null/undefined!
console.log(null ?? 'default'); // 'default'

// ! — NOT
console.log(!true);  // false
console.log(!!0);    // false (двойное отрицание = Boolean)

Оператор присваивания и логическое присваивание

let a = 1;
a += 5;  // a = 6
a -= 2;  // a = 4
a *= 3;  // a = 12

// Логическое присваивание (ES2021)
let user = { name: 'Иван', age: null };

user.age ??= 25;      // присваивает только если null/undefined → 25
user.name ||= 'Гость'; // присваивает только если falsy → 'Иван' (не меняется)
user.isAdmin &&= false; // присваивает только если truthy → undefined (не меняется)

Тернарный оператор и optional chaining

const score = 75;
const grade = score >= 90 ? 'A' : score >= 70 ? 'B' : 'C';
console.log(grade); // 'B'

// Optional chaining ?.
const obj = { a: { b: { c: 42 } } };
console.log(obj?.a?.b?.c);      // 42
console.log(obj?.x?.y?.z);      // undefined (не TypeError)
console.log(obj?.a?.greet?.);  // undefined (безопасный вызов метода)

// Оператор typeof
console.log(typeof 'hello');     // 'string'
console.log(typeof undefined);   // 'undefined'
console.log(typeof null);        // 'object' — исторический баг!
console.log(typeof function{}); // 'function'

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

  • == вместо ===: неявное приведение типов даёт неожиданные результаты — 0 == false, '' == false, null == undefined.
  • null >= 0 равно true: null при сравнении >, <, >=, <= преобразуется в 0, но при == — нет. Непоследовательное поведение.
  • || для значений по умолчанию с нулём: count || 10 вернёт 10 если count === 0. Используйте ??.
  • Постфиксный инкремент: return x++ вернёт исходное значение, а не увеличенное — частая ошибка в рекурсии.

Связанные темы

Ресурсы

🎓 Источник: 👶 JavaScript for Beginners 5. Expressions and Assignment

  • 📅 2021-10-02 · YouTube
  • Тезисы: Expression = вычисляется в значение. Statement = инструкция действия. Assignment = тоже expression (возвращает присвоенное). a = b = 5 работает потому что b = 5 это expression

⚡ Источник: Logical Expression в javascript · AsForJS

  • 📅 2023-05-10 · YouTube
  • Тезисы: && возвращает первый falsy или последний truthy. || наоборот. ?? — только при null/undefined (не при 0 или "")

⚡ Источник: JavaScript expressions · AsForJS

  • 📅 2023-05-26 · YouTube
  • Тезисы: в спеке у каждого expression есть Evaluation step. Operator precedence — это структура парсера, а не runtime

⚡ Источник: Почему в JavaScript прибавить число к обьекту - это круто · AsForJS

  • 📅 2023-05-18 · YouTube
  • Тезисы: + запускает abstract operation ApplyStringOrNumericBinaryOperator. Для объектов сначала ToPrimitive через Symbol.toPrimitive или fallback valueOf/toString