Пошук уроків, статей та іншого контенту
Познайомтеся з операторами =, +=, -=, *=, /= та іншими скороченими формами присвоєння. Навчіться компактно оновлювати значення змінних.
Присвоєння — це запис значення у змінну. Для цього використовується оператор =:
let age = 25;У цьому прикладі:
let створює змінну;
age — ім’я змінної;
= записує значення праворуч у змінну ліворуч;
25 — значення змінної.
Після присвоєння змінну можна використовувати в інших виразах:
let price = 100;
let quantity = 3;
let total = price * quantity;
console.log(total); // 300Оператор = не означає «дорівнює» у математичному сенсі. Він означає «присвоїти значення».
let number = 10;
number = 20;
console.log(number); // 20Спочатку змінна number отримала значення 10, а потім — значення 20.
Праворуч від оператора = може бути не лише конкретне значення, а й вираз:
let firstNumber = 8;
let secondNumber = 4;
let result = firstNumber + secondNumber;
console.log(result); // 12JavaScript спочатку обчислює вираз праворуч, а потім записує результат у змінну ліворуч.
Значення змінної також можна присвоїти іншій змінній:
let originalValue = 42;
let copiedValue = originalValue;
console.log(copiedValue); // 42У цьому випадку copiedValue отримує поточне значення originalValue.
+=Оператор += додає значення до змінної та записує результат назад у цю саму змінну.
let score = 10;
score += 5;
console.log(score); // 15Запис:
score += 5;є скороченою формою такого коду:
score = score + 5;Цей оператор часто використовують для лічильників:
let completedTasks = 0;
completedTasks += 1;
completedTasks += 1;
completedTasks += 1;
console.log(completedTasks); // 3Оператор += працює і з рядками:
let message = "Привіт";
message += ", JavaScript!";
console.log(message); // Привіт, JavaScript!У цьому випадку рядки об’єднуються.
-=Оператор -= віднімає значення від змінної та зберігає результат:
let balance = 100;
balance -= 25;
console.log(balance); // 75Це скорочена форма:
balance = balance - 25;Приклад із кількістю товару:
let products = 10;
products -= 2;
console.log(products); // 8*=Оператор *= множить значення змінної на вказане число:
let number = 6;
number *= 4;
console.log(number); // 24Це те саме, що:
number = number * 4;Наприклад, можна збільшити ціну товару вдвічі:
let price = 150;
price *= 2;
console.log(price); // 300/=Оператор /= ділить значення змінної на вказане число:
let distance = 100;
distance /= 4;
console.log(distance); // 25Повна форма запису:
distance = distance / 4;Оператор /= може використовуватися для поділу суми між кількома людьми:
let totalAmount = 1200;
let people = 4;
totalAmount /= people;
console.log(totalAmount); // 300%=Оператор %= обчислює залишок від ділення та записує його у змінну:
let number = 17;
number %= 5;
console.log(number); // 2Це скорочена форма:
number = number % 5;Залишок від ділення часто використовують для перевірки парності числа:
let number = 14;
number %= 2;
console.log(number); // 0Якщо залишок дорівнює 0, початкове число було парним. Однак після операції початкове значення вже замінене залишком.
**=Оператор **= підносить значення змінної до степеня:
let number = 3;
number **= 2;
console.log(number); // 9Це скорочена форма:
number = number ** 2;У цьому прикладі число 3 піднесено до квадрату.
Для збільшення змінної на одиницю можна використовувати оператор ++:
let counter = 0;
counter++;
console.log(counter); // 1Це аналогічно такому запису:
counter += 1;Для зменшення на одиницю використовується оператор --:
let lives = 3;
lives--;
console.log(lives); // 2Це аналогічно:
lives -= 1;Оператори ++ і -- можна записувати перед змінною або після неї:
let number = 5;
number++;
++number;
console.log(number); // 7У простих окремих інструкціях результат однаковий. Відмінність помітна, коли оператор використовується всередині іншого виразу:
let number = 5;
let firstResult = number++;
console.log(firstResult); // 5
console.log(number); // 6
let secondResult = ++number;
console.log(secondResult); // 7
console.log(number); // 7number++ спочатку повертає старе значення, а потім збільшує змінну;
++number спочатку збільшує змінну, а потім повертає нове значення.
На початковому етапі зручніше використовувати += 1 і -= 1, якщо порядок операцій може бути незрозумілим.
JavaScript також має скорочені оператори присвоєння для логічних значень.
||=Оператор ||= присвоює нове значення, якщо поточне значення є хибним (falsy):
let username = "";
username ||= "Гість";
console.log(username); // ГістьПорожній рядок "" вважається хибним значенням, тому змінна отримала "Гість".
Це приблизно відповідає такому коду:
if (!username) {
username = "Гість";
}До хибних значень у JavaScript належать, зокрема:
false;
0;
"";
null;
undefined;
NaN.
&&=Оператор &&= присвоює нове значення, лише якщо поточне значення є істинним (truthy):
let isLoggedIn = true;
isLoggedIn &&= false;
console.log(isLoggedIn); // falseЯкби isLoggedIn дорівнював false, присвоєння не відбулося б.
Приклад:
let message = "Повідомлення є";
message &&= message + "!";
console.log(message); // Повідомлення є!??=Оператор ??= присвоює значення лише тоді, коли поточне значення дорівнює null або undefined:
let selectedColor = null;
selectedColor ??= "синій";
console.log(selectedColor); // синійЦей оператор відрізняється від ||=. Значення 0, false і порожній рядок не вважаються відсутніми для ??=:
let count = 0;
count ??= 10;
console.log(count); // 0Оператор ??= не замінив 0, оскільки 0 — це не null і не undefined.
У наступному прикладі скорочені оператори використовуються для оновлення даних про замовлення:
let itemPrice = 250;
let quantity = 2;
let discount = 0;
let deliveryCost = 80;
// Додаємо ще один товар
quantity += 1;
// Обчислюємо вартість товарів
let total = itemPrice * quantity;
// Застосовуємо знижку
discount += 50;
total -= discount;
// Додаємо доставку
total += deliveryCost;
// Ділимо оплату між двома людьми
let paymentPerPerson = total;
paymentPerPerson /= 2;
console.log(`Кількість товарів: ${quantity}`);
console.log(`Загальна сума: ${total} грн`);
console.log(`Оплата на одну людину: ${paymentPerPerson} грн`);Результат:
Кількість товарів: 3
Загальна сума: 780 грн
Оплата на одну людину: 390 грнУ скороченому операторі спочатку обчислюється права частина, а потім виконується присвоєння:
let number = 10;
number += 2 * 3;
console.log(number); // 16Спочатку обчислюється 2 * 3, отримуємо 6, а потім виконується:
number = number + 6;Якщо порядок обчислень може бути незрозумілим, використовуйте дужки:
let value = 10;
value *= (2 + 3);
console.log(value); // 50constЗмінну, оголошену через const, не можна переприсвоїти:
const daysInWeek = 7;
// daysInWeek += 1; // TypeErrorОператори +=, -=, *=, /= та інші змінюють значення змінної, тому для них потрібна змінна, оголошена через let:
let points = 10;
points += 5;
console.log(points); // 15const можна використовувати, якщо значення не змінюється:
const taxRate = 0.2;
const price = 100;
const tax = price * taxRate;
console.log(tax); // 20= та == або ===Оператор = виконує присвоєння:
let number = 10;Оператори == і === порівнюють значення. Вони не змінюють змінну:
console.log(10 === 10); // trueНе слід використовувати порівняння замість присвоєння:
let score = 0;
// score === 10; // Це лише перевірка, значення не змінитьсяconstconst name = "Олена";
// name += " Коваль"; // TypeErrorЯкщо змінну потрібно оновлювати, оголосіть її через let:
let name = "Олена";
name += " Коваль";
console.log(name); // Олена Ковальlet value = 10;
value %= 3;
console.log(value); // 1, а не 10Після виконання value %= 3 початкове значення 10 втрачено. Якщо воно ще потрібне, збережіть результат в іншій змінній:
let value = 10;
let remainder = value % 3;
console.log(value); // 10
console.log(remainder); // 1Оператор += має особливість під час роботи з рядками:
let value = 10;
value += "5";
console.log(value); // "105"Значення стало рядком, тому що під час додавання числа до рядка JavaScript об’єднав їх.
Якщо потрібно виконати арифметичне додавання, переконайтеся, що обидва значення є числами:
let value = 10;
let additionalValue = Number("5");
value += additionalValue;
console.log(value); // 15Створіть змінну balance зі значенням 500.
Додайте до неї 250 за допомогою +=.
Відніміть 100 за допомогою -=.
Помножте баланс на 2 за допомогою *=.
Поділіть баланс на 5 за допомогою /=.
Виведіть результат у консоль.
Очікуваний результат:
let balance = 500;
balance += 250;
balance -= 100;
balance *= 2;
balance /= 5;
console.log(balance); // 260= записує значення у змінну.
+= додає значення та зберігає результат у тій самій змінній.
-= віднімає значення.
*= множить значення.
/= ділить значення.
%= зберігає залишок від ділення.
**= підносить значення до степеня.
++ збільшує значення на одиницю.
-- зменшує значення на одиницю.
||=, &&= і ??= виконують умовне присвоєння.
Оператори присвоєння змінюють значення змінної, тому їх не можна застосовувати до змінних, оголошених через const.