What the join() method does

JavaScriptJunior~3 min read

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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.