Приведи примеры бинарных операторов в JavaScript и в чем их отличие?

Краткий ответ

Бинарные операторы в JavaScript — это операторы, которые работают с двумя операндами. Они делятся на несколько категорий:

Арифметические (+, -, *, /, %, **)
Сравнения (==, ===, !=, !==, <, >, <=, >=)
Логические (&&, ||, ??)
Присваивания (=, +=, -=, *=, /=, %=)
Битовые (&, |, ^, <<, >>, >>>)

Полная классификация бинарных операторов

Категория	Операторы	Назначение	Пример
Арифметические	`+`, `-`, ``, `/`, `%`, `*`	Математические операции	`5 + 3 = 8`
Сравнения	`==`, `===`, `!=`, `!==`, `<`, `>`	Сравнение значений	`5 > 3 = true`
Логические	`&&`, `		`,` ??`
Присваивания	`=`, `+=`, `-=`, `*=`, `/=`	Присвоение значений	`x += 5`
Битовые	`&`, `	`,` ^`,` <<`,` >>`	Операции с битами

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

Основные арифметические операторы

// Сложение
let sum = 5 + 3; // 8
let concat = "Hello" + " World"; // "Hello World"
 
// Вычитание
let diff = 10 - 4; // 6
 
// Умножение
let product = 6 * 7; // 42
 
// Деление
let quotient = 15 / 3; // 5
let decimal = 10 / 3; // 3.3333...
 
// Остаток от деления (модуло)
let remainder = 17 % 5; // 2
 
// Возведение в степень (ES2016)
let power = 2 ** 3; // 8

Особенности оператора `+`

// Приведение типов
console.log(5 + "3"); // "53" (строка)
console.log(5 + 3); // 8 (число)
console.log("5" + 3); // "53" (строка)
console.log(+"5" + 3); // 8 (число, унарный +)
 
// С булевыми значениями
console.log(5 + true); // 6 (true = 1)
console.log(5 + false); // 5 (false = 0)

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

Строгое и нестрогое сравнение

Оператор	Название	Приведение типов	Пример
`==`	Равенство	Да	`"5" == 5` → `true`
`===`	Строгое равенство	Нет	`"5" === 5` → `false`
`!=`	Неравенство	Да	`"5" != 5` → `false`
`!==`	Строгое неравенство	Нет	`"5" !== 5` → `true`

// Примеры сравнения
console.log(5 == "5"); // true (приведение типов)
console.log(5 === "5"); // false (разные типы)
 
console.log(null == undefined); // true
console.log(null === undefined); // false
 
console.log(0 == false); // true
console.log(0 === false); // false
 
console.log("" == false); // true
console.log("" === false); // false

Операторы порядка

// Числовое сравнение
console.log(5 > 3); // true
console.log(10 <= 10); // true
console.log(7 < 7); // false
 
// Строковое сравнение (лексикографическое)
console.log("apple" < "banana"); // true
console.log("Apple" < "apple"); // true (заглавные буквы меньше)
 
// Смешанное сравнение
console.log("10" > 9); // true (строка приводится к числу)
console.log("10" > "9"); // false (строковое сравнение)

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

Логическое И (&&)

// Возвращает первое falsy значение или последнее truthy
console.log(true && true); // true
console.log(true && false); // false
console.log(5 && 3); // 3
console.log(0 && 5); // 0
console.log("" && "hello"); // ""
 
// Короткое замыкание
let user = { name: "Alex" };
user && console.log(user.name); // "Alex"
 
let emptyUser = null;
emptyUser && console.log(emptyUser.name); // ничего не выведет

Логическое ИЛИ (||)

// Возвращает первое truthy значение или последнее falsy
console.log(false || true); // true
console.log(0 || 5); // 5
console.log("" || "default"); // "default"
console.log(null || undefined || "fallback"); // "fallback"
 
// Установка значений по умолчанию
function greet(name) {
  name = name || "Гость";
  console.log(`Привет, ${name}!`);
}
 
greet(); // "Привет, Гость!"
greet("Александр"); // "Привет, Александр!"

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

// Возвращает правый операнд, если левый null или undefined
console.log(null ?? "default"); // "default"
console.log(undefined ?? "default"); // "default"
console.log(0 ?? "default"); // 0
console.log("" ?? "default"); // ""
console.log(false ?? "default"); // false
 
// Отличие от ||
let value = 0;
console.log(value || "default"); // "default"
console.log(value ?? "default"); // 0

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

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

Оператор	Эквивалент	Описание
`x += y`	`x = x + y`	Сложение и присваивание
`x -= y`	`x = x - y`	Вычитание и присваивание
`x *= y`	`x = x * y`	Умножение и присваивание
`x /= y`	`x = x / y`	Деление и присваивание
`x %= y`	`x = x % y`	Остаток и присваивание
`x **= y`	`x = x ** y`	Возведение в степень и присваивание

let x = 10;
 
x += 5; // x = 15
x -= 3; // x = 12
x *= 2; // x = 24
x /= 4; // x = 6
x %= 4; // x = 2
x **= 3; // x = 8
 
