Операторы и выражения в JavaScript – полное руководство с примерами

Для кого эта статья:

• Начинающие разработчики, желающие освоить основы JavaScript
• Опытные разработчики, стремящиеся улучшить качество своего кода
• Студенты и обучающиеся, изучающие программирование и JavaScript

Операторы и выражения в JavaScript — это фундаментальные строительные блоки, без понимания которых невозможно писать эффективный код. Представьте, что вы пытаетесь собрать сложную конструкцию без знания базовых соединений — именно так выглядит разработка без глубокого понимания операторов. Независимо от того, новичок вы или опытный разработчик, освоение этих элементов критически важно для создания чистого, оптимизированного кода. Эта статья раскроет все нюансы от простого сложения до сложных логических конструкций, которые сделают ваш код не просто работающим, а по-настоящему профессиональным. 💻✨

Что такое операторы и выражения в JavaScript

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

Давайте разберёмся на простых примерах:

// Простое выражение с оператором сложения
5 + 3 // Результат: 8

// Выражение с переменными
let x = 10;
let y = 5;
x + y // Результат: 15

// Выражение с несколькими операторами
2 * (x – y) // Результат: 10

Выражения можно классифицировать по нескольким типам:

• Арифметические выражения — используют арифметические операторы для математических вычислений
• Строковые выражения — работают со строками, включая конкатенацию
• Логические выражения — дают результат в виде true или false
• Первичные выражения — базовые выражения, такие как литералы и переменные
• Левосторонние выражения — могут находиться слева от оператора присваивания

Понимание этих базовых концепций создаёт фундамент для дальнейшего изучения JavaScript. Важно отметить, что каждое выражение в JavaScript имеет значение — даже если это undefined.

Иван Петров, Lead Frontend Developer Когда я начинал изучать JavaScript, путался в приоритете операторов и тратил часы на отладку кода из-за неправильно составленных выражений. Помню один проект, где я писал калькулятор для финансового приложения. Клиент жаловался на неправильные расчёты процентов по вкладам. Оказалось, я неверно расставил скобки в формуле сложных процентов, из-за чего приоритет операций нарушался. Этот опыт научил меня всегда явно указывать порядок вычислений скобками, даже если я уверен в приоритете операторов. Это сделало мой код более читаемым и предсказуемым не только для меня, но и для коллег.

Арифметические и операторы присваивания в JS

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

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

• • (сложение)
  — складывает числа, конкатенирует строки
• • (вычитание)
  — вычитает второй операнд из первого
• * (умножение) — умножает операнды
• / (деление) — делит первый операнд на второй
• % (остаток от деления) — возвращает остаток от деления
• ** (возведение в степень) — возводит первый операнд в степень второго
• ++ (инкремент) — увеличивает операнд на 1
• -- (декремент) — уменьшает операнд на 1

Примеры:

// Сложение
let sum = 5 + 3; // 8

// Вычитание
let difference = 10 – 4; // 6

// Умножение
let product = 7 * 2; // 14

// Деление
let quotient = 20 / 5; // 4

// Остаток от деления
let remainder = 10 % 3; // 1

// Возведение в степень
let power = 2 ** 3; // 8

// Инкремент и декремент
let count = 5;
count++; // Теперь count = 6
count--; // Теперь count = 5 снова

Особое внимание стоит уделить префиксным и постфиксным формам инкремента и декремента:

let a = 5;
let b = a++; // b = 5, a = 6 (сначала присваивание, потом увеличение)

let c = 5;
let d = ++c; // d = 6, c = 6 (сначала увеличение, потом присваивание)

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

• = (присваивание) — присваивает значение
• += (присваивание со сложением) — добавляет и присваивает
• -= (присваивание с вычитанием) — вычитает и присваивает
• *= (присваивание с умножением) — умножает и присваивает
• /= (присваивание с делением) — делит и присваивает
• %= (присваивание с остатком) — находит остаток и присваивает
• **= (присваивание со степенью) — возводит в степень и присваивает

// Базовое присваивание
let x = 10;

// Составные операторы присваивания
x += 5; // то же самое, что x = x + 5; Результат: 15
x -= 3; // то же самое, что x = x – 3; Результат: 12
x *= 2; // то же самое, что x = x * 2; Результат: 24
x /= 4; // то же самое, что x = x / 4; Результат: 6
x %= 4; // то же самое, что x = x % 4; Результат: 2
x **= 3; // то же самое, что x = x ** 3; Результат: 8

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

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

Операторы сравнения используются для проверки равенства или различия между значениями. Они возвращают булево значение (true или false), что делает их незаменимыми в условных конструкциях. 🔍

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

