Suggest an edit

Improve this article

Refine the answer for “What the join() method does”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**`join()` combines all elements of an array into one string, separating them with the separator you specify.** The method changes nothing in the source array, it only returns a new string, which is exactly why it is so handy for printing lists and building paths, dates or CSV lines.

## Theory

### TL;DR
- `join()` turns an array into a string.
- The default separator is a comma `","`.
- Every element is implicitly converted to a string.
- `null` and `undefined` become an empty string.
- The method does not mutate the array and returns a string.
- The reverse operation is `split()`: `"a-b".split("-")` gives `["a", "b"]`.

### Quick example
```javascript
const fruits = ["apple", "banana", "cherry"];
const result = fruits.join(", ");

console.log(result); // "apple, banana, cherry"
```

What happens here:

- each element of the array is converted to a string;
- the separator `", "` is inserted between elements;
- if no separator is given, the **default comma** is used.

### Syntax and the parameter
```javascript
array.join(separator);
```

| Parameter | Description |
| --- | --- |
| `separator` | (optional) the string inserted between elements. If omitted, `","` is used. |

Pass something that is not a string and it gets stringified too: `[1, 2].join(0)` gives `"102"`. An empty array always produces an empty string, and a one element array produces just that element as a string, with no separator at all.

### Examples with different separators
With no separator:

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

With a space:

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

With another character:

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

With empty elements:

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

Several lines in one call:

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

### How elements are converted to strings
Before gluing anything together, `join()` runs a string conversion on every element, and a few of those rules are not obvious:

```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]"
```

So for objects the result is almost always useless: turn them into the strings you want with `map` first:

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

### Things to remember
- The method **does not change** the source array.
- All elements are **implicitly converted to strings** before joining.
- It returns a **string**, not an array.

A practical example:

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

console.log(hashtagString);
// "#frontend #javascript #interview"
```

### join() next to toString() and split()

| Method | What it does | Example |
| --- | --- | --- |
| `join(sep)` | Glues an array into a string with any separator | `[1,2].join("-")` gives `"1-2"` |
| `toString()` | The same, but the separator is always a comma | `[1,2].toString()` gives `"1,2"` |
| `split(sep)` | The reverse: a string into an array | `"1-2".split("-")` gives `["1","2"]` |
| `concat()` | Merges arrays, it does not build a string | `[1].concat([2])` gives `[1,2]` |

In fact an array's `toString()` is defined in terms of `join()` with no arguments, so implicitly converting an array to a string (inside a template literal, for instance) produces exactly the same result as `join()`.

### In brief

| What it does | Turns an array into a string |
| --- | --- |
| Default separator | `","` |
| Returns | A string |
| Changes the array | No |
| Example | `["a", "b"].join("-")` gives `"a-b"` |

> **Summary:** `join()` is the way to collect an array into a string, inserting the separator you need between elements.

### Common mistakes
- **Expecting `join()` to return an array.** It returns a string, so array methods (`map`, `filter`) are no longer available after it.
- **Confusing `join()` with `concat()`.** `concat()` merges arrays into an array, `join()` turns an array into a string.
- **Forgetting that `join()` with no argument inserts a comma.** `["a","b"].join()` gives `"a,b"`, not `"ab"`. To glue with nothing in between you must pass `""` explicitly.
- **Assuming `null` and `undefined` will disappear.** They turn into an empty string but still take up a position, which is why you get doubled separators. Filter first: `arr.filter(Boolean).join(', ')`.
- **Joining an array of objects.** Every object yields `"[object Object]"`. Map to the field you want first.
- **Using `join()` to build HTML from user data.** The string is inserted as is, so it needs escaping, otherwise you get an XSS hole.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts801 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.