Базові оператори, математика

Зі шкільної програми ми знаємо багато арифметичних операцій, таких як додавання +, множення *, віднімання - тощо.

У цьому розділі ми почнемо з простих операторів, потім зосередимося на специфічних для JavaScript аспектах, які не охоплені шкільною арифметикою.

Терміни: “унарний”, “бінарний”, “операнд”

Перш ніж ми почнемо, розберімо певну загальну термінологію.

• Операнд – це те, до чого застосовуються оператори. Наприклад, у множенні 5 * 2 є два операнди: лівий операнд 5 і правий операнд 2. Іноді їх називають “аргументами”, а не “операндами”.

• Оператор є унарним, якщо він має один операнд. Наприклад, унарне заперечення - змінює знак числа:

  let x = 1;
  
  x = -x;
  alert( x ); // -1, було застосоване унарне заперечення

• Оператор є бінарним, якщо він має два операнди. Наприклад, оператор мінус можна використовувати та у бінарній формі:

  let x = 1, y = 3;
  alert( y - x ); // 2, бінарний мінус віднімає значення

  Формально, у прикладах вище ми маємо два різні оператори, які позначаються однаковим символом: оператор заперечення – унарний оператор, який змінює знак числа, та оператор віднімання – бінарний оператор, який віднімає одне число від іншого.

Математика

JavaScript підтримує такі математичні операції:

• Додавання +,
• Віднімання -,
• Множення *,
• Ділення /,
• Остача від ділення %,
• Піднесення до степеня **.

Перші чотири операції зрозумілі, а от про % та ** потрібно сказати декілька слів.

Остача від ділення %

Оператор остачі %, попри свій зовнішній вигляд, не пов’язаний із відсотками.

Результатом a % b є остача цілочислового ділення a на b.

Наприклад:

alert( 5 % 2 ); // 1 - остача від ділення 5 на 2
alert( 8 % 3 ); // 2 - остача від ділення 8 на 3
alert( 8 % 4 ); // 0 - остача від ділення 8 на 4

Піднесення до степеня **

Оператор піднесення до степеня a ** b множить a саме на себе b разів.

У школі ми записуємо це як a^b.

Наприклад:

alert( 2 ** 2 ); // 2² = 4
alert( 2 ** 3 ); // 2³ = 8
alert( 2 ** 4 ); // 2⁴ = 16

Так само як у математиці, оператор піднесення також можна використовувати для дробових чисел.

Наприклад, квадратний корінь це піднесення до степеня ½:

alert( 4 ** (1/2) ); // 2 (степінь 1/2 — це теж саме, що квадратний корінь)
alert( 8 ** (1/3) ); // 2 (степінь 1/3 — це теж саме, що кубічний корінь)

Об’єднання рядків через бінарний +

Розглянемо особливості операторів JavaScript, які виходять за межі шкільної арифметики.

Зазвичай оператор плюс + додає числа.

Але якщо бінарний + застосовується до рядків, він об’єднує їх:

let s = 'мій_' + 'рядок';
alert(s); // мій_рядок

Зверніть увагу, якщо будь-який з операндів є рядком, тоді інший також перетворюється на рядок.

Наприклад:

alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"

Бачите, не має значення, чи перший операнд – рядок, чи другий.

Ось складніший приклад:

alert(2 + 2 + '1' ); // "41", а не "221"

Тут оператори виконуються один за одним. Перший + додає два числа, тому він поверне 4; а наступний оператор + вже додасть (об’єднає) попередній результат із рядком 1. У підсумку ми отримаємо рядок '41' (4 + '1').

alert('1' + 2 + 2); // "122", а не "14"

У цьому прикладі перший операнд – рядок, тому компілятор також опрацьовує інші два операнди як рядки. Операнд 2 приєднується (конкатенується) до '1', тому в результаті буде '1' + 2 = "12", а потім — "12" + 2 = "122".

Лише бінарний + працює з рядками так. Інші арифметичні оператори працюють тільки з числами й завжди перетворюють свої операнди на числа.

Ось приклад, як працює віднімання й ділення:

alert( 6 - '2' ); // 4, '2' перетворюється на число
alert( '6' / '2' ); // 3, обидва операнди перетворюються на числа

Числове перетворення, унарний +

У оператора плюс + є дві форми: бінарна, яку ми використовували вище, та унарна.

Унарний плюс або, іншими словами, оператор плюс +, застосований до одного операнда, нічого не зробить, якщо операнд є числом. Але якщо операнд не є числом, унарний плюс перетворить його на число.

Наприклад:

// Нема ніякого впливу на числа
let x = 1;
alert( +x ); // 1

let y = -2;
alert( +y ); // -2

// Перетворює нечислові значення
alert( +true ); // 1
alert( +"" );   // 0

Він насправді працює як і Number(...), але має коротший вигляд.

