Операторы в JavaScript: типы, использование, примеры кода

Раздел: Основы JavaScript -> Операторы в JavaScript

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

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

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

К арифметическим операторам относятся +, -, *, /, % (остаток от деления), ** (возведение в степень). Инкремент ++ и декремент -- также входят в эту группу.

let a = 10;
let b = 3;
console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.333...
console.log(a % b); // 1
console.log(a ** b); // 1000

оператор js (операторы в javascript)

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

Операторы сравнения возвращают логическое значение. Строгое равенство === и неравенство !== проверяют и значение, и тип. Нестрогие == и != выполняют приведение типов.

console.log(5 === '5'); // false
console.log(5 == '5'); // true
console.log(10 > 5); // true
console.log(10 <= 5); // false

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

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

let x = 0;
console.log(x && 'выполнено'); // 0 (короткое замыкание)
console.log(x || 'значение по умолчанию'); // 'значение по умолчанию'
console.log(!x); // true

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

Простое присваивание = и составные +=, -=, *= и т.д.

let counter = 0;
counter += 5;
console.log(counter); // 5

Строковый оператор +

Если один из операндов является строкой, оператор + выполняет конкатенацию.

console.log('Hello ' + 'World'); // Hello World
console.log(1 + '2'); // '12' (строка)

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

Единственный тернарный оператор ? : позволяет записать условное выражение в одну строку.

let age = 20;
let status = age >= 18 ? 'взрослый' : 'несовершеннолетний';
console.log(status); // взрослый

Оператор typeof

Возвращает строку с типом операнда.

console.log(typeof 42); // 'number'
console.log(typeof 'John'); // 'string'
console.log(typeof undefined); // 'undefined'

Оператор запятая

Выполняет несколько выражений, возвращая результат последнего.

let result = (1 + 2, 3 + 4);
console.log(result); // 7

Оператор in

Проверяет существование свойства в объекте.

const obj = { name: 'Alice' };
console.log('name' in obj); // true
console.log('age' in obj); // false

Оператор instanceof

Проверяет, является ли объект экземпляром определённого класса.

const arr = [1, 2, 3];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true

Как использовать оператор + для конкатенации строк?

Когда один из операндов является строкой, оператор + преобразует другой операнд в строку и объединяет их. Это удобно для построения сообщений. Однако нужно быть осторожным, чтобы не получить неожиданный результат при сложении чисел.

let a = 1, b = 2, c = '3';
console.log(a + b + c); // '33' (сначала сложение чисел 1+2=3, потом конкатенация с '3')

Типичная ошибка: предполагать, что a + b + c даст '123'. Решение: использовать явное преобразование или группировку скобками.

Как работает оператор строгого равенства ===?

Оператор === возвращает true только если операнды имеют одинаковое значение и одинаковый тип. Он предпочтительнее ==, так как исключает неявное преобразование типов.

console.log(0 === false); // false
console.log('' === false); // false
console.log(null === undefined); // false

Ошибка: использование == может привести к путанице, например 0 == false даёт true. Решение: всегда применять строгое равенство для предсказуемости.

Как оператор && используется для короткого замыкания?

Оператор && вычисляет операнды слева направо и возвращает первое ложное значение или последнее, если все истинны. Это позволяет выполнять условное выполнение функций.

let user = { name: 'Bob' };
user && console.log(user.name); // Bob (выполняется, если user истинен)

Проблема: если user равен 0 или пустой строке, оператор && не выполнит правую часть, что может быть неожиданным. Лучше использовать явную проверку if (user !== null && user !== undefined).

Как применять тернарный оператор вместо if-else?

Тернарный оператор условие ? выражение1 : выражение2 возвращает результат одного из двух выражений. Его удобно использовать для присваивания значения.

let isMember = true;
let discount = isMember ? 0.1 : 0;
console.log(discount); // 0.1

Ошибка: вложение нескольких тернарных операторов делает код нечитаемым. Рекомендуется ограничиться одним уровнем или использовать if.

Что такое оператор нулевого слияния ?? и его отличие от ||?

Оператор ?? возвращает правый операнд только если левый равен null или undefined. В отличие от ||, он не воспринимает 0, '', false как ложные.

let count = 0;
console.log(count || 10); // 10
console.log(count ?? 10); // 0

Путаница между || и ??. Нужно выбирать ??, когда требуется различать только null/undefined и другие ложные значения.

Как оператор опциональной цепочки ?. упрощает доступ к вложенным свойствам?

Оператор ?. позволяет безопасно обращаться к свойствам, не вызывая ошибки, если промежуточное значение равно null или undefined.

