Знакомство с операторами и операциями в JavaScript

Введение


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

При этом, наряду с обычными числами, можно использовать и переменные, поскольку, как вы уже знаете, переменная и её значение тождественны (то есть, взаимозаменяемы)
Поясню о чём речь. Допустим, в одной переменной(price) мы сохраним стоимость единицы товара, в другой(number) количество единиц товара.
Чтобы узнать общую сумму покупки, нужно перемножить эти два значения и результат сохранить в переменной total.

Код
let price = 100,
  number = 3;
let total = price * number;


так как переменные и их значения равноценны, то в коде выше вместо имён переменных подставятся их значения, то есть последняя строка фактически будет такой:

Код
let total = 100 * 3;


ну и понятно, что итоговая сумма покупки будет 300.

Как вы заметили, в JavaScript оператор умножения обозначается звёздочкой(*). Как обозначаются другие операторы?

5 + 1 сложение
3 - 2 вычитание
8/2 деление


Есть еще один интересный оператор, который возвращает целый остаток от деления одного операнда на другой, при этом остаток получает знак делимого операнда.
Обозначается оператор знаком %(процент). Пример использования:

Код
let total = 12%5;
let result = -10%2;
console.log(total);
console.log(result);




Что значит возвращает целый остаток от деления?

Если делимый операнд делится на операнд-делитель без остатка, то возвращаемое значение будет 0 (либо минус 0, если делимое имеет знак минус)
В примере выше 10 делится на 2 без остатка (10/2 = 5), поэтому вернулся 0. А так как у цифры 10 стоял минус изначально, то и в возвращаемом остатке ноль также вернулся с минусом.

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

12%5 как получается остаток от деления 2?

Сначала вычисляется то что делится нацело: 2*5 = 10
Потом 12 - 10 = 2
2 нацело на 5 уже разделить нельзя, поэтому это и будет остаток от деления.

Именно поэтому:

1%3 возвращает 1

ведь 1 нацело нельзя разделить на 3, верно?

2%5 возвращает 2

и 2 нельзя разделить нацело на 5.

Порядок выполнения математических операций в JavaScript



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

4 + 5 * 10 - получаем в итоге 54, а не 90

(4 + 5 )* 10 - получаем 90

4 + (5 * 10) - получаем 54, как и в первом случае


В JavaScript сложение применимо не только к числам, но также и к строкам. Если, к примеру, сложить две строки, то в итоге получим также строку, но уже состоящую из этих двух:

Код
let firstName = "Иван", lastName = "Петров";
console.log(firstName + lastName);


здесь мы сохранили в одной переменной имя человека, в другой - фамилию, оба значения являются строками. В консоль мы выведем результат сложения двух переменных(читай результат сложения двух строк)



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

" Петров"

или так

"Иван "

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

Код
let firstName = "Иван", lastName = "Петров";
console.log(firstName + " " + lastName);


в данном случае, последняя строка равнозначна такой:

Код
console.log("Иван" + " " + "Петров");


А что произойдёт, если, к примеру, сложить не две строки, а строку и число? В этом случае сначала число преобразуется в строку, а затем произойдёт объединение двух строк:

Код
let hits = "Всего попаданий", number = 5;
let total = hits + " " + number;
console.log(total);


здесь мы создали переменную hits, в которой сохранили строку "Всего попаданий", переменную number с количеством попаданий, а также переменную total, в которой первые две переменные складываются с пустой строкой.
То есть, вторую строку кода выше можно представить как суммирование трёх строк, поскольку число 5 автоматически преобразуется в строку:

Код
let total = "Всего попаданий" + " " + "5";


Значение переменной total с помощью команды console.log() вывели в консоль.
В результате, в консоли мы видим:



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

Приведу пример: пользователь сайта в модальном окне на вопрос "Сколько пар обуви вы хотите приобрести?" ввел число 2.

Сохраним возвращаемое значение, полученное от пользователя, в переменную shoes

Код
let shoes = prompt("Сколько пар обуви вы хотите приобрести?", " ");


пусть в переменной bonus сохранено число пар носков, которые даются в подарок к покупке:

Код
let bonus = 3;


и в переменной total мы хотим сохранить результат(сколько всего предметов получит пользователь при покупке)

Код
let total = shoes + bonus;


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

Код
console.log(total);


мы ожидаем увидеть результат 2 + 3 = 5, верно? ведь пользователь ввёл в ответе число, и количество подарочных пар носков тоже число, почему же в консоли мы видим следующее?



А всё потому, что как вы помните, возвращаемое значение имеет тип данных string(строка)! Поэтому фактически наш код принимает вид:

Код
let total = "2" + 3;


