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

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

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

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

Контент

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

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

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

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

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

**Властивість `length` у масиві JavaScript особлива: вона не просто показує довжину, а керує кількістю елементів.** Якщо змінити її вручну, це напряму вплине на вміст масиву, тому присвоєння `length` треба сприймати як операцію зміни даних, а не як запис службового числа.

## Теорія

### TL;DR

- `length` доступна і для читання, і для запису, і присвоєння змінює сам масив.
- Менше значення обрізає масив: елементи з більшими індексами зникають безповоротно.
- Більше значення додає порожні слоти (empty items), а не `undefined`.
- Порожні слоти пропускаються методами `forEach`, `map`, `filter`, `some`, `reduce`.
- `arr.length = 0` очищає масив на місці, не створюючи новий.
- Некоректне значення (`-1`, `1.5`, `'abc'`) кидає `RangeError: Invalid array length`.

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

```javascript
const arr = [1, 2, 3, 4, 5];

arr.length = 3;
console.log(arr); // [1, 2, 3]

arr.length = 5;
console.log(arr); // [1, 2, 3, <2 empty items>]
```

Значення, які «повернулися» після збільшення `length`, не відновлюються: на їх місці порожні слоти.

### Зменшення length

```javascript
const arr = [1, 2, 3, 4, 5];
arr.length = 3;

console.log(arr); // [1, 2, 3]
```

Якщо зменшити `length`, **усі елементи з більшими індексами видаляються**. Це той самий результат, що й `arr.splice(3)`, але швидший і без проміжного масиву. Дані втрачені остаточно: повернути `length` назад не означає повернути значення.

### Збільшення length і порожні слоти

```javascript
const arr = [1, 2, 3];
arr.length = 6;

console.log(arr);    // [1, 2, 3, <3 empty items>]
console.log(arr[4]); // undefined
```

Якщо збільшити `length`, додаються **порожні слоти** (empty items). Вони не дорівнюють `undefined`, це порожні комірки, яких ніби «немає», тому, наприклад, `forEach()` їх пропустить.

Різницю між порожнім слотом і справжнім `undefined` видно так:

```javascript
const sparse = [1, 2, 3];
sparse.length = 5;

const dense = [1, 2, 3, undefined, undefined];

console.log(4 in sparse); // false, слота немає
console.log(4 in dense);  // true, там лежить undefined

let visited = 0;
sparse.forEach(() => visited++);
console.log(visited); // 3, порожні слоти пропущено
```

Такий масив називають розрідженим (sparse array). Частина операцій усе ж бачить слоти як `undefined`: це `for...of`, `Array.from()`, spread і `join()`. Через цю неоднозначність розріджених масивів краще уникати, а для заповнення використовувати `Array(6).fill(0)`.

### Очищення масиву через length = 0

```javascript
const arr = [10, 20, 30];
arr.length = 0;

console.log(arr); // []
```

Це зручний спосіб **очистити масив** без його перестворення. Важлива відмінність від `arr = []`: присвоєння `length = 0` змінює той самий об'єкт, тому всі інші змінні, що посилаються на цей масив, теж побачать порожній масив. Саме тому цей прийом працює і для `const`.

```javascript
const first = [1, 2, 3];
const second = first;

first.length = 0;
console.log(second); // [], те саме посилання
```

### Що важливо знати

| Дія | Що станеться |
| --- | --- |
| `arr.length = менше` | Обріже масив, зайві елементи видаляться |
| `arr.length = більше` | Додасть порожні слоти в кінець |
| `arr.length = 0` | Очистить масив на місці |
| Читання `arr.length` | Показує кількість елементів, на одиницю більшу за максимальний індекс |
| `arr.length = -1` | Кине `RangeError: Invalid array length` |

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

- **Вважати, що збільшення `length` створює `undefined`.** Воно створює порожні слоти, і `4 in arr` поверне `false`.
- **Розраховувати, що `forEach` або `map` пройдуть по нових комірках.** Ці методи пропускають порожні слоти, тому лічильники й підсумки будуть меншими за очікувані.
- **Намагатися відновити дані, повернувши `length`.** Після зменшення значення втрачені, зворотне збільшення дає лише порожні слоти.
- **Плутати `arr.length = 0` і `arr = []`.** Перше очищає наявний масив для всіх посилань, друге створює новий масив і залишає старий недоторканим для решти коду.
- **Присвоювати `length` некоректне значення.** `arr.length = -1` або `arr.length = 1.5` кидають `RangeError`, а не мовчки округлюють.
- **Судити про «розмір» об'єкта за `length`.** У звичайного об'єкта `length`, це просто властивість, і зміна її нічого не видаляє.

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

Для рев’юера

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

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