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