join() in JS – How to Join Array into String

Whenever you use join() on an array, the method does the following:

1. It uses commas (or a user-defined value) to separate the array items.
2. It joins all the array elements together into a new string.
3. It returns the newly created string—without changing the original array.

Note

join() is sometimes written as Array.prototype.join() because it is a method of the Array object’s prototype property.

Syntax of the join() Method

join() accepts only one argument. Here is the syntax:

arrayObject.join(separator);

Note the following:

• A comma (,) is join()’s default separator. Therefore, if you do not specify a separator argument, browsers will use commas to separate the array’s elements.
• Suppose the array has only one element. In that case, browsers will ignore the separator argument and return only the array item.
• If the separator is an empty string (""), JavaScript will join the array’s elements without using any character to separate them.

Examples

Below are examples of the join() method.

How to join array elements with commas

// Define an array:
const bestColors = ["White", "Pink", "Blue"];

// Join the bestColors array together with a comma separator:
const joinedString = bestColors.join();

// Log joinedString to the console:
console.log(joinedString);

// The invocation above will return: "White,Pink,Blue"

Try it on StackBlitz

In the example above, the browser automatically used a comma (,) as the separator because we did not pass any argument into the join() method.

How to join array elements with ", and "

// Define an array:
const bestColors = ["White", "Pink", "Blue"];

// Join the bestColors array together with a ", and " separator:
const joinedString = bestColors.join(", and ");

// Log joinedString to the console:
console.log(joinedString);

// The invocation above will return: "White, and Pink, and Blue"

Try it on StackBlitz

How to join array elements without any separator

// Define an array:
const bestColors = ["White", "Pink", "Blue"];

// Join the bestColors array together without separating them with a character:
const joinedString = bestColors.join("");

// Log joinedString to the console:
console.log(joinedString);

// The invocation above will return: "WhitePinkBlue"

Try it on StackBlitz

How to join array elements with " *** "

// Define an array:
const bestColors = ["White", "Pink", "Blue"];

// Join the bestColors array together with a " *** " separator:
const joinedString = bestColors.join(" *** ");

// Log joinedString to the console:
console.log(joinedString);

// The invocation above will return: "White *** Pink *** Blue"

Try it on StackBlitz

CodeSweetly ads

Create NPM Package like a pro

Learn the fundamentals of building and managing NPM packages from scratch.

Find out more

Important Stuff to Know about the join() Method

Here are two essential facts to remember when using the join() method.

1. join() converts undefined and null to empty strings

Suppose your array object contains an undefined or null element. In that case, join() will convert such values to empty strings instead of "undefined" or "null".

Here’s an example:

// Define an array:
const bestColors = ["White", undefined, "Pink", null, "Blue"];

// Join bestColors array together with a "123" separator:
const joinedString = bestColors.join("123");

// Log joinedString to the console:
console.log(joinedString);

// The invocation above will return: "White123123Pink123123Blue"

Try it on StackBlitz

2. join() parses empty slots as undefined

Suppose your array object has an empty slot. In that case, join() will treat the slot as if it contains an undefined value.

Here’s an example:

// Define an array:
const bestColors = ["White", , "Pink", "Blue"];

// Join the bestColors array together with a "123" separator:
const joinedString = bestColors.join("123");

// Log joinedString to the console:
console.log(joinedString);

// The invocation above will return: "White123123Pink123Blue"

Try it on StackBlitz