Базовые операторы в JavaScript

Операторы — это то, с чего начинается настоящая работа с данными в JavaScript. С их помощью мы складываем числа, сравниваем значения, принимаем решения и управляем тем, как выполняется код. В этом материале разберём базовые JS-операторы: что такое унарный и бинарный оператор, как работает оператор остатка от деления, возведение в степень и другие действия. Покажем, как использовать их на практике, — понятно и с примерами.

Содержание

• Что такое оператор в JavaScript
• Работа с данными: как изменять и вычислять значения
• Сравнение и выбор: операторы для принятия решений в коде
• Логические операции: связываем условия между собой
• Оператор запятая: выполняем сразу несколько выражений
• Приоритеты операторов в JavaScript
• Ошибки при работе с операторами в JavaScript
• Частые вопросы на собеседованиях

Что такое оператор в JavaScript

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

Проще всего представить переменные как коробки, в которых хранятся данные, а операторы — как инструменты для работы с этими коробками. Например, можно открыть коробку, переложить содержимое, сравнить его с другим или проверить, подходит ли оно для нужной задачи.

let x = 5 + 3;

Здесь два оператора:

• = — оператор присваивания: кладёт результат в переменную x;
• + — арифметический оператор: складывает 5 и 3.

В итоге x получит значение 8.

Что такое операнды

Операторы работают с операндами — это значения, над которыми совершается действие. Операндом может быть:

• число — 1, 2, 42;
• строка — "hello";
• логическое значение — true или false;
• переменная — x, userName, isActive;
• выражение — например, 2 + 2 или Math.random().

Если у оператора два операнда (например, 5 + 3), это бинарный оператор. Если один — унарный (+a, !isAdmin).

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

Что такое JavaScript и зачем он нужен

Работа с данными в JavaScript: как изменять и вычислять значения

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

Разберём основные из них: арифметические, унарные, операторы присваивания, инкремент и декремент.

Арифметические операторы: складываем, вычитаем и возводим в степень

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

Математические операторы:

• + — сложение;
• - — вычитание;
• * — умножение;
• / — деление;
• % — остаток от деления;
• ** — возведение в степень.

let a = 5;
let b = 7;

console.log(a + b); // 12 — сложение
console.log(a - b); // -2 — вычитание
console.log(a * b); // 35 — умножение
console.log(a / b); // 0.714... — деление
console.log(a % b); // 5 — остаток от деления
console.log(a ** b); // 78125 — возведение в степень

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

Как запустить JavaScript-код: в браузере, консоли и редакторе кода

Оператор присваивания: сохраняем значения в переменную

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

let a = 10;
console.log(a);

В переменную a положили число 10, и теперь мы можем использовать его в любом месте кода. Если нужно обновить значение, снова используем =:

a = 50;a = 50;
console.log(a);

В итоге переменная a теперь хранит значение 50.

Это и есть основная задача оператора присваивания — сохранить или заменить значение переменной.

Составные операторы присваивания: сокращаем запись

Составные операторы — гибрид арифметических операторов и оператора присваивания. Они просто сокращают запись. Вместо x = x + 5 мы пишем x += 5, получается немного короче.

Вообще, составных операторов много, вот самые основные:

Инкремент и декремент: добавляем или вычитаем единицу

Инкремент и декремент — это унарные операторы, которые изменяют значение переменной на единицу.

• ++ — инкремент: увеличивает значение на 1.
• -- — декремент: уменьшает значение на 1.

Такие операторы часто используются в циклах, счётчиках шагов, в таймерах и при других пошаговых изменениях.

Инкремент и декремент имеют две формы: префиксную и постфиксную. Разберём по порядку, как они работают.

Префиксная форма: сначала изменяем, потом используем

Если оператор записан перед переменной, это префиксная форма. Она сначала изменяет значение, а потом возвращает его.

// Объявляем переменные a и b:
let a = 0;
let b = 2;

// 1. Сначала увеличиваем значение a на 1
// 2. Потом кладём новое значение в переменную b
b = ++a;

// Смотрим, что получилось
console.log(a); // Вывод в консоль: 1
console.log(b); // Вывод в консоль: 1

То же самое работает и для декремента — только значение уменьшается.

Постфиксная форма: сначала используем, а потом меняем

Если оператор записан после переменной, это постфиксная форма. Она сначала возвращает текущее значение, а потом изменяет его.

// Объявляем переменные a и b:
let a = 2;
let b = 0;