Необхідність перетворення рядків на числа виникає дуже часто. Наприклад, якщо ми отримуємо значення з полів HTML форми, вони зазвичай є рядками. Що робити, якщо ми хочемо їх підсумувати?

Бінарний плюс додав би їх як рядки:

let apples = "2";
let oranges = "3";

alert( apples + oranges ); // "23", бінарний плюс об’єднує рядки

Якщо ми хочемо використовувати їх як числа, нам потрібно конвертувати, а потім підсумувати їх:

let apples = "2";
let oranges = "3";

// обидва значення перетворюються на числа перед застосуванням бінарного плюса
alert( +apples + +oranges ); // 5

// довший варіант
// alert( Number(apples) + Number(oranges) ); // 5

З погляду математика надмірні плюси можуть здатися дивними. Але з погляду програміста тут немає нічого особливого: спочатку застосовуються унарні плюси, вони перетворюють рядки на числа, а потім бінарний плюс підсумовує їх.

Чому унарні плюси застосовуються до значень перед бінарними плюсами? Як ми побачимо далі, це пов’язано з їхнім вищим пріоритетом.

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

Якщо вираз має більше одного оператора, порядок виконання визначається їхнім пріоритетом, або, іншими словами, типовим порядком першості операторів.

Зі школи ми всі знаємо, що множення у виразі 1 + 2 * 2 має бути обчислене перед додаванням. Саме це і є пріоритетом. Кажуть, що множення має вищий пріоритет, ніж додавання.

Дужки перевизначають будь-який пріоритет, тому, якщо ми не задоволені типовим пріоритетом, ми можемо використовувати дужки, щоби змінити його. Наприклад: (1 + 2) * 2.

У JavaScript є багато операторів. Кожен оператор має відповідний номер пріоритету. Першим виконується той оператор, який має найбільший номер пріоритету. Якщо пріоритет є однаковим, порядок виконання — зліва направо.

Ось витяг із таблиці пріоритетів (вам не потрібно її запам’ятовувати, але зверніть увагу, що унарні оператори мають вищий пріоритет за відповідні бінарні):

Як ми бачимо, “унарний плюс” має пріоритет 14, що вище за 11 – пріоритет “додавання” (бінарний плюс). Саме тому, у виразі "+apples + +oranges", унарні плюси виконуються перед додаванням (бінарним плюсом).

Присвоєння

Зазначимо, що присвоєння = також є оператором. Воно є у таблиці з пріоритетами й має дуже низький пріоритет 2.

Тому, коли ми присвоюємо значення змінній, наприклад, x = 2 * 2 + 1, спочатку виконуються обчислення, а потім виконується присвоєння = зі збереженням результату в x.

let x = 2 * 2 + 1;

alert( x ); // 5

Присвоєння = повертає результат

Той факт, що = є оператором, а не “магічною” конструкцією мови, має цікаве значення.

Усі оператори в JavaScript повертають значення. Це очевидно для + та -, але це також правдиво для =.

Виклик x = значення записує значення у x, а потім повертає його.

Ось демонстрація, яка використовує присвоєння як частину складнішого виразу:

let a = 1;
let b = 2;

let c = 3 - (a = b + 1);

alert( a ); // 3
alert( c ); // 0

У наведеному вище прикладі результат виразу (a = b + 1) є значенням, яке присвоювалося змінній a (тобто 3). Потім воно використовується для подальших обчислень.

Чудернацький код, чи не так? Ми маємо розуміти, як це працює, бо іноді ми бачимо подібне в бібліотеках JavaScript.

Однак, будь ласка, не пишіть свій код так. Ці трюки, безумовно, не роблять код більш зрозумілим або читабельним.

Ланцюгові присвоєння

Іншою цікавою особливістю є здатність ланцюгового присвоєння:

let a, b, c;

a = b = c = 2 + 2;

alert( a ); // 4
alert( b ); // 4
alert( c ); // 4

Ланцюгове присвоєння виконується справа наліво. Спочатку обчислюється найправіший вираз 2 + 2, а потім результат присвоюється змінним ліворуч: c, b та a. Зрештою всі змінні мають спільне значення.

Знову таки, щоби покращити читабельність коду, краще розділяти подібні конструкції на декілька рядків:

c = 2 + 2;
b = c;
a = c;

Так легше прочитати, особливо коли швидко переглядати код.

Оператор “модифікувати та присвоїти”

Часто нам потрібно застосувати оператор до змінної й зберегти новий результат у ту ж саму змінну.

Наприклад:

let n = 2;
n = n + 5;
n = n * 2;

Цей запис можна скоротити за допомогою операторів += та *=:

let n = 2;
n += 5; // тепер n = 7 (те ж саме, що n = n + 5)
n *= 2; // тепер n = 14 (те ж саме, що n = n * 2)

alert( n ); // 14