• == (равно) — проверяет равенство значений с приведением типов
• === (строго равно) — проверяет равенство значений и типов
• != (не равно) — проверяет неравенство значений с приведением типов
• !== (строго не равно) — проверяет неравенство значений или типов
• < (меньше) — проверяет, меньше ли первый операнд второго
• > (больше) — проверяет, больше ли первый операнд второго
• <= (меньше или равно) — проверяет, меньше или равен ли первый операнд второму
• >= (больше или равно) — проверяет, больше или равен ли первый операнд второму

// Сравнение с приведением типов
5 == "5" // true, так как строка "5" преобразуется в число 5

// Строгое сравнение
5 === "5" // false, так как типы разные

// Сравнение с отрицанием
5 != "6" // true
5 !== "5" // true, так как типы разные

// Сравнение величин
10 > 5 // true
10 < 5 // false
10 >= 10 // true
5 <= 10 // true

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

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

• && (логическое И) — возвращает true, если оба операнда истинны
• || (логическое ИЛИ) — возвращает true, если хотя бы один операнд истинный
• ! (логическое НЕ) — инвертирует истинность операнда

// Логическое И
true && true // true
true && false // false
false && false // false

// Логическое ИЛИ
true || true // true
true || false // true
false || false // false

// Логическое НЕ
!true // false
!false // true

// Комбинированное использование
(5 > 3) && (10 <= 10) // true
(5 < 3) || (10 === 10) // true
!(5 < 3) // true

Важной особенностью логических операторов в JavaScript является так называемое "короткое замыкание" (short-circuit evaluation). Для оператора && это означает, что если первый операнд ложен, второй не вычисляется. Для || — если первый операнд истинен, второй не вычисляется.

// Короткое замыкание для &&
false && someFunction() // someFunction() не будет вызвана

// Короткое замыкание для ||
true || someFunction() // someFunction() не будет вызвана

Это свойство часто используется для создания условных конструкций без явного использования if-else:

// Присвоение значения по умолчанию
let name = userInput || "Гость";

// Проверка перед вызовом метода
user && user.login();

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

Оператор нулевого слияния (??) — относительно новое дополнение в JavaScript, впервые представленное в спецификации ECMAScript 2020. Он возвращает правый операнд, только если левый операнд равен null или undefined. В противном случае возвращается левый операнд. 🛡️

// Базовый синтаксис
let result = leftOperand ?? rightOperand;

Этот оператор особенно полезен для предоставления значений по умолчанию при работе с переменными, которые могут быть null или undefined:

// Использование оператора ??
const username = null;
const displayName = username ?? "Гость"; // "Гость"

const count = 0;
const displayCount = count ?? 42; // 0, так как 0 это не null/undefined

Ключевое отличие js оператора ?? от оператора || заключается в том, как они обрабатывают "ложные" значения. Оператор || возвращает правый операнд, если левый преобразуется в false (0, "", false, null, undefined, NaN), тогда как ?? проверяет только на null и undefined:

// Сравнение ?? и ||
const zero = 0;

// С оператором ||
const result1 = zero || 42; // 42, так как 0 считается ложным

// С оператором ??
const result2 = zero ?? 42; // 0, так как 0 не является null/undefined

Оператор нулевого слияния особенно полезен в следующих сценариях:

• Установка значений по умолчанию для отсутствующих данных:

function greet(name) {
return `Привет, ${name ?? "незнакомец"}!`;
}

greet("Анна"); // "Привет, Анна!"
greet(); // "Привет, незнакомец!"

• Работа с объектами и вложенными свойствами:

const user = {
name: "Алексей",
settings: {
theme: null
}
};

const theme = user.settings.theme ?? "светлая"; // "светлая"

• Доступ к потенциально несуществующим свойствам (с опциональной цепочкой):

const user = {
name: "Мария"
// settings отсутствует
};

const theme = user.settings?.theme ?? "светлая"; // "светлая"

При работе с оператором ?? важно помнить о некоторых ограничениях:

• Нельзя использовать ?? вместе с операторами && или || без явных скобок:

// Это вызовет SyntaxError:
const result = a && b ?? c; 

// Правильный вариант:
const result = (a && b) ?? c;

• Приоритет оператора ?? примерно такой же, как у ||, но ниже, чем у большинства операторов.

Александр Николаев, JavaScript Architect Работая над крупным CRM-приложением, я столкнулся с проблемой обработки данных, приходящих от API. Пользователи жаловались, что вместо отсутствующих значений часто отображается "null" или "undefined". Раньше мы решали это с помощью оператора ||, но натыкались на неприятный эффект: нули и пустые строки (которые были валидными данными) заменялись значениями по умолчанию. После внедрения оператора нулевого слияния (??) качество отображения данных значительно улучшилось. Показателен случай с отображением статистики: значение "0" в счётчиках просмотров стало корректно отображаться, а не заменяться на "Нет данных". Клиент был доволен, а количество тикетов с багами уменьшилось на 40%.

