What is .join javascript

Explore the JavaScript join method on arrays, how it converts elements, handles holes and undefined, and practical patterns for building delimited strings like CSVs and URL queries.

JavaScripting Team

March 9, 2026·5 min read

JavaScript Tutorials Learn JavaScript Arrays Array Methods

.join

.join is a JavaScript Array method that concatenates array elements into a string using a specified separator. It converts each element to a string and places the separator between items.

What the join method does in JavaScript

According to JavaScripting, the join method is a concise way to turn an array into a string using a separator you choose. Array.prototype.join takes an optional separator and inserts it between each element as the array is flattened into text. It converts each element to a string and, crucially, treats undefined, null, and holes in sparse arrays as empty strings. This combination makes join a predictable and efficient way to produce delimited text without manually looping and concatenating.

Consider a simple example:

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

If the array contains undefined or holes:

console.log([1, undefined, 3].join("-")); // "1--3"
console.log([1, , 3].join("-")); // "1--3"

Note that join will coerce non-string elements to strings. You can also call it on array-like objects using the call pattern:

function list() { return Array.prototype.join.call(arguments, ", "); }
console.log(list(10, 20, 30)); // "10, 20, 30"

In summary, join is a straightforward method to turn arrays into readable strings with a precise separator.

How to think about element conversion and holes

Elements are first converted to strings in a ToString step, which means numbers become their textual form, booleans become 'true' or 'false', and objects rely on their own toString implementation. Holes in sparse arrays behave like missing elements and contribute empty strings between separators. This behavior is what makes join so reliable for generating compact delimited text without extra guards or checks.

If you rely on explicit placeholders for missing values, you might prefer map to fill them first or use a custom generator, but for many data pipelines, the join behavior described here is exactly what you want.

Practical use cases for join

Join shines in everyday tasks where you need a human readable string quickly:

CSV-like lines: const row = ["Alice", 34, "Engineer"].join(","); // "Alice,34,Engineer"
Delimited logs: const log = [date, level, message].join(" | ");
URL-friendly lists: const ids = [101, 102, 103].join("/"); // used in path-like segments
Displaying arrays in UI: elements.join(", ") produces friendly text for small lists.

When combined with map, you can transform values first and then join, which is a common pattern in data rendering:

const salaries = [50000, 60000, 75000];
const csv = salaries.map(n => n.toFixed(0)).join(",");

These patterns help you keep code readable and maintainable while producing predictable outputs.

Using join with array-like objects and spread

join is not limited to real arrays. You can apply it to array-like objects or the arguments object via Function.prototype.call or apply. For example:

function tags() { return Array.prototype.join.call(arguments, "; "); }
console.log(tags("js", "arrays", "methods")); // "js; arrays; methods"

Spread syntax also makes it natural to join results from other operations:

const parts = ["alpha", ...["beta", "gamma"]];
console.log(parts.join("-")); // "alpha-beta-gamma"

Understanding these patterns broadens how you structure data before converting it to text.

Edge cases and how join handles them

Some edge cases are worth noting:

Empty arrays yield an empty string: [].join(",") -> ""
Holes and undefined/null values become empty strings: [1, , 3].join("-") -> "1--3"
Non-string elements are stringified: [1, true, {toString(){return "X"}}].join("|") -> "1|true|X"

Performance-wise, join is optimized for aggregating into a single string. For very large arrays, prefer join over manual concatenation in a loop, as repeated string concatenation can create intermediate strings and degrade performance. If you need locale-aware number formatting, format numbers first and then join their string representations.

Real-world patterns: CSV, URL parameters, and more

In real apps, join is often the final step in a pipeline that formats data for storage, export, or network transmission. A CSV line can be built by mapping values to strings and then joining them with a comma:

const row = ["John", 28, "New York"].map(String).join(",");

For URL query strings, you can transform key-value pairs into components and join with ampersands:

const params = { page: 2, sort: "name" };
const query = Object.entries(params)
  .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
  .join("&");
// "page=2&sort=name"

These examples show how join acts as the last step in a readable, predictable string output.

Best practices and common mistakes to avoid

Prefer explicit transformation when values require formatting before join. Relying on implicit ToString can produce surprising results.
Be mindful of empty strings produced by undefined, null, or holes if those placeholders matter for your data format.
Use a consistent separator that matches downstream consumers, and escape user-provided separators if necessary when exporting data.
Remember that join works on array-like objects if you explicitly pass them via call or apply, but standard arrays are usually clearer and safer.
For very large datasets, test performance and memory usage; in some cases streaming or chunked processing may be preferable to a single giant string.

The JavaScripting team recommends using join for simple concatenation tasks and validating your inputs when formatting data that will be consumed by others. When formatting requirements grow into more complex patterns, consider composing multiple array operations before the final join to keep logic clear and maintainable.

Questions & Answers

What is the difference between join and toString in JavaScript?

join returns a string by concatenating elements with a separator, while toString converts the entire array to a string with a default comma separator. join gives you explicit control over the separator, while toString does not.

Can I use join on non-array objects or array-like objects?

You can use join on array-like objects by borrowing the method, for example Array.prototype.join.call(arguments, ', '). This works because join uses ToString on each element and the length property to determine elements.

What happens when the array contains undefined, null, or holes?

Undefined and null are turned into empty strings by join. Holes in sparse arrays behave the same way as missing elements, producing empty strings between separators.

How do I join with a custom separator like a comma space?

Pass the separator as the first argument to join, for example arr.join(', ') or arr.join(' - '). This controls exactly how elements are separated in the output.

Is join efficient for large arrays or datasets?

Yes, join is optimized for concatenating many elements into a single string and is generally preferred over manual concatenation in loops. For extremely large datasets, consider memory usage and streaming approaches if needed.

Can I join elements after transforming them with map?

Absolutely. Map returns a new array of transformed values, which you can then pass to join to produce a final string. This is a common pattern for data formatting.

What to Remember

Use join for clean, delimited strings from arrays
Understand that undefined, null, and holes convert to empty strings
Join is faster and safer than manual string building for large data
Combine map and join for transformed data pipelines
Test edge cases to ensure output matches downstream consumers

← More in JavaScript Arrays