Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Метод join() у масивах». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`join()` склеює всі елементи масиву в один рядок, вставляючи між ними заданий розділювач (separator). Якщо розділювач не передати, використовується кома. Кожен елемент перед склеюванням неявно зводиться до рядка, причому `null` і `undefined` перетворюються на порожній рядок, а порожні позиції розрідженого масиву теж дають порожнє місце. Метод не змінює вихідний масив і повертає саме рядок, а не масив. Зворотна операція, це `split()`.** ```javascript const fruits = ["apple", "banana", "cherry"]; fruits.join(", "); // "apple, banana, cherry" fruits.join(); // "apple,banana,cherry" default separator fruits.join(""); // "applebananacherry" ``` **Ключове:** `join()` перетворює масив на рядок із будь-яким розділювачем, не чіпаючи сам масив.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**`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.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.