Skip to content
Latest: Publish JavaScript Packages to NPM Like a Pro!

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.

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.

Below are examples of the join() method.

// 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.

// 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

// 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

// 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

Important Stuff to Know about the join() Method

Section titled “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

Section titled “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

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