Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Інкремент і декремент». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Оператори `++` і `--` це інкремент і декремент: вони збільшують або зменшують значення змінної на одиницю.** Плутанина виникає не через саму дію, а через різницю між префіксною формою (`++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`.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати689 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.