и мы имеем сложение не двух чисел, а строки и числа! и конечно же, JavaScript тут же подрубает своё автоматическое преобразование типов данных и делает следующее:

Код
let total = "2" + "3";


число 3 он также преобразовал в строку и в результате конкатенации двух строк мы и получили в консоли результирующую строку "23".

Как с этим бороться?
Поставьте плюс(+) перед строкой, содержащей число(перед переменной shoes в данном случае):

Код
let number = prompt('Сколько пар обуви вы хотите приобрести?'), bonus = 3;
let total = +shoes + bonus;
console.log(total);


благодаря знаку плюс(+) перед строкой, JavaScript будет пытаться преобразовать эту строку в число, и если внутри этой строки содержится только число, как в нашем примере, "2" (ответ от пользователя сайта на вопрос о количестве пар обуви), то строка вновь преобразуется в число, то есть код фактически станет таким:

Код
let shoes = prompt('Сколько пар обуви вы хотите приобрести?'), bonus = 3;
let total = 2 + 3;
console.log(total);


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

Второй вариант - это использование вместо знака плюс(+) команды Number(), которая также будет пытаться преобразовывать строку в число, если это возможно:

Код
let number = prompt('Сколько пар обуви вы хотите приобрести?'), bonus = 3;
let total = Number(shoes) + bonus;
console.log(total);


Опять же, в консоли мы увидим результат 5.

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

пусть в переменной number сохранено количество пар обуви в виде строки:

Код
let number = "2";


а в переменной price цена за одну пару обуви:

Код
let price = 1200;


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

Код
let total = number * price;


а теперь попробуем вывести значение переменной total в консоль

Код
console.log(total);




как мы видим, полученный в консоли результат корректен, ведь 2 * 1200 = 2400. Это говорит о том, что при умножении строки, содержащей число, на другое число, JavaScript автоматически преобразует строку в число, а затем просто перемножает два числа между собой, как обычно.

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



Это операции увеличения(инкремент) и уменьшения(декремент) значения на единицу. При этом существует две формы:

префиксная - возвращает уже изменённое значение

постфиксная - возвращает старое значение

для наглядности создадим две переменных, назовём их incr и decr и присвоим им одинаковые значения, равные 5:

Код
let incr = 5,  
decr = 5;


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

Код
console.log(++incr);
console.log(--decr);




как видите, за счёт префиксной формы в консоли вывелись изменённые значения переменных, переменная incr получила новое значение 6 (5 + 1 = 6), а переменная decr новое значение 4 (5 - 1 = 4).

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

Код
let incr = 5,  
decr = 5;
console.log(incr++);
console.log(decr--);




как видим, в консоли вывелись первоначальные(старые) значения переменных без учёта инкремента и декремента, хотя на самом деле значения переменных поменялись: значение переменной incr стало 6(5 + 1 =6), а переменной decr стало 4(5 - 1 =4), но поменялись они после того, как были возвращены старые значения переменных. В этом отличие от префиксной формы, где сразу возвращаются изменённые значения.

Управляющие операции для сравнения значений



Сразу хочу напомнить что знак равенства "=" в JavaScript обозначает "присваивание", но не равно.

Равенство двух значений (можно использовать как для чисел, так и для строк) равно == проверяется так:

Код
a == b;


при этом идёт сравнение двух величин на предмет их идентичности, например:

Код
"2" == 2


давайте выведем в консоль и посмотрим результат

Код
console.log("2" == 2);




как видим, в консоли вернулось true, несмотря на то, что использовалось два разных типа данных, строка и число, но так как они "похожи", и слева и справа есть 2, то вернулось true.
Проверка на тип данных в этом случае не используется.

Но, если мы используем для сравнения знак строго равно ===

Код
"2" === 2


то в консоли увидим false:



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

Аналогично, есть операции сравнения на неравенство двух величин.

! = не равно
! == строго не равно


для примера:

Код
"2" ! = 2;


вернёт false, потому что они равны (похожие цифры слева и справа)

Код
"2" ! == 2;


вернёт true, потому что это истинно (из-за сравнения по типу величин слева и справа они не равны)

Существуют также операции сравнения:

больше > проверка того, больше ли величина слева чем величина справа

Код
a > b


к примеру,

Код
3 > 1


вернёт true

меньше < проверка того, меньше ли величина слева чем величина справа

Код
a < b


к примеру,

Код
3 < 1


вернёт false

больше или равно >= проверка того, является ли величина слева большей или равной величине справа

Код
a >= b


например:

Код
3 >= 2


вернёт true, так как 3 больше 2.

меньше или равно <= проверка того, является ли величина слева меньшей или равной величине справа

Код
a <= b


например:

Код
3 <= 2


вернёт false, так как 3 больше 2.

Комментарии к материалу: