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

JavaScriptJunior~2 хв читання

Оператори ++ і -- це інкремент і декремент: вони збільшують або зменшують значення змінної на одиницю. Плутанина виникає не через саму дію, а через різницю між префіксною формою (++i) і постфіксною (i++), бо від неї залежить, яке значення поверне вираз.

Теорія

TL;DR

++ збільшує змінну на 1, -- зменшує на 1.
Префіксна форма ++i спершу змінює змінну, потім повертає нове значення.
Постфіксна форма i++ спершу повертає старе значення, потім змінює змінну.
Сама змінна в обох випадках змінюється однаково, різниця тільки в поверненому значенні.
У циклі for (let i = 0; i < 5; i++) різниці немає, бо результат виразу не використовується.
Оператори працюють лише зі змінними та властивостями, застосувати їх до літерала не можна.

Швидкий приклад

javascript

let a = 1;
console.log(a++); // 1, спершу виводить, потім збільшує
console.log(a);   // 2

let b = 1;
console.log(++b); // 2, спершу збільшує, потім виводить
console.log(b);   // 2

Що роблять оператори `++` і `--`

Оператор	Дія	Приклад
`++`	збільшує значення змінної на 1	`i++` це `i = i + 1`
`--`	зменшує значення змінної на 1	`i--` це `i = i - 1`

Важливо: залежно від розташування (++i чи i++) результат виразу може бути різним.

Префіксна форма (`++i`, `--i`)

Спершу змінює значення змінної, а потім повертає нове значення.

javascript

let i = 5;
let result = ++i; // спочатку i = 6, потім повертається 6

console.log(i);      // 6
console.log(result); // 6

Тобто:

Збільшує або зменшує змінну.

Повертає нове значення.

Постфіксна форма (`i++`, `i--`)

Спершу повертає старе значення, а потім змінює змінну.

javascript

let i = 5;
let result = i++; // спочатку поверне 5, потім збільшить i до 6

console.log(i);      // 6
console.log(result); // 5

Тобто:

Повертає старе значення.

І лише потім змінює змінну.

Різниця всередині виразів

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

javascript

let x = 10;
let y = x++ + 5; // y = 10 + 5 = 15, потім x = 11

let a = 10;
let b = ++a + 5; // a = 11, b = 16

Форма	Зміна змінної	Значення, що повертається
`++i`	Збільшує одразу	Нове значення
`i++`	Збільшує потім	Старе значення
`--i`	Зменшує одразу	Нове значення
`i--`	Зменшує потім	Старе значення

У циклах

Зазвичай у циклах використовують форму i++, бо результат виразу явно не потрібен:

javascript

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Тут немає різниці між i++ і ++i, бо значення, яке повертає вираз, ніде не використовується.

Підсумкова таблиця

Форма	Коли змінює	Що повертає	Приклад результату
`++i`	Одразу	Нове значення	`let i = 1; console.log(++i)` дає `2`
`i++`	Після	Старе значення	`let i = 1; console.log(i++)` дає `1`
`--i`	Одразу	Нове значення	`let i = 3; console.log(--i)` дає `2`
`i--`	Після	Старе значення	`let i = 3; console.log(i--)` дає `3`

Типові помилки

Використовувати i++ там, де потрібне нове значення. const next = i++ збереже старе число, і помилка проявиться лише в граничних випадках.
Комбінувати інкремент і ту саму змінну в одному виразі. Рядки на кшталт i = i++ + ++i формально працюють, але читати їх неможливо, і різні люди прочитають їх по-різному.
Застосовувати оператор до const. const i = 0; i++ кидає TypeError, бо переприсвоєння константи заборонене.
Очікувати зміни від літерала або виклику функції. 5++ і getValue()++ це синтаксична помилка: операнд має бути змінною або властивістю, наприклад counter.value++.
Забувати про приведення типів. let s = '5'; s++ дасть число 6, бо оператор спершу приводить операнд до числа, а let t = 'abc'; t++ дасть NaN.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.