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

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

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

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

Контент

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

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

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

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

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

**Масив у JavaScript можна створити кількома способами, і кожен підходить під свій випадок: літерал `[]`, конструктор `new Array()`, `Array.of()` та `Array.from()`.** У повсякденному коді майже завжди виграє літерал, а решта способів потрібні для конкретних задач і мають свої нюанси.

## Теорія

### TL;DR
- Літерал `[]` це найпростіший, найшвидший і найчитабельніший спосіб.
- `new Array(5)` з одним числовим аргументом створює порожній масив довжиною 5, а не `[5]`.
- `Array.of(5)` завжди дає `[5]`, без плутанини з довжиною.
- `Array.from()` перетворює на масив рядки, `Set`, `Map`, `arguments`, `NodeList` та інші ітеровані й схожі на масив об'єкти.
- Порожній масив можна створити наперед і наповнювати його через `push()`.
- В одному масиві можуть лежати значення різних типів, зокрема об'єкти та інші масиви.

### Швидкий приклад
```javascript
const fruits = ["apple", "banana", "cherry"]; // літерал
const numbers = new Array(1, 2, 3);           // конструктор
const single = Array.of(5);                   // [5]
const letters = Array.from("hello");          // ['h','e','l','l','o']
```

### Літерал масиву та порожній масив

Найпоширеніший і найпростіший спосіб: елементи беруться у квадратні дужки.

```javascript
const fruits = ["apple", "banana", "cherry"];
```

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

```javascript
const mixed = [1, "text", true, { name: "Tim" }, [10, 20]];
```

Порожній масив створюють так само, а наповнюють пізніше:

```javascript
const empty = [];

empty.push("apple");
empty.push("banana");
console.log(empty); // ["apple", "banana"]
```

### Конструктор new Array() і його пастка

Конструктор приймає перелік елементів:

```javascript
const numbers = new Array(1, 2, 3); // [1, 2, 3]
```

Але є нюанс, через який цей спосіб і не радять:

```javascript
const arr = new Array(5);
console.log(arr); // [ <5 empty items> ]
```

Якщо передано **один аргумент і це число**, створюється порожній масив **довжиною 5**, а не `[5]`. Щоб отримати `[5]`, пишуть літерал:

```javascript
const arr = [5];
```

Порожні слоти, які створює `new Array(5)`, це не `undefined`: більшість методів перебору, зокрема `map()` і `forEach()`, їх просто пропускають.

### Array.from(): рядки, Set і псевдомасиви

`Array.from()` створює справжній масив із будь-якого ітерованого або схожого на масив об'єкта.

З рядка:

```javascript
const letters = Array.from("hello");
console.log(letters); // ['h', 'e', 'l', 'l', 'o']
```

Із множини `Set`, класичний прийом для отримання унікальних значень списком:

```javascript
const set = new Set([1, 2, 3]);
const arr = Array.from(set); // [1, 2, 3]
```

Із псевдомасиву, наприклад `arguments` або `NodeList`:

```javascript
function example() {
  const args = Array.from(arguments);
  console.log(args);
}
example(1, 2, 3); // [1, 2, 3]
```

Це важливо тому, що псевдомасив має `length` та числові індекси, але не має методів масиву: викликати на ньому `map()` чи `filter()` без перетворення не вийде.

### Array.of()

Створює масив із будь-яких аргументів, зокрема з одного числа:

```javascript
const arr = Array.of(5);        // [5]
const arr2 = Array.of(1, 2, 3); // [1, 2, 3]
```

Саме цим `Array.of()` відрізняється від `new Array()`: він ніколи не трактує єдиний числовий аргумент як довжину. Це робить його безпечним вибором, коли масив збирають динамічно й наперед невідомо, скільки буде аргументів і якого вони типу.

### Порівняння способів

| Спосіб | Приклад | Особливості |
| --- | --- | --- |
| Літерал | `[]` або `[1, 2]` | найпростіший і найбезпечніший |
| `new Array()` | `new Array(3)` | з одним числовим аргументом створює масив довжиною 3 |
| `Array.of()` | `Array.of(3)` | створює `[3]`, без плутанини |
| `Array.from()` | `Array.from("abc")` | перетворює ітеровані та схожі на масив об'єкти на масив |

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

1. **`new Array(5)` замість `[5]`.** Один числовий аргумент задає довжину, а не значення. Якщо потрібен масив з одним числом, пишіть літерал або `Array.of(5)`.
2. **Спроба заповнити результат `new Array(5)` через `map()`.** Порожні слоти пропускаються, тому `new Array(5).map((_, i) => i)` залишиться порожнім. Робочий варіант: `Array.from({ length: 5 }, (_, i) => i)`.
3. **Виклик методів масиву на псевдомасиві.** `arguments` та `NodeList` не мають `map()` і `filter()`, спершу потрібен `Array.from()` або spread.
4. **Використання `new Array()` там, де достатньо літерала.** Це довше, повільніше читається й додає ризик пастки з довжиною без жодної переваги.

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

Для рев’юера

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

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