Короткі оператори “модифікувати та присвоїти” є для всіх арифметичних та побітових операторів: /=, -= тощо.

Ці оператори мають такий же пріоритет, як і звичайне присвоєння, тому вони виконуються після більшості інших обчислень:

let n = 2;

n *= 3 + 5; // права частина обчислюється першою, так само як і n *= 8

alert( n ); // 16

Інкремент/декремент

Збільшення або зменшення на одиницю є однією з найпоширеніших числових операцій.

Тому для цього є спеціальні оператори:

• Інкремент ++ збільшує змінну на 1:

  let counter = 2;
  counter++;        // працює так само, як counter = counter + 1, але запис коротше
  alert( counter ); // 3

• Декремент -- зменшує змінну на 1:

  let counter = 2;
  counter--;        // працює так само, як counter = counter - 1, але запис коротше
  alert( counter ); // 1

Оператори ++ та -- можуть розташовуватися до або після змінної.

• Коли оператор йде за змінною, він у “постфіксній формі”: counter++.
• “Префіксна форма” – це коли оператор йде попереду змінної: ++counter.

Обидві ці інструкції роблять те ж саме: збільшують counter на 1.

Чи є різниця? Так, але ми можемо побачити її тільки використавши значення, яке повертають ++/--.

Розберімось. Як нам відомо, всі оператори повертають значення. Інкремент/декремент не є винятком. Префіксна форма повертає нове значення, тоді як постфіксна форма повертає старе значення (до збільшення/зменшення).

Щоби побачити різницю, наведемо приклад:

let counter = 1;
let a = ++counter; // (*)

alert(a); // 2

У рядку (*), префіксна форма ++counter збільшує counter та повертає нове значення, 2. Отже, alert показує 2.

Тепер скористаємося постфіксною формою:

let counter = 1;
let a = counter++; // (*) змінили ++counter на counter++

alert(a); // 1

У рядку (*), постфіксна форма counter++ також збільшує counter, але повертає старе значення (до інкременту). Отже, alert показує 1.

Підсумки:

• Якщо результат збільшення/зменшення не використовується, немає ніякої різниці, яку форму використовувати:

  let counter = 0;
  counter++;
  ++counter;
  alert( counter ); // 2, у рядках вище робиться одне і те ж саме

• Якщо ми хочемо збільшити значення та негайно використати результат оператора, нам потрібна префіксна форма:

  let counter = 0;
  alert( ++counter ); // 1

• Якщо ми хочемо збільшити значення, але використати його попереднє значення, нам потрібна постфіксна форма:

  let counter = 0;
  alert( counter++ ); // 0

let counter = 1;
alert( 2 * ++counter ); // 4

let counter = 1;
alert( 2 * counter++ ); // 2, тому що counter++ повертає "старе" значення

let counter = 1;
alert( 2 * counter );
counter++;

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

Побітові оператори розглядають аргументи як 32-бітні цілі числа та працюють на рівні їхнього двійкового представлення.

Ці оператори не є специфічними для JavaScript. Вони підтримуються у більшості мов програмування.

Список операторів:

• AND(і) ( & )
• OR(або) ( | )
• XOR(побітове виключне або) ( ^ )
• NOT(ні) ( ~ )
• LEFT SHIFT(зсув ліворуч) ( << )
• RIGHT SHIFT(зсув праворуч) ( >> )
• ZERO-FILL RIGHT SHIFT(зсув праворуч із заповненням нулями) ( >>> )

Ці оператори використовуються тоді, коли нам потрібно “возитися” з числами на дуже низькому (побітовому) рівні (тобто – вкрай рідко). Найближчим часом такі оператори нам не знадобляться, оскільки у веброзробці вони майже не використовуються. Проте в таких галузях, як криптографія, вони можуть бути дуже корисними. Ви можете прочитати розділ Bitwise Operators на MDN, якщо виникне потреба.

Кома

Оператор “кома” (,) незвичайний і застосовується дуже рідко. Іноді цей оператор використовують для написання коротшого коду, тому нам потрібно знати його, щоби розуміти, що відбувається.

Оператор кома дає змогу обчислити кілька виразів, р��зділивши їх комою ,. Кожен із них обчислюється, але повертається тільки результат останнього.

Наприклад:

let a = (1 + 2, 3 + 4);

alert( a ); // 7 (результат обчислення 3 + 4)

Тут обчислюється перший вираз 1 + 2 і його результат викидається. Потім обчислюється 3 + 4 і повертається як результат.

Чому нам потрібен оператор, що викидає все, окрім останнього виразу?

Іноді його використовують у складніших конструкціях, щоби помістити кілька дій в один рядок.

Наприклад:

// три операції в одному рядку
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}

Такі трюки використовуються в багатьох фреймворках JavaScript. Саме тому ми їх згадуємо. Але зазвичай вони не покращують читабельність коду, тому ми маємо добре подумати перед їх використанням.