Syntax
array.join(separator)
Parameters
The join() method accepts one optional parameter:
- separator (optional): This defines the character or string that separates the elements in the output string. If omitted, the default separator is a comma (,).
Return Value
The `join()` method in JavaScript always returns a string. This string is created by concatenating all the elements of the array, separated by the specified separator. If the array is empty, the method will return an empty string. Understanding the return value is important because it helps you decide how to use the output in your program.
Let’s look at some examples to understand this better.
Examples
Let’s explore different use cases of the join() method.
Example 1: Basic Return Value
Let’s take a simple example where we join an array of numbers:
let numbers = [1, 2, 3, 4];
let result = numbers.join();
console.log(result);
console.log(typeof result);
You can also try this code with Online Javascript Compiler
Output:
"1,2,3,4"
"string"
In this case, the `join()` method converts the array into a string, and the default separator (a comma) is used. The `typeof` operator confirms that the return value is indeed a string.
Example 2: Using join() with the Default Separator
let fruits = ["Apple", "Banana", "Mango"];
let result = fruits.join();
console.log(result);
You can also try this code with Online Javascript Compiler
Output:
Apple,Banana,Mango
Since no separator is provided, JavaScript uses the default comma (",").
Example 3: Using join() with a Custom Separator
let fruits = ["Apple", "Banana", "Mango"];
let result = fruits.join(" - ");
console.log(result);
You can also try this code with Online Javascript Compiler
Output:
Apple - Banana - Mango
Here, we have specified " - " as the separator.
Example 4: Using join() with an Empty Separator
let numbers = [1, 2, 3, 4, 5];
let result = numbers.join("");
console.log(result);
You can also try this code with Online Javascript Compiler
Output:
12345
When an empty string ("") is used as a separator, all elements are joined without any space or symbol.
Example 5: Empty Array
If the array is empty, the `join()` method will return an empty string. Let’s see how it works:
let emptyArray = [];
let result = emptyArray.join();
console.log(result); // Output: ""
console.log(typeof result);
You can also try this code with Online Javascript Compiler
Output:
"string"
Even though there are no elements in the array, the return value is still a string, but it’s just empty.
Example 6: Using join() with a Line Break
let lines = ["Hello", "How are you?", "Goodbye"];
let result = lines.join("\n");
console.log(result);
You can also try this code with Online Javascript Compiler
Output:
Hello
How are you?
Goodbye
Using "\n" as the separator ensures each element appears on a new line.
Example 7: Using join() on an Empty Array
let emptyArray = [];
let result = emptyArray.join(" - ");
console.log(result);
You can also try this code with Online Javascript Compiler
Output:
When join() is used on an empty array, it returns an empty string.
Example 8: Custom Separator
When you specify a custom separator, the return value reflects that separator. For instance:
let colors = ["red", "green", "blue"];
let result = colors.join(" + ");
console.log(result);
You can also try this code with Online Javascript Compiler
Output:
"red + green + blue"
Here, the separator `" + "` is used to join the elements, and the return value is a string with the specified format.
Practical Use Case
The return value of the `join()` method can be used directly in other parts of your code. For example, if you’re building a web application and need to display a list of items, you can use `join()` to format the data before showing it to the user.
let items = ["laptop", "phone", "tablet"];
let formattedList = "You have selected: " + items.join(", ");
console.log(formattedList);
You can also try this code with Online Javascript Compiler
Output:
"You have selected: laptop, phone, tablet"
In this example, the return value from `join()` is concatenated with another string to create a meaningful message for the user.
Supported Browsers
The join() method is widely supported in all modern browsers:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
- Opera
- Internet Explorer (limited support in very old versions)
Frequently Asked Questions
What happens if I don’t provide a separator in join()?
If no separator is provided, the default separator (,) is used.
Can join() be used on non-array objects?
No, join() is specifically for arrays. If you try it on other objects, it will result in an error.
How can I use join() to create a sentence from an array of words?
You can use " " (space) as a separator.
Conclusion
In this article, we learned about the JavaScript Array join() method and how it helps to combine array elements into a single string. We covered how to use different separators and handle special cases. By understanding this method, developers can easily work with arrays in JavaScript, making their code cleaner and more efficient.
518+ registered 