// 1. Сначала кладём значение переменной a в переменную b
// 2. Потом уменьшаем значениеьa на 1
b = a--;

// Смотрим, что получилось
console.log(a); // Вывод в консоль: 1
console.log(b); // Вывод в консоль: 2

Унарные операторы + и -: преобразуем значение в число и меняем знак

Унарные операторы в JavaScript — это операторы, которые работают только с одним значением и пишутся перед операндом. Есть два базовых унарных оператора:

• + (унарный плюс) — преобразует значение в число. Применяется для упрощения кода и быстрого преобразования типов данных, например строки в число.
• - (унарный минус) — меняет знак числа (положительное число на отрицательное и, наоборот, — отрицательное на положительное). Применяется при математических расчётах.

Смотрим, как работает унарный плюс:

// Строка "5" становится числом 5
console.log(+"5"); // 5

// Булево значение true становится 1
console.log(+true); // 1

// Значение null становится 0
console.log(+null); // 0

// Infinity — уже число
console.log(+Infinity); // Infinity

// Строка, не являющаяся числом, становится NaN
console.log(+"Hello"); // NaN

Обратите внимание: NaN — это специальное значение, которое означает «не число». Оно появляется, когда преобразование выполнить невозможно.

Всё то же самое, но с унарным минусом:

// Строка "5" сначала становится 5, затем меняется знак
console.log(-"5"); // -5

// true → 1 → -1
console.log(-true); // -1

// null → 0 → -0
console.log(-null); // -0

// Infinity → -Infinity
console.log(-Infinity); // -Infinity

// Строка, не являющаяся числом → NaN
console.log(-"Hello"); // NaN

На практике -0 ведёт себя почти так же, как 0, но технически это разные значения: это важно в редких случаях — например, при работе с математикой низкого уровня или при сравнении с бесконечностью (Infinity).

Сравнение и выбор в JavaScript: операторы для принятия решений в коде

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

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

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

Вот список операторов сравнения:

• == — сравнивает значения, приводит типы автоматически;
• === — сравнивает значения и типы без преобразования;
• != — сравнивает два значения и возвращает true, если они разные (с приведением типов);
• !== — сравнивает значения и их типы и возвращает true, если они разные (строго);
• > — больше чем;
• >= — больше чем или равно;
• < — меньше чем;
• <= — меньше чем или равно.

В JavaScript можно сравнивать значения разных типов:

• Числа — обычные, целые, десятичные, положительные и отрицательные.
• Строки — JavaScript сравнивает их по буквам, как в словаре.

• Логические значения (true и false) — они преобразуются в числа: true = 1, false = 0.

• Значения из форм — обычно приходят как строки, даже если выглядят как числа.
• null и undefined — ведут себя особо (о них чуть позже).

console.log(10 > 5);            // true — сравниваются числа
console.log("apple" < "banana"); // true — сравниваются строки по алфавиту
console.log(true > false);      // true — true → 1, false → 0
console.log(null >= 0);         // true — null → 0
console.log(undefined < 10);    // false — undefined → NaN, сравнение с NaN = false
console.log("7" > 3);           // true — строка "7" → число 7

Можно даже сравнивать значения разных типов друг с другом — JavaScript не запрещает этого. Если типы данных разные, JavaScript пытается привести их к одному типу, обычно к числу. Это происходит автоматически, но результат может быть неожиданным.

Вот как это работает:

• строка "5" становится числом 5;
• true превращается в 1, false — в 0;
• null — почти всегда превращается в 0;
• undefined — становится NaN, а любое сравнение с NaN всегда даёт false;
• строки между собой сравниваются по символам — лексикографически.

console.log(10 > 5);           // true — числа
console.log("7" < 10);         // true — строка "7" превращается в число
console.log(true >= 1);        // true — true → 1
console.log(false <= 0);       // true — false → 0
console.log(null < 1);         // true — null → 0
console.log(undefined > 0);    // false — undefined → NaN
console.log("apple" < "banana"); // true — строки сравниваются по буквам

Приводите данные к одному типу вручную, если не хотите, чтобы программа сама решила, как их сравнивать.

Разница между == и ===

В JavaScript есть два похожих оператора сравнения:

• == — сравнение по значению, с автоматическим приведением типов.
• === — сравнение и по значению, и по типу (его называют строгим сравнением).