Приоритет операторов и сложные выражения в JS

Приоритет операторов определяет порядок выполнения операций в сложных выражениях. Понимание этого механизма критически важно для правильного составления выражений и предотвращения непредвиденного поведения кода. 🔄

Операторы с более высоким приоритетом выполняются раньше операторов с более низким приоритетом. Вот основные уровни приоритета (от высшего к низшему):

1. Скобки — (expression)
2. Обращения к свойствам и элементам — obj.prop, arr[index], func()
3. Отрицание, инкремент, декремент — !, ++, --
4. Умножение, деление, остаток — *, /, %
5. Сложение, вычитание — +, -
6. Сравнение — <, >, <=, >=
7. Равенство — , =, !=, !==
8. Логическое И — &&
9. Логическое ИЛИ — ||
10. Нулевое слияние — ??
11. Условный (тернарный) оператор — ? :
12. Присваивание — =, +=, -=, *=, etc.

Рассмотрим несколько примеров сложных выражений:

// Пример 1: Смешанные арифметические операции
let result = 2 + 3 * 4; // 14, а не 20, потому что * имеет более высокий приоритет

// Пример 2: Использование скобок меняет порядок выполнения
let result2 = (2 + 3) * 4; // 20, потому что скобки выполняются первыми

// Пример 3: Сложное выражение с разными операторами
let x = 5;
let y = 10;
let z = 2;
let result3 = x + y * z / (x – z); // 5 + 10 * 2 / 3 = 5 + 20 / 3 = 5 + 6.67 = 11.67

При работе со сложными логическими выражениями также важно понимать приоритет операторов:

// Логические выражения и приоритет
let a = true;
let b = false;
let c = true;

// && имеет более высокий приоритет, чем ||
let result4 = a || b && c; // Интерпретируется как a || (b && c), результат: true

// С использованием скобок для явного указания порядка
let result5 = (a || b) && c; // true && true = true

Важно понимать, что явное использование скобок делает код более читаемым и предотвращает ошибки, связанные с неправильным пониманием приоритета операторов. Это особенно важно в сложных выражениях.

При построении сложных выражений рекомендуется:

• Использовать скобки для явного указания порядка операций
• Разбивать сложные выражения на несколько простых для улучшения читаемости
• Комментировать особенно сложные участки кода
• Учитывать короткое замыкание логических операторов

Сложные выражения могут включать различные типы операторов:

// Комбинирование сравнений и логических операторов
let age = 25;
let hasPermission = true;
let isAdmin = false;

let canAccess = (age >= 18 && hasPermission) || isAdmin;
// Сначала вычисляется (age >= 18) = true
// Затем (true && hasPermission) = true
// Наконец, (true || isAdmin) = true

Другой пример сложного выражения с использованием условного оператора:

// Условный оператор в сложном выражении
let score = 85;
let result6 = score > 90 ? "Отлично" : score > 70 ? "Хорошо" : "Удовлетворительно";
// Результат: "Хорошо"

Понимание взаимодействия операторов разных типов особенно важно в JavaScript из-за его динамической типизации:

// Смешивание типов и операторов
let num = 5;
let str = "10";
let bool = true;

let result7 = num + str; // "510" (конкатенация строк)
let result8 = num + bool; // 6 (true преобразуется в 1)
let result9 = num + +str; // 15 (унарный + преобразует str в число)

Порядок выполнения операций может существенно влиять на производительность, особенно при работе с короткозамкнутыми операторами:

// Оптимизация с помощью короткозамкнутых операций
function isEligible(user) {
// Сначала проверяем наличие user (дешёвая операция)
// Более дорогостоящие проверки выполняются только при необходимости
return user && user.age >= 18 && user.hasVerifiedEmail;
}

Операторы и выражения в JavaScript — это не просто синтаксические конструкции, а мощные инструменты, требующие глубокого понимания. От правильного использования операторов присваивания до сложных логических конструкций с учётом приоритета — все эти знания формируют ваш стиль кодирования. Начните с осознанного применения строгого равенства (===), продолжите грамотным использованием оператора нулевого слияния (??) для защиты от null и undefined, и завершите мастерством построения выражений с правильной расстановкой скобок. Лаконичность и ясность кода — результат не количества строк, а качества мышления разработчика.

Читайте также

• Веб-сокеты в JavaScript: полное руководство с примерами кода
• Основы AJAX в JavaScript: пошаговое руководство для начинающих
• Операторы и выражения в JavaScript – полное руководство с примерами
• Динамическое создание элементов в DOM: методы и приемы JavaScript