Skip to main content

Метод join() у масивах

JavaScriptJunior~2 хв читання
Запропонувати правку

join() об'єднує всі елементи масиву в один рядок, розділяючи їх указаним розділювачем (separator). Метод нічого не змінює у вихідному масиві, а лише повертає новий рядок, і саме тому його зручно використовувати для виводу списків, побудови шляхів, дат чи CSV-рядків.

Теорія

TL;DR

  • join() перетворює масив на рядок.
  • Розділювач за замовчуванням, кома ",".
  • Кожен елемент неявно зводиться до рядка.
  • null і undefined перетворюються на порожній рядок.
  • Метод не мутує масив і повертає саме рядок.
  • Зворотна дія, це split(): "a-b".split("-") дає ["a", "b"].

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

javascript
const fruits = ["apple", "banana", "cherry"]; const result = fruits.join(", "); console.log(result); // "apple, banana, cherry"

Що тут відбувається:

  • кожен елемент масиву перетворюється на рядок;
  • між елементами вставляється розділювач ", ";
  • якщо розділювач не вказано, використовується кома за замовчуванням.

Синтаксис і параметр

javascript
array.join(separator);
ПараметрОпис
separator(необов'язковий) рядок, який вставлятиметься між елементами. Якщо не вказати, використовується ",".

Якщо передати не рядок, він теж зведеться до рядка: [1, 2].join(0) дає "102". Порожній масив завжди дає порожній рядок, а масив з одного елемента, просто цей елемент у вигляді рядка, без жодного розділювача.

Приклади з різними розділювачами

Без розділювача:

javascript
[1, 2, 3].join(""); // "123"

З пробілом:

javascript
["JS", "is", "awesome"].join(" "); // "JS is awesome"

З іншим символом:

javascript
["2025", "10", "14"].join("-"); // "2025-10-14"

З порожніми елементами:

javascript
[1, , 3].join("-"); // "1--3", the hole still counts as a position

Кілька рядків одним викликом:

javascript
["first line", "second line"].join("\n"); // "first line\nsecond line"

Як елементи зводяться до рядка

Перед склеюванням join() викликає рядкове перетворення для кожного елемента, і тут є кілька неочевидних правил:

javascript
[1, null, 2, undefined, 3].join("-"); // "1--2--3", null and undefined become empty strings [true, false].join(" "); // "true false" [[1, 2], [3, 4]].join(";"); // "1,2;3,4", nested arrays use their own default join [{ a: 1 }].join(); // "[object Object]"

Тобто для об'єктів результат майже завжди марний: спочатку перетворіть їх на потрібні рядки через map:

javascript
const users = [{ name: 'Alice' }, { name: 'Bob' }]; users.map(u => u.name).join(', '); // "Alice, Bob"

Важливо пам'ятати

  • Метод не змінює вихідний масив.
  • Усі елементи перед об'єднанням неявно перетворюються на рядки.
  • Повертає рядок, а не масив.

Практичний приклад:

javascript
const tags = ["frontend", "javascript", "interview"]; const hashtagString = "#" + tags.join(" #"); console.log(hashtagString); // "#frontend #javascript #interview"

join() поряд із toString() і split()

МетодЩо робитьПриклад
join(sep)Склеює масив у рядок із будь-яким розділювачем[1,2].join("-") дає "1-2"
toString()Те саме, але розділювач завжди кома[1,2].toString() дає "1,2"
split(sep)Зворотна дія: рядок у масив"1-2".split("-") дає ["1","2"]
concat()Об'єднує масиви, а не робить рядок[1].concat([2]) дає [1,2]

Насправді toString() для масиву визначено через join() без аргументів, тому неявне перетворення масиву в рядок (наприклад, у шаблонному рядку) дає той самий результат, що й join().

Коротко

Що робитьПеретворює масив на рядок
Розділювач за замовчуванням","
ПовертаєРядок
Змінює масивНі
Приклад["a", "b"].join("-") дає "a-b"

Підсумок: join(), це спосіб зібрати масив у рядок, вставляючи між елементами потрібний розділювач.

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

  • Очікувати, що join() поверне масив. Він повертає рядок, тому після нього методи масивів (map, filter) уже недоступні.
  • Плутати join() з concat(). concat() об'єднує масиви в масив, join() робить з масиву рядок.
  • Забувати, що join() без аргументу ставить кому. ["a","b"].join() дає "a,b", а не "ab". Для склеювання без розділювача треба явно передати "".
  • Розраховувати, що null і undefined зникнуть. Вони перетворюються на порожній рядок, але позицію в результаті займають, тому з'являються подвійні розділювачі. Фільтруйте: arr.filter(Boolean).join(', ').
  • Склеювати масив об'єктів. Кожен об'єкт дасть "[object Object]". Спершу зробіть map на потрібне поле.
  • Використовувати join() для генерації HTML із користувацьких даних. Рядок вставиться як є, тому потрібне екранування, інакше отримаєте XSS.

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

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

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

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