join() in JS – How to Join Array into String
Whenever you use join() on an array, the method does the following:
- It uses commas (or a user-defined value) to separate the array items.
- It joins all the array elements together into a new string.
- It returns the newly created string—without changing the original array.
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 (
,
) isjoin()
's default separator. Therefore, if you do not specify aseparator
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"
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"
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"
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"
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"
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"
Overview
join()
creates a new string by using a comma, or a user-defined separator, to join the elements of an array object.