const user = { profile: { name: 'Kate' } };
const city = user?.profile?.address?.city;
console.log(city); // undefined, без ошибки

Раньше для такой проверки приходилось писать цепочку if или логические операторы. Теперь код стал короче, но нужно помнить, что ?. может скрыть некоторые баги.

Типичные проблемы при работе с операторами

Путаница между = и ==/===. Одиночное равно - присваивание, двойное или тройное - сравнение. Ошибка часто возникает в условиях.

if (x = 10) { console.log('всегда true'); } // присваивание, а не сравнение

Неявное преобразование типов. Операторы +, ==, > могут приводить к неожиданным результатам.

console.log('5' - 3); // 2 (строка преобразуется в число)
console.log('5' + 3); // '53' (число преобразуется в строку)

Приоритет операторов. Например, логическое И имеет более высокий приоритет, чем ИЛИ. Необходимо использовать скобки.

console.log(true || false && false); // true, так как && вычисляется первым: false && false = false, затем true || false = true

Результат && и || с небулевыми операндами. Они возвращают не обязательно true/false, а один из операндов. Это может быть неочевидно.

let name = '';
let displayName = name || 'гость';
console.log(displayName); // 'гость' (пустая строка ложна)

Забывание скобок в тернарном операторе. Без скобок выражение может интерпретироваться неверно из-за приоритета.

let value = a > b ? a + b : a - b; // работает корректно, но при более сложных условиях скобки обязательны

Расширенные примеры использования операторов

Комбинирование операторов и приоритет

Пример

let result = (2 + 3) * 4 - 1;
console.log(result); // 19

Скобки изменяют порядок вычислений. Без скобок приоритет умножения выше сложения: 2 + 3 * 4 - 1 дало бы 13.

Оператор spread (...) для копирования массивов и объектов

Пример

const numbers = [1, 2, 3];
const copy = [...numbers];
console.log(copy); // [1, 2, 3]

const obj = { a: 1, b: 2 };
const clone = { ...obj, c: 3 };
console.log(clone); // { a: 1, b: 2, c: 3 }

Оператор spread извлекает все свойства переданного объекта или элементы массива и помещает их в новый массив или объект. Это поверхностное копирование.

Оператор запятая в цикле for

Пример

for (let i = 0, j = 10; i < j; i++, j--) {
    console.log(i, j);
}
// Вывод: 0 10
//        1 9
//        2 8
//        3 7
//        4 6

Оператор запятая позволяет объявить несколько переменных в начале цикла и выполнять несколько действий на каждом шаге.

Оператор in для проверки ключей объекта

Пример

const car = { brand: 'Toyota', model: 'Camry' };
console.log('brand' in car); // true
console.log('year' in car);  // false

// Отличие от hasOwnProperty: оператор in также проверяет унаследованные свойства
console.log('toString' in car); // true

Оператор in проверяет наличие свойства как собственного, так и унаследованного по цепочке прототипов.

Оператор instanceof для проверки класса

Пример

class Animal {}
class Dog extends Animal {}

const rex = new Dog();
console.log(rex instanceof Dog);    // true
console.log(rex instanceof Animal); // true
console.log(rex instanceof Object); // true

// Для примитивов instanceof всегда false
console.log('hello' instanceof String); // false

Оператор instanceof проверяет, присутствует ли прототип класса в цепочке прототипов объекта.

Составные операторы присваивания с побитовыми операциями

Пример

let flags = 0b0011; // 3
flags |= 0b0100;    // побитовое ИЛИ, теперь flags = 0b0111 (7)
console.log(flags); // 7

flags &= 0b0010;    // побитовое И, теперь flags = 0b0010 (2)
console.log(flags); // 2

Побитовые операторы (&, |, ^, <<, >>, >>>) редко используются в повседневной разработке, но могут быть полезны для работы с флагами или оптимизации.

Оператор typeof с вызовом функции

Пример

function greet() {
    return 'Hello';
}
console.log(typeof greet);    // 'function'
console.log(typeof greet()); // 'string'

Оператор typeof безопасен даже для необъявленных переменных: typeof undeclaredVar вернёт 'undefined', а не вызовет ошибку.

Оператор delete для удаления свойства объекта

Пример

const user = { name: 'Alice', age: 25 };
delete user.age;
console.log(user); // { name: 'Alice' }
console.log(user.age); // undefined

// delete не работает с локальными переменными (var, let, const)
let x = 1;
console.log(delete x); // false (в строгом режиме ошибка)

Оператор delete удаляет свойство из объекта, возвращая true при успехе. Нельзя удалить переменные, объявленные через let/const/var.

Операторы в JavaScript - comments

оператор js (javascript)