What is Array join() Method in JavaScript? Explained and Examples

Are you ready to unfold the array join() method in JavaScript and discover how it works?

Read on to elevate your coding skills in JavaScript to new heights concerning join in JavaScript.

This article is your key to understanding one of JavaScript’s most powerful array methods.

Let’s dive into practical examples that illustrate how to use the join() method to manipulate arrays effectively.

What is join() method in JavaScript?

The Array.prototype.join() or the join() method in JavaScript is used to join the elements of an array into a string.

In other words, it concatenates all elements of an array into a string.

The elements will be separated by a specified separator, and the default separator is a comma (,).

Syntax

array.join(separator) ✅

Parameters

array (required)

This is the original array.

separator (optional)

It specifies the character(s) to separate the array items.

The separator is transformed into a string as needed. In case it’s not provided, the array elements get divided by a comma (,).

When the separator is an empty string, all elements are united without any characters between them.

Return value

The join() method returns a string resulting from converting all array elements in order of their indices into strings and concatenating them, separated by the defined separator string.

If the array contain just a single item, that particular item will be returned without utilizing the separator.

Here’s an example code:

const subjects = ["English", "Math", "Programming"];
let result = subjects.join(" and ");✅  

console.log(result);

Output:

English and Math and Programming

📌 Please take note that join() method doesn’t change or alter the original array.

Supported Browser

✔ Chrome

✔ Edge

✔ Firefox

✔ Internet Explorer

✔ Safari

✔ Opera

Example codes using join() method

Here are some examples of using the join() method in JavaScript:

Example 1: Joining array elements with a space

let samplearray = ["Welcome", "to", "Itsourcecode"];
let result = samplearray.join(" "); ✅
console.log(result); 

Output:

Welcome to Itsourcecode

Example 2: Joining array elements with a comma (default behavior)

let subjects = ["English", "Math", "Programming"];
let listsubjects = subjects.join(); ✅
console.log(listsubjects);

Output:

English,Math,Programming

Example 3: Joining array elements with an empty string (concatenation)

let sampleletters = ["I", "T", "S", "O", "U", "R", "C", "E", "C", "O" , "D", "E"];
let result = sampleletters.join("");✅ 
console.log(result);

Output:

ITSOURCECODE

Example 4: Joining array elements with a custom separator

let numbers = [10, 20, 30, 40, 50];
let sequence = numbers.join(" - "); ✅
console.log(sequence); 

Output:

10 - 20 - 30 - 40 - 50

These examples demonstrate different ways to use the join() method to combine the elements of an array into a string.

How to use join() method on string in JavaScript?

The join() method is primarily used with arrays, not strings. However, if you want to use it with a string, you would first need to convert the string into an array.

Here’s an example:

let samplestr = "Welcome to Itsourcecode";
let strArray = samplestr.split(""); // splits the string into an array of characters

let joinedStr = strArray.join(","); ✅ // joins the array elements with a hyphen

console.log(joinedStr); 

In this example, we first use the split(“”) method to convert the string into an array of characters.

Then we use join(“,”) to join the array elements back into a string, with each character separated by a comma (,).

Output:

W,e,l,c,o,m,e, ,t,o, ,I,t,s,o,u,r,c,e,c,o,d,e

How to join elements in JavaScript?

You can join elements of an array into a string using the join() method in JavaScript.

Here’s how you can do it:

let array = ["Welcome", "to", "Itsourcecode"];
let joinedString = array.join(" "); ✅
console.log(joinedString); 

As you have noticed the join() method is called on the array object.

The argument ” ” is the separator that will be placed between each element in the array when they are joined into a string.

The output of this code will be:

Welcome to Itsourcecode

The join() method does not change the original array. Instead, it returns a new string.

How to create join function in JavaScript?

Here’s a simple implementation of a join function in JavaScript.

This function mimics the behavior of the built-in Array.prototype.join() method:

function join(array, separator = ',') {
let result = '';
for (let i = 0; i < array.length; i++) {
result += array[i];
if (i !== array.length - 1) {
result += separator;
}
}
return result;
}

// Usage:
const subjects = ["English", "Math", "Programming"];
console.log(join(subjects, " , "));✅ 

As you can see in our example code, the join function takes an array and a separator as arguments. It iterates over the array, adding each element to the result string.

If the current element is not the last one in the array, it also adds the separator to the result. Finally, it returns the result string.

When you run this code with the subjects array and “,” as the separator.

This would be the output:

English , Math , Programming

Conclusion

In conclusion, the join() method in JavaScript is a powerful tool for manipulating arrays.

It allows you to combine the elements of an array into a string, with a specified separator between each element.

This method is versatile and can be used in a variety of ways, as demonstrated by the examples provided in this article.

Whether you’re joining array elements with a space, a comma, or a custom separator, the join() method provides an efficient way to manipulate and manage your data.

Moreover, even though it’s primarily used with arrays, you can also use it with strings by first converting the string into an array.

We are hoping that this article provides you with enough information that helps you understand the join in JavaScript.

If you want to dive into more JavaScript topics, check out the following articles:

•  JavaScript foreach in array
• .pop in JavaScript
• indexof in JavaScript

Thank you for reading Itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel  · View all posts by Caren Bautista →