JavaScriptArraysBeginner

Array.join()

Joins all array elements into a string with an optional separator.

Review the syntaxStudy the examplesOpen the coding app
array.join(separator?)
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Joins all array elements into a string with an optional separator.

The join() method creates and returns a new string by concatenating all elements in an array (or an array-like object), separated by a specified separator string. If no separator is provided, it defaults to a comma. Technically, it iterates through the array and converts each element to a string using its internal toString() implementation; however, a critical edge case is that null and undefined elements are converted to empty strings ('') instead of their literal string representations. Performance-wise, join() is O(n) and is generally more memory-efficient for concatenating many segments than using the '+' operator in a loop. It also treats empty slots in sparse arrays as undefined, resulting in consecutive separators in the output string.

Quick reference

Syntax

array.join(separator?)

Inputs

Parameters

separator (optional)string · String placed between elements. Default is ','.

See it in practice

Examples

1

Basic Concatenation with Custom Separators

const elements = ['Fire', 'Air', 'Water'];
const defaultJoin = elements.join();
const customJoin = elements.join(' - ');
const noSpaceJoin = elements.join('');
Output:
defaultJoin: 'Fire,Air,Water' customJoin: 'Fire - Air - Water' noSpaceJoin: 'FireAirWater'

Demonstrates the default comma separator versus a custom string and an empty string separator.

2

Handling Null, Undefined, and Sparse Arrays

const items = [1, null, 3, undefined, 5];
const sparse = [1, , 3];
const resultItems = items.join('-');
const resultSparse = sparse.join('-');
Output:
resultItems: '1--3--5' resultSparse: '1--3'

Shows how null and undefined values, as well as holes in sparse arrays, are treated as empty strings.

3

Using join() on Array-like Objects

function listArguments() {
  return Array.prototype.join.call(arguments, ' + ');
}
const output = listArguments('Alpha', 'Beta', 'Gamma');
Output:
'Alpha + Beta + Gamma'

Since join() is generic, it can be invoked on array-like objects such as 'arguments' using Function.prototype.call.

Debug faster

Common Errors

1

LogicError

Cause: Attempting to join an array of objects without first mapping them to primitive values.

Fix: Use .map() to extract the desired property or convert objects to strings before calling .join().

const users = [{name: 'Alice'}, {name: 'Bob'}];
// Bad: users.join(', ') -> '[object Object], [object Object]'
const good = users.map(u => u.name).join(', ');
2

TypeError

Cause: Calling .join() on a variable that is null or undefined.

Fix: Ensure the variable is an array or use an empty array as a fallback.

const data = null;
try {
  data.join(',');
} catch (e) {
  console.log('Error caught');
}
const safe = (data || []).join(',');

Runtime support

Compatibility

Node.js, BrowserAll browsersES3+

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Joins all array elements into a string with an optional separator.

separator: String placed between elements. Default is ','.

LogicError: Use .map() to extract the desired property or convert objects to strings before calling .join(). TypeError: Ensure the variable is an array or use an empty array as a fallback.