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

JavaScript поддерживает все базовые арифметические операции. Сегодня я расскажу тебе об операторах +, -, *, и /.

Сложение

Оператор + используется в JavaScript, чтобы сложить два значения. Ему нужно два операнда (числа в нашем случае), чтобы правильно работать:

const sum = 2 + 2;                          // 4

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

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

const numberPlusString = 2 + '2';            // 22
const booleanPlusString = true + 'Story';    // trueStory
const stringPlusString = 'just' + 'Strings'; // justStrings

Также, можно поместить функцию, объект или массив с любой стороны оператора +. В этом случае они сначала будут конвертированы в строки.

const f = () => {return 0};
const obj = {type: 'regular'};
const arr = [1, 2, 3];

console.log('Hello!' + f);                   // Hello!() => {return 0}
console.log(true + obj);                     // true[object Object]
console.log(1 + arr);                        // 11,2,3

Заметь, что большинство объектов станут строками вида [object Object]. Это стандартная реализация toString в JavaScript. Если тебе нужно что-то другое, ты должен писать свою имплементацию функции toString().

const obj = {
  type: 'regular', 
  toString: function () {
  	return JSON.stringify(this);
	},
};

console.log(1 + obj);                         // 1{"type":"regular"}

Интересные вещи происходят, если один из операндов - boolean (переменная логического типа), а другой число. Или оба операнда boolean. В таких случаях, переменные логического типа будут конвертированы в числа. true станет равно 1, а false превратится в 0.

const truePlusTrue = true + true;             // 2
const truePlusFalse = true + false;           // 1
const booleanPlusNumber = true + 5;           // 6

Вычитание, умножение и деление

Базовые правила сложения и выглядят сложно для разных типов данных. Но пока мы работаем с числами, все просто. То же верно и для JavaScript операторов *, / и -.

const subtractionResult = 10 - 2;              // 8
const multiplicationResult = 2 * 2;            // 4
const divisionResult = 10 / 2;                 // 5

Булевы значения также конвертируются в 0 или 1, когда с другой стороны оператора стоит другой boolean или число.

console.log(true / true);                      // 1
console.log(5 * false);                        // 0
console.log(true - false);                     // 1

Infinity и -Infinity

Если ты попробуешь разделить число на 0 или false, то в результате получишь Infinity или -Infinity.

console.log(5 / 0);                             // Infinity
console.log(-5 / false);                        // -Infinity

NaN

В других случаях, когда JavaScript не может нормально посчитать результат выражения, ты получишь NaN. Это специальное “не-число”, сокращение от “not-a-number”.

console.log(false / false);                     // NaN
console.log(10 / 'string');                     // NaN
console.log(5 * {});                            // NaN
console.log({} - [])                            // NaN

Пустой массив

Пустой массив превращается в пустую строку или 0 в зависимости от других операндов.

console.log('str1' + [] + 'str2');               // str1str2
console.log(12 * []);                            // 0
console.log(5 - []);                             // 5
console.log(1 / []);                             // Infinity

Унарный инкремент и декремент в JavaScript

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

Выглядят эти операторы, как двойной плюс ++ и двойной минус --.

let counter = 0;
counter++;
console.log(counter);                             // 1
counter--;
console.log(counter);                             // 0

Операторы ++ и — можно написать с любой стороны переменной. Записи counter++ и ++counter сделают почти одно и то же. Разницу покажу на примере:

let i = 0;
console.log(i++);                                 // 0
console.log(i);                                   // 1

Сначала мы берем значение i, выводим на экран и только после этого делаем инкремент. Результат инкремента станет виден во втором console.log.

А если написать ++i, то все будет наоборот. Сначала мы выполним инкремент, а уже потом обновленное значение i попадет в console.log.

let i = 0;
console.log(++i);                                  // 1
console.log(i);                                    // 1

Чтобы убедиться, что ты все правильно понял, посчитай этот пример. Ответить можешь мне на почту или в телеграм. Ссылки есть на главной странице.

let x = 1;
let y = 2;
let z = 3;

console.log(++x - y-- + z++);                       // ?

Вывод

Ты узнал о базовой математике JavaScript, ее правилах и исключениях.

Операции +, -, *, / работают как ожидается с числами, но со строками, объектами, массивами, булевыми переменными и функциями ведут себя иначе.

Понимание базовой математики JS полезно любому веб разработчику.