JavaScript Array join() Method

join() converts all elements of a JavaScript array into one string and places a separator between adjacent elements. If no separator is supplied, JavaScript uses a comma.

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
console.log(scripts.join(" : "));
// PHP : ASP : JavaScript : HTML

join() Syntax and Default Separator Top ↑

const result = array.join();
const custom = array.join(separator);

const values = ["A", "B", "C"];
console.log(values.join()); // A,B,C

Use a Custom Separator Top ↑

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
console.log(scripts.join(" | ")); // PHP | ASP | JavaScript | HTML
console.log(scripts.join(""));    // PHPASPJavaScriptHTML

The separator is converted to a string. Use "" when no characters should appear between values.

join() on an Empty Array Top ↑

const values = [];
console.log(values.join(" - ")); // ""

An empty array produces an empty string.

How join() Handles null, undefined, and Empty Slots Top ↑

const values = ["A", null, undefined, , "E"];
console.log(values.join(" | "));
// A |  |  |  | E

null, undefined, and empty slots contribute an empty string between separators. This can matter when formatting incomplete data.

join() with Nested Arrays Top ↑

const matrix = [[1, 2], [3, 4]];
console.log(matrix.join(" | ")); // 1,2 | 3,4

Each nested array is converted to text using its own string conversion, which normally uses commas. join() is not a structured serializer for nested data.

Display Joined Array Data Top ↑

For plain text output, assign the joined string with textContent.

<p id="output"></p>

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
const output = document.getElementById("output");
output.textContent = scripts.join(" : ");

If you want a real vertical list, creating <li> elements is usually more semantic than joining values with <br> strings.

join() vs Array toString() Top ↑

toString() provides no separator parameter and normally behaves like join() with commas.

const values = [1, 2, 3];
console.log(values.join(" - ")); // 1 - 2 - 3
console.log(values.toString());   // 1,2,3

Is join() Enough to Create CSV? Top ↑

join(",") can produce a comma-separated line only when values do not need CSV escaping. Real CSV data may contain commas, quotes, or line breaks, so a proper CSV serializer is safer for general export tasks.

Common join() Mistakes Top ↑

• Expecting join() to change the array. It returns a string and leaves the array unchanged.
• Forgetting that the default separator is a comma.
• Expecting nested arrays to preserve a structured format.
• Using HTML strings as separators when semantic DOM elements would be clearer.
• Assuming join(",") handles all CSV escaping requirements.

Displaying Arrays with join(): Video Top ↑

Display Array Elements → Create an Array with split() → Array toString() →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: