JavaScript Array join() Function – Joining Array Elements into a String

Definition and Usage

The join() function for arrays joins each element of a given array using a specified separator and returns a single string.

This function provides a simple and useful way to convert an array into a string.

Basic Example

JavaScript

/*
 * Joining string-type elements
 */

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

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

console.log(fruits.join(""));
// "applebananastrawberry"

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

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

console.log(fruits.join("-"));
// "apple-banana-strawberry"

console.log(fruits.join("+"));
// "apple+banana+strawberry"


/*
 * Joining number-type elements
 */

const numbers = [1, 2, 3];

console.log(numbers.join());
// "1,2,3"

console.log(numbers.join(""));
// "123"

console.log(numbers.join("-"));
// "1-2-3"


/*
 * Joining boolean-type elements
 */

const bool = [true, false];

console.log(bool.join());
// "true,false"

console.log(bool.join(""));
// "truefalse"

console.log(bool.join("-"));
// "true-false"


/*
 * Joining object-type elements
 */

const fruitsObject = ["apple", "banana", { name: "strawberry", color: "red" }];

console.log(fruitsObject.join());
// "apple,banana,[object Object]"

console.log(fruitsObject.join(""));
// "applebanana[object Object]"

console.log(fruitsObject.join("-"));
// "apple-banana-[object Object]"


/*
 * Joining array elements
 */

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix.join());
// "1,2,3,4,5,6,7,8,9"

console.log(matrix.join(""));
// "1,2,34,5,67,8,9"

console.log(matrix.join("-"));
// "1,2,3-4,5,6-7,8,9"


/*
 * Sparse arrays
 */

const sparseArr = [1, , 3, undefined];

console.log(sparseArr.join());
// "1,,3,"

console.log(sparseArr.join(""));
// "13"

console.log(sparseArr.join("-"));
// "1--3-"

Syntax

arr is the array to which the join() function is applied.

Parameters

Parameters of the Array `join()` Function
`separator`	Optional. A string that specifies the separator used to join each array element. If omitted, a comma (`,`) is used.

Return Value

A string created by joining all elements of the array using the specified separator.

Parameter and Return Value Examples

These examples demonstrate the return values produced based on the specified parameter.

When the original array is empty

When the original array is empty, it contains no elements to convert into a string. As a result, an empty string ("") is returned.

When array elements are `undefined` or `null`

When array elements are undefined or null, those elements are treated as empty strings (""). As a result, an empty string is used in their place when joining.

When the array contains only one element

Even when the array contains only one element, the join() function returns that element as a string. Because there are no other elements to join, the specified separator is not applied.

Practical Examples

The join() function can be used effectively in a variety of situations. Below are several examples that demonstrate common use cases.

Joining array elements after reversing them

Code Explanation
The reverse() function for arrays reverses the order of the elements in the given array.

Joining array elements into HTML list items

JavaScript

const vegetables = ["carrot", "broccoli", "potato"];
const htmlList = "<ul><li>" + vegetables.join("</li><li>") + "</li></ul>";

console.log(htmlList);
// "<ul><li>carrot</li><li>broccoli</li><li>potato</li></ul>"

Working with object data

The example below shows how to use the join() function to combine elements from an array of objects. This helps demonstrate how object data can be utilized when generating strings.

JavaScript

// An array containing objects
const people = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
    { name: "Carol", age: 28 }
];

// Create strings by combining the name and age from each object
const personStrings = people.map(function(person) {
    return "<li>" + person.name + " is " + person.age + " years old.</li>";
});

// Wrap the joined strings with a <ul> tag to create a complete list
const resultString = "<ul>" + personStrings.join("") + "</ul>";

console.log(resultString);
// "<ul><li>Alice is 25 years old.</li><li>Bob is 30 years old.</li><li>Carol is 28 years old.</li></ul>"

Code Explanation
The map() function applies a given callback function to each element of an array and returns a new array.

Generating dynamic URLs

JavaScript

const baseURL = "https://api.example.com";

const params = {
    category: "books",
    limit: 10,
    sort: "desc"
};

// Convert object properties into a query string
const queryString = Object.keys(params)
    .map(key => key + "=" + encodeURIComponent(params[key]))
    .join("&");

const endpoint = `${baseURL}/search?${queryString}`;

console.log(endpoint);
// "https://api.example.com/search?category=books&limit=10&sort=desc"

Code Explanation
The encodeURIComponent() function is used to safely encode characters in specific parts of a URL, such as search queries, file names, or parameter values.