JavaScript Reference
Array.prototype.join()
Join array elements into a string with a separator. Default is a comma.
Last updated: October 2026
Definition: Array.prototype.join() creates and returns a new string by concatenating all elements in the array, separated by commas or a specified separator string. It does not modify the original array [citation:2].
🎬 Live Example
Five join patterns. Click any button to see the output.
💡 join returns a string. The original array is never modified.
Basic Syntax
array.join(separator)
// separator — optional, default is ','
// Returns a new string
// Does NOT mutate the original array🎯 Syntax & Parameters
| Parameter | Type | Description |
|---|---|---|
separator | string | Optional. String to separate elements. Default: comma. |
Basic Join with Default Separator
const words = ['Hello', 'World'];
words.join();
// 'Hello,World'
// Equivalent to:
words.toString();
// 'Hello,World'Custom Separators
const parts = ['2026', '10', '11'];
parts.join('-'); // '2026-10-11'
parts.join('/'); // '2026/10/11'
parts.join(' '); // '2026 10 11'
parts.join(''); // '20261011'Pro tip: join is the fastest way to convert an array to a delimited string for CSV, URL params, or path building.
Null and Undefined Handling
const arr = [1, null, 2, undefined, 3];
arr.join();
// '1,,2,,3'
arr.join('-');
// '1--2--3'
// null and undefined become empty stringsWatch out: join does NOT output "null" or "undefined". They become empty strings.
Nested Arrays
const matrix = [[1, 2], [3, 4]];
matrix.join(';');
// '1,2;3,4'
matrix.join();
// '1,2,3,4'
// Only top level uses the separator
// Nested levels always use default commaReal-World: Building Query Strings
const params = ['page=1', 'limit=10', 'sort=name'];
const query = '?' + params.join('&');
// '?page=1&limit=10&sort=name'
// Building a path
const pathParts = ['api', 'users', '42'];
const path = '/' + pathParts.join('/');
// '/api/users/42'join is the go-to method for URL construction and CSV generation.
🎯 join vs toString vs split
| Method | Direction | Use when |
|---|---|---|
join | Array → String | Custom separator needed |
toString | Array → String | Default comma is fine |
split | String → Array | Parse a delimited string |
⚠️ Common Mistakes
- Expecting join to mutate. It returns a string; the array is unchanged.
- Assuming null becomes "null". It becomes an empty string in join.
- Confusing join with split. join is Array → String; split is String → Array.
- Using join for very large arrays in hot loops. It's O(n) but creates a large string; consider streaming for huge data.
- Expecting nested arrays to use the custom separator. Only the top level does.
❓ Frequently Asked Questions
What does Array.join() do in JavaScript?
Array.join() creates and returns a new string by concatenating all elements in the array, separated by commas or a specified separator string. It does not modify the original array.
What is the default separator for join?
The default separator is a comma (,). Calling [1, 2, 3].join() returns '1,2,3'. Pass an empty string '' for no separator, or any custom string.
How does join handle null and undefined?
null and undefined elements are converted to empty strings. [1, null, 2].join() returns '1,,2', not '1,null,2'.
What is the difference between join and toString?
toString() calls join() internally with no arguments, so they behave identically on arrays. join accepts a custom separator; toString always uses a comma.
Does join work on nested arrays?
join recursively converts nested arrays to strings. The separator only applies to the top level. Nested arrays use commas by default regardless of the outer separator.