Когда вы используете ==, JavaScript пытается привести разные типы к одному. Это может дать неожиданный результат — например, строка "0" и число 0 вдруг окажутся равны.

Оператор == сравнивает число и строку:

console.log(0 == "0"); // true

Оператор привёл значения к одному типу и сравнил. Получилось, что 0 равен 0. С точки зрения JavaScript всё в порядке.

Тот же пример с ===:

console.log(0 === "0"); // false

А здесь число не равно строке.

Если не хотите непредсказуемой самодеятельности JavaScript, используйте строгое сравнение ===, оно надёжнее.

Оператор typeof: узнаём, с каким типом данных мы работаем

Иногда нужно понять, что за данные перед нами — число, строка, объект или что-то ещё. Для этого в JavaScript есть специальный оператор typeof.

Он проверяет значение и возвращает, что это за тип: number, string, boolean, object, function и так далее.

console.log(typeof 42);           // 'number' — число
console.log(typeof "42");         // 'string' — строка
console.log(typeof true);         // 'boolean' — логическое значение
console.log(typeof undefined);    // 'undefined' — значение не задано
console.log(typeof null);         // 'object' — такой результат — особенность JavaScript
console.log(typeof {});           // 'object' — обычный объект
console.log(typeof []);           // 'object' — массив тоже объект
console.log(typeof function(){}); // 'function' — функция

С помощью typeof удобно отлавливать ошибки в данных или писать универсальный код, который подстраивается под тип значений.

Тернарный оператор: принимаем решение в зависимости от условия

Тернарный оператор ? : запускает один или другой блок кода в зависимости от условия.

Условие — это вопрос, на который JavaScript может ответить true или false.

• 5 > 2 — да, это правда;
• 10 === 7 — нет, это ложь.

Общий вид:

условие ? значение_если_да : значение_если_нет;

Если условие истинно, срабатывает первая часть. Если оно ложно, срабатывает вторая.

let num = 100; // Создаём переменную num и кладём в неё число 100

// Проверяем: num больше или равна 0?
// Если true, результат будет "A"
// Если false, результат будет "B"
let result = num >= 0 ? "A" : "B";

// Выводим результат в консоль
console.log(result); // A

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

Условные операторы, if, else и switch в JavaScript

Логические операции в JavaScript: связываем условия между собой

Логические операторы помогают принимать решения в коде. Они проверяют условия и возвращают результат — true или false. Всего таких операторов три: && (И), || (ИЛИ) и ! (НЕ).

Оператор &&: логическое И

Логический оператор && (И) действует как умножение, где ложь — это 0, а истина — это 1. Он возвращает true, только если оба условия — истина.

Сначала проверяется левая часть выражения; если она ложна, вторая часть не проверяется, и общий результат будет ложь, поскольку в любом случае так и получается. Если первое выражение истинно, то JavaScript проверит и результат второго.

console.log(false && true);            // false
console.log(1 > 0 && 5 < 3);           // false — первое условие true, второе false
console.log(false && console.log("Я не выполнюсь")); // false — второе даже не запустится
console.log(true && console.log("Я выполнюсь!"));    // true — выполнится вторая часть

Оператор ||: логическое ИЛИ

Логический оператор || работает как сложение, только логическое. Оператор возвращает true, если хотя бы одно из условий — истина. Если первое условие — уже true, второе даже не проверяется.

Как и в случае с логическим умножением, сначала проверяется левая часть выражения, но конструкция действует наоборот: если первая часть истинна, вторая часть не проверяется, и общий результат будет истинен. А если первое выражение ложно, то JavaScript проверит результат второго.

console.log(false || true);            // true
console.log(0 == 5 || true);           // true — первое условие false, но второе true
console.log(true || console.log("Я не выполнюсь!"));  // true — вторая часть не выполнится
console.log(false || console.log("Я выполнюсь!"));    // Я выполнюсь! — сработает вторая часть

Оператор !: логическое НЕ

Оператор ! меняет значение на противоположное: true становится false, false — true.

Пример:

// НЕ ложь = истина
console.log(!false); // Вывод в консоль: true
// НЕ истина = ложь
console.log(!true); // Вывод в консоль: false

Этот оператор используют, чтобы проверить обратное условие. Например, если у нас есть переменная isAdmin и она содержит true, то !isAdmin вернёт false. Это можно использовать в ситуациях, когда код нужно выполнить только в случае, если пользователь не админ:

if (!isAdmin) {
  console.log("Доступ запрещён");
}

