Операторы в JavaScript

• Что такое оператор
• Операнды
• Арифметические операторы
• Оператор присваивания
• Составные операторы присваивания
• Инкремент и декремент
• Операторы сравнения
• Логические операторы
• Оператор typeof
• Приоритет операторов
• Частые ошибки

В JavaScript мы постоянно что-то делаем со значениями: складываем числа, присваиваем переменным новые значения, сравниваем данные, проверяем условия.

Для таких действий используются операторы.

let price = 100;
let count = 3;

let total = price * count;

console.log(total);

В этом примере оператор * умножает одно значение на другое, а оператор = записывает результат в переменную total.

Операторы - это одна из базовых тем JavaScript. Без них не получится нормально работать с переменными, условиями, циклами и почти любым кодом.

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

Оператор - это специальный символ или слово, которое выполняет действие над значениями.

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

let result = 10 + 5;

console.log(result);

Результат:

15

Знак * умножает:

let result = 10 * 5;

console.log(result);

Результат:

50

А оператор typeof позволяет узнать тип значения:

console.log(typeof 25);
console.log(typeof 'JavaScript');

Результат:

number
string

Операнды

Значения, с которыми работает оператор, называются операндами.

let result = 7 + 3;

Здесь:

• + - оператор;
• 7 и 3 - операнды;
• result - переменная, в которую мы записали результат.

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

let age = 25;

console.log(typeof age);

В этом примере typeof работает только с одним операндом - переменной age.

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

Арифметические операторы нужны для математических действий.

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

console.log(10 + 5);
console.log(10 - 5);
console.log(10 * 5);
console.log(10 / 5);

Результат:

15
5
50
2

Оператор % возвращает остаток от деления.

console.log(10 % 3);

Результат:

1

Число 10 делится на 3 три раза, а остаток будет 1.

Оператор ** возводит число в степень.

console.log(2 ** 3);

Результат:

8

Это то же самое, что 2 * 2 * 2.

Оператор + со строками

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

console.log(10 + 5);
console.log('10' + 5);

Результат:

15
105

Во втором случае ‘10’ - это строка. Поэтому JavaScript сделал строку ‘105’, а не число 15.

Именно поэтому в уроке про преобразование типов мы отдельно говорили о Number().

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

Оператор = записывает значение в переменную.

let name = 'Иван';
let age = 25;

Важно понимать: в JavaScript знак = не означает “равно” в математическом смысле. Он означает “присвоить значение”.

let count = 1;

count = 2;

console.log(count);

Результат:

2

Сначала в переменной count было значение 1. Потом мы записали в нее новое значение 2.

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

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

let count = 10;

count = count + 5;

console.log(count);

Такой код можно записать короче:

let count = 10;

count += 5;

console.log(count);

Результат будет одинаковый:

15

Часто используются такие операторы:

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

let number = 20;

number -= 5;
console.log(number);

number *= 2;
console.log(number);

Результат:

15
30

Инкремент и декремент

Инкремент увеличивает значение переменной на 1.

let count = 0;

count++;

console.log(count);

Результат:

1

Декремент уменьшает значение переменной на 1.

let count = 5;

count--;

console.log(count);

Результат:

4

На первых уроках лучше писать count++ и count— отдельной строкой. Так код проще читать.

Позже вы увидите такие операторы в циклах. Например, когда нужно пройти числа от 1 до 10.

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

Операторы сравнения проверяют значения и возвращают true или false.

console.log(10 > 5);
console.log(10 < 5);

Результат:

true
false

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

• > - больше;
• < - меньше;
• >= - больше или равно;
• <= - меньше или равно;
• === - строго равно;
• !== - строго не равно.

console.log(18 >= 18);
console.log(10 === 10);
console.log(10 !== 5);

Результат:

true
true
true

Для проверки равенства лучше использовать ===. Такой оператор сравнивает не только значение, но и тип данных.

console.log(10 === '10');

Результат:

false

Здесь значения похожи, но типы разные: 10 - число, а ‘10’ - строка.

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

Логические операторы нужны, когда нужно объединить несколько проверок.

• && - логическое И;
• || - логическое ИЛИ;
• ! - логическое НЕ.

Оператор && возвращает true, если обе проверки дают true.

let age = 20;

console.log(age >= 18 && age < 60);

Результат:

true

Оператор || возвращает true, если хотя бы одна проверка дает true.

let role = 'admin';

console.log(role === 'admin' || role === 'editor');

Результат:

true

Оператор ! меняет значение на противоположное.

let isBlocked = false;

console.log(!isBlocked);

Результат:

true

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

Оператор typeof

Оператор typeof показывает тип значения.

console.log(typeof 'Привет');
console.log(typeof 100);
console.log(typeof true);

Результат:

string
number
boolean

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

let value = prompt('Введите число');

console.log(typeof value);

Даже если пользователь введет число, результат будет:

string

Потому что prompt() всегда возвращает строку.

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

У операторов есть приоритет. Это значит, что одни действия выполняются раньше других.

let result = 2 + 3 * 4;

console.log(result);

Результат:

14

Сначала выполнилось умножение, а потом сложение.

Если нужно изменить порядок действий, используйте скобки.

let result = (2 + 3) * 4;

console.log(result);

Результат:

20

На первых порах лучше не пытаться запоминать весь приоритет операторов. Если есть сомнение, ставьте скобки. Так код будет понятнее.

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

Первая частая ошибка - путать присваивание и сравнение.

let age = 18;

console.log(age === 18);

Здесь мы сравниваем значение. Для сравнения используем ===, а не =.

Вторая ошибка - забывать, что + может склеивать строки.

let a = '10';
let b = 5;

console.log(a + b);

Результат:

105

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

let a = '10';
let b = 5;

console.log(Number(a) + b);

Результат:

15

Третья ошибка - писать слишком сложные выражения в одну строку.

let result = (price + delivery) * count - discount;

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

let productPrice = price + delivery;
let total = productPrice * count;
let result = total - discount;

Чем проще читается код, тем легче найти ошибку.

Что дальше

В этом уроке мы познакомились с основными операторами JavaScript. Вы уже видели арифметические операторы, присваивание, сравнение, логические операторы и typeof.

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