// Со строками
let message = "Hello";
message += " World"; // "Hello World"
 
// С массивами (через +=)
let arr = [1, 2];
arr += [3, 4]; // "1,23,4" (приведение к строке!)

Логические операторы присваивания (ES2021)

// Логическое И с присваиванием
let a = true;
a &&= false; // a = a && false → false
 
// Логическое ИЛИ с присваиванием
let b = false;
b ||= true; // b = b || true → true
 
// Нулевое слияние с присваиванием
let c = null;
c ??= "default"; // c = c ?? "default" → "default"
 
let d = 0;
d ??= "default"; // d остается 0

5. Битовые операторы

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

Оператор	Название	Описание	Пример
`&`	Битовое И	Возвращает 1, если оба бита равны 1	`5 & 3 = 1`
`	`	Битовое ИЛИ	Возвращает 1, если хотя бы один бит равен 1
`^`	Битовое исключающее ИЛИ	Возвращает 1, если биты разные	`5 ^ 3 = 6`
`<<`	Сдвиг влево	Сдвигает биты влево	`5 << 1 = 10`
`>>`	Сдвиг вправо	Сдвигает биты вправо	`5 >> 1 = 2`
`>>>`	Беззнаковый сдвиг вправо	Сдвиг без учета знака	`-5 >>> 1`

// Примеры битовых операций
console.log(5 & 3); // 1
// 5 = 101, 3 = 011 → 001 = 1
 
console.log(5 | 3); // 7
// 5 = 101, 3 = 011 → 111 = 7
 
console.log(5 ^ 3); // 6
// 5 = 101, 3 = 011 → 110 = 6
 
console.log(5 << 1); // 10
// 5 = 101 → 1010 = 10
 
console.log(5 >> 1); // 2
// 5 = 101 → 10 = 2
 
// Практическое применение
// Проверка четности
function isEven(n) {
  return (n & 1) === 0;
}
 
// Умножение/деление на степени двойки
let num = 8;
console.log(num << 1); // 16 (умножение на 2)
console.log(num >> 1); // 4 (деление на 2)

Приоритет операторов

