Створення масиву

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

Масив у 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")`	перетворює ітеровані та схожі на масив об'єкти на масив

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

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

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

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

Premium

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