Такая конструкция читается как «если пользователь не админ, показать сообщение».

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

Оператор запятая (,) позволяет выполнить несколько выражений сразу в одной строке. Это редкий оператор, но иногда он бывает полезен.

Это удобно, когда нужно компактно записать несколько действий — особенно в циклах или при инициализации переменных.

let x = (1, 2, 3);
console.log(x); // 3

В скобках выполняются все три выражения: 1, 2, 3. Но в переменную x попадёт только последнее — 3.

То же самое можно сделать с двумя переменными:

let a, b;

a = (b = 10, b + 5);
console.log(a, b); // 15 10

Что происходит:

• b = 10 — в переменную b записали число 10.
• b + 5 — посчитали сумму: 10 + 5 = 15.
• Всё выражение справа от = вернуло 15, и это значение записали в a.

Чаще всего оператор запятая встречается в циклах, где нужно управлять сразу несколькими переменными:

// В цикле for два счётчика — i и j через запятую
for (let i = 0, j = 10; i < 5; i++, j--) {
  console.log(i, j); 
}

Вывод:

0 10
1 9
2 8
3 7
4 6

При такой записи удобно одновременно увеличивать один счётчик (i++) и уменьшать другой (j--). Всё это происходит в одной строке — благодаря оператору запятая.

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

Приоритеты операторов в JavaScript влияют на порядок выполнения операций в выражениях. По аналогии со школьной математикой сначала выполняется действие в скобках, потом умножение, потом сложение и так далее. Но в JavaScript таких правил последовательности намного больше.

В таблице приведена важность операторов от самого высокого (1) до самого низкого приоритета (17).

Пример c арифметическими операторами и сравнение:

// Объявляем три переменные a, b, c
let a = 5;
let b = 10;
let c = 20;

// Расчёт выражения
// Сначала выполнится деление: c / 2 = 20 / 2 = 10 
// Далее выполнится сложение: a + b = 5 + 10 = 15
// И в конце сравнение получившихся результатов: 15 > 10 = Истина (true)
let result = a + b > c / 2;

console.log(result); // Вывод в консоль: true

Операторы выполняются в математическом порядке. Сначала деление, потом сложение и в конце сравнение.

Пример c логическими операторами:

// Объявляем три переменные x, y, z
let x = true;
let y = false;
let z = true;
// Расчёт выражения
// Сначала выполнится логическое умножение y && z = false && true = false (ложь)
// Далее: x || false = true || false = true (Истина)
let result = x || y && z;

console.log(result); // Вывод в консоль: true

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

Ошибки при работе с операторами в JavaScript

Приведение типов

Мы уже писали, что в JavaScript при вычислениях значения могут автоматически менять свой тип. Неявное приведение типов часто приводит к неожиданным результатам.

// Строка превращается в число, 
console.log("5" - 1); // Вывод в консоль (Тип данных Числа): 4

// Число превращается в строку
console.log("5" + 1); // Вывод в консоль (Тип данных Строка): 51

Чтобы избежать таких ситуаций, лучше заранее проверять типы данных. Это можно сделать с помощью оператора typeof:

console.log(typeof "5"); // string
console.log(typeof 5);   // number

Если вы точно знаете, какой тип вам нужен, используйте явное преобразование:

// Преобразуем строку "5" в число
console.log(Number("5") - 1); // 4

// Преобразуем число 5 в строку
console.log(String(5) + "1"); // 51

Присваивание вместо сравнения: = и ===

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

В следующем примере значение в скобочках будет не сравниваться, а присваиваться:

// Объявляем переменную a
let a = 0;

// Ошибка. Здесь не сравнение, а присваивание
if (a = 10) { 
  console.log("Выполняется всегда"); // Вывод в консоль: Выполняется всегда
}
console.log(a); // Вывод в консоль: 10

Просто запомните, что количество знаков равно в операторе имеет значение.

Частые вопросы на собеседованиях

Все ответы на эти вопросы вы можете найти в статье.

1. В чём разница между операторами == и === и какой из них лучше использовать?

2. Что выведет код с оператором запятая (,) и для чего он нужен?

let x = (45, 78, 33, 11);
console.log(x);

3. Объясните разницу между префиксной и постфиксной формой инкремента и декремента.

console.log(3 % 10);
console.log(-10 % 3);

4. Какие операторы используются в этом коде и что они выведут?

let x = 85;
let y = x > 75 ? "B" : "F";
console.log(y);