Приоритет	Операторы	Ассоциативность
15	`**`	Справа налево
14	`*`, `/`, `%`	Слева направо
13	`+`, `-`	Слева направо
12	`<<`, `>>`, `>>>`	Слева направо
11	`<`, `<=`, `>`, `>=`	Слева направо
10	`==`, `!=`, `===`, `!==`	Слева направо
9	`&`	Слева направо
8	`^`	Слева направо
7	`	`
6	`&&`	Слева направо
5	`
3	`=`, `+=`, `-=`, etc.	Справа налево

// Примеры приоритета
console.log(2 + 3 * 4); // 14 (не 20)
console.log((2 + 3) * 4); // 20
 
console.log(2 ** 3 ** 2); // 512 (не 64, справа налево)
console.log((2 ** 3) ** 2); // 64
 
console.log(true || false && false); // true
console.log((true || false) && false); // false

Практические задачи

Задача 1: Что выведет консоль?

console.log("5" + 3 + 2);
console.log(3 + 2 + "5");

Ответ

"532" и "55"

В первом случае: "5" + 3 → "53", затем "53" + 2 → "532"

Во втором случае: 3 + 2 → 5, затем 5 + "5" → "55"

Задача 2: Что произойдет?

let a = 5;
let b = a++ + ++a;
console.log(b);
console.log(a);

Ответ

b = 12, a = 7

a++ возвращает 5, затем a становится 6 ++a увеличивает a до 7 и возвращает 7 b = 5 + 7 = 12

Задача 3: Результат сравнения

console.log(null == 0);
console.log(null >= 0);
console.log(null > 0);

Ответ

false, true, false

null == 0 → false (специальное правило)
null >= 0 → true (null приводится к 0)
null > 0 → false (null приводится к 0)

Задача 4: Логические операторы

let result = "" || 0 || null || undefined || "default";
console.log(result);
 
let value = 0 ?? null ?? undefined ?? "fallback";
console.log(value);

Ответ

"default" и 0

|| возвращает первое truthy значение
?? возвращает первое не-null и не-undefined значение

Задача 5: Битовые операции

console.log(~5);
console.log(~~5.7);
console.log(5 & 1);
console.log(6 & 1);

Ответ

-6, 5, 1, 0

~5 → -6 (битовое НЕ)
~~5.7 → 5 (двойное битовое НЕ = Math.floor для положительных)
5 & 1 → 1 (5 нечетное)
6 & 1 → 0 (6 четное)

Продвинутые примеры

Использование в реальном коде

// Установка значений по умолчанию
function createUser(name, age, role) {
  return {
    name: name || "Аноним",
    age: age ?? 18,
    role: role || "user",
    isAdmin: role === "admin"
  };
}
 
// Условное выполнение
function processData(data) {
  data && data.length > 0 && data.forEach(item => {
    console.log(item);
  });
}
 
// Переключение булевых значений
let isVisible = true;
isVisible = !isVisible; // false
 
// Или через XOR (для переключения)
let flag = 1;
flag ^= 1; // 0
flag ^= 1; // 1
 
// Проверка прав доступа (битовые маски)
const PERMISSIONS = {
  READ: 1,    // 001
  WRITE: 2,   // 010
  EXECUTE: 4  // 100
};
 
let userPermissions = PERMISSIONS.READ | PERMISSIONS.WRITE; // 011
 
// Проверка разрешения
function hasPermission(user, permission) {
  return (user & permission) === permission;
}
 
console.log(hasPermission(userPermissions, PERMISSIONS.READ)); // true
console.log(hasPermission(userPermissions, PERMISSIONS.EXECUTE)); // false

Оптимизация с помощью операторов

// Быстрое округление вниз
Math.floor(5.7); // обычный способ
~~5.7; // битовый способ (быстрее)
 
// Проверка четности/нечетности
function isEven(n) {
  return n % 2 === 0; // обычный способ
  // return (n & 1) === 0; // битовый способ
}
 
// Умножение/деление на степени двойки
let num = 16;
num * 4; // обычное умножение
num << 2; // битовый сдвиг (быстрее)
 
num / 4; // обычное деление
num >> 2; // битовый сдвиг (быстрее)
 
// Обмен значений без временной переменной
let a = 5, b = 10;
a ^= b;
b ^= a;
a ^= b;
console.log(a, b); // 10, 5

Частые ошибки и подводные камни

1. Приведение типов в арифметике

// Неожиданное поведение
console.log("10" - "5"); // 5 (числа)
console.log("10" + "5"); // "105" (строка)
console.log("10" * "5"); // 50 (числа)
console.log("10" / "5"); // 2 (числа)
 
// Только + приводит к конкатенации строк!

2. Сравнение с приведением типов

// Опасные сравнения
console.log("" == 0); // true
console.log(false == 0); // true
console.log(null == undefined); // true
console.log(" \t\n" == 0); // true
 
// Всегда используйте строгое сравнение
console.log("" === 0); // false
console.log(false === 0); // false

3. Логические операторы и короткое замыкание

// Может вызвать ошибку
let user = null;
user && user.name.toUpperCase(); // TypeError если user.name undefined
 
// Безопасный вариант
user && user.name && user.name.toUpperCase();
 
// Или с optional chaining (ES2020)
user?.name?.toUpperCase();

4. Приоритет операторов

// Неожиданный результат
let result = 5 + 3 * 2; // 11, не 16
let correct = (5 + 3) * 2; // 16
 
// С логическими операторами
let condition = true || false && false; // true, не false
let intended = (true || false) && false; // false

Современные возможности (ES2020+)

Optional Chaining (?.)

// Безопасный доступ к свойствам
let user = { profile: { name: "Alex" } };
 
// Старый способ
let name = user && user.profile && user.profile.name;
 
// Новый способ
let name2 = user?.profile?.name;
 
// С методами
user?.profile?.getName?.();
 
// С массивами
let firstItem = arr?.[0];

Nullish Coalescing Assignment (??=)

// Присваивание только если null или undefined
let config = { theme: null, lang: "en" };
 
config.theme ??= "dark"; // присвоится
config.lang ??= "ru"; // не присвоится
 
console.log(config); // { theme: "dark", lang: "en" }

Резюме

Бинарные операторы в JavaScript — это основа языка. Важно понимать:

✅ Различия между типами операторов и их назначение
✅ Приведение типов и когда оно происходит
✅ Приоритет операторов для правильного порядка выполнения
✅ Короткое замыкание в логических операторах
✅ Строгое vs нестрогое сравнение (=== vs ==)
✅ Битовые операции для оптимизации и работы с флагами

В современной разработке предпочитайте:

=== вместо ==
?? вместо || для значений по умолчанию
Optional chaining (?.) для безопасного доступа
Явные скобки для сложных выражений

Хочешь больше статей по подготовке к собеседованию? Подпишись на EasyAdvice(@AleksandrEmolov_EasyAdvice), добавляй сайт в избранное и прокачивай себя каждый день 💪

Приведи примеры бинарных операторов в JavaScript и в чем их отличие?

Краткий ответ

Полная классификация бинарных операторов

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

Основные арифметические операторы

Особенности оператора +

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

Строгое и нестрогое сравнение

Операторы порядка

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

Логическое И (&&)

Логическое ИЛИ (||)

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

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

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

Логические операторы присваивания (ES2021)

5. Битовые операторы

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

Приоритет операторов

Практические задачи

Задача 1: Что выведет консоль?

Задача 2: Что произойдет?

Задача 3: Результат сравнения

Задача 4: Логические операторы

Задача 5: Битовые операции

Продвинутые примеры

Использование в реальном коде

Оптимизация с помощью операторов

Частые ошибки и подводные камни

1. Приведение типов в арифметике

2. Сравнение с приведением типов

3. Логические операторы и короткое замыкание

4. Приоритет операторов

Современные возможности (ES2020+)

Optional Chaining (?.)

Nullish Coalescing Assignment (??=)

Резюме

Особенности оператора `+`