JavaScript Array join() Method

What You’ll Learn

The join() method turns an array into a single string, placing a separator between elements. Default separator is a comma. This tutorial covers syntax, five examples, URL query building, the inverse relationship with split(), and how join() compares to toString().

Introduction

Arrays hold lists; strings display them. The join() method bridges that gap—turn tags into a CSV line, path segments into a URL, or words into a sentence with spaces.

It returns a new string and leaves the array unchanged. Each element is converted to a string automatically, so numbers work without extra steps.

Understanding the join() Method

array.join(separator) walks every slot from index 0 to length - 1, converts each value to a string, and inserts separator between adjacent items.

Omit the separator (or pass undefined) and you get commas. Pass "" to glue elements with nothing in between.

📝 Syntax

General form of Array.prototype.join:

array.join(separator)

Parameters

• separator — optional string placed between elements (default ",").

Return value

• A single string built from all elements.
• Empty array returns "".
• Original array unchanged.

Common patterns

• arr.join() — comma-separated (default).
• arr.join(" ") — space-separated words.
• arr.join("") — concatenate with no separator.
• params.join("&") — build query strings.

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

const fruits = ["apple", "orange", "banana"];

console.log(fruits.join());
// "apple,orange,banana"

"apple,orange,banana"

const colors = ["red", "green", "blue"];

console.log(colors.join("-"));
// "red-green-blue"

"red-green-blue"

const letters = ["H", "i", "!"];

console.log(letters.join(""));
// "Hi!"

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

"Hi!"
"1234"

const queryParams = ["page=1", "limit=10", "sort=desc"];

const url = "https://example.com/data?" + queryParams.join("&");

console.log(url);
// "https://example.com/data?page=1&limit=10&sort=desc"

"https://example.com/data?page=1&limit=10&sort=desc"

const original = "alpha,beta,gamma";

const parts = original.split(",");
const restored = parts.join(",");

console.log(parts);
// ["alpha", "beta", "gamma"]

console.log(restored);
// "alpha,beta,gamma"

console.log(restored === original);
// true

["alpha", "beta", "gamma"]
"alpha,beta,gamma"
true

🚀 Common Use Cases

• Display lists — “Milk, Bread, Eggs” for UI text.
• Path building — join segments with / (mind leading slashes).
• Query strings — connect key=value pairs with &.
• CSV export — comma or tab separated rows.
• Sentence from words — words.join(" ").
• Character glue — join("") for passwords or codes.

📝 Notes

• Default separator is "," (comma).
• Empty array → "" (empty string).
• Elements are stringified; numbers work out of the box.
• Sparse holes become empty strings in the result.
• null and undefined become "" when joined.
• ES5—universal browser support.

💡 Best Practices