Arrays are a must when learning how to program with JavaScript. Since this programming language has diverse functionality, concatenating a string is a competence you must acquire. This tutorial will guide you through the Array.prototype.join() method, primarily used for returning an array as a string without changing it.

Introduction to the join() method

JavaScript join() method creates and returns a string by concatenating all array elements. These array elements are usually separated by commas or a uniquely specified separator string. When the array contains only one item, it will be returned without using the separator string. Let's review how the join() method is written in code and look over its syntax:

join()
join(separator)

It is the most basic use case of the join() method, which has no complicated parts regarding its syntax. Remember when we mentioned the string separator? The second line of code includes this optional element, which specifies a string to separate each pair of adjacent array elements.

Important: if you omit using the string separator in your code, all array elements would be joined without any characters between them.

Now, when you know how the join() method works, let's review a basic example of using it:

let message = ["Learning", "JavaScript", "together"];
let joinedMessage = message.join();
console.log(joinedMessage); // Expected output: Learning,JavaScript,together

In this instance, we let the message be an array with three separate strings, which are "Learning," "JavaScript," and "together." Once we use the join() command with no separator, you'd get an output of strings, which are separated with commas.

Experimenting with a string separator

We've shown you how the join() method works without the optional string separator in the previous example. Let's add it this time, using the same input variables as before:

let message = ["Learning", "JavaScript", "together"];
let joinedMessage = message.join('|');
console.log(joinedMessage); // Expected output: Learning|JavaScript|together

We introduce the optional string separator, which is |. The message you get is separated using the symbol you specified as a separator. This approach proves helpful when working with arrays containing dozens of elements, which are better to be separated for readability purposes.

Joining elements with an empty string

As you can see, the string separator you use with the join() method heavily impacts the output you get. Let's experiment one more time with an array, only this time including an empty string as a separator:

var a = [7,8,9,10,11,12,13];
console.log(a.join('')) // Expected output: 78910111213

This time, we include an array with numbers separated with commas within an array. However, when you use an empty string as a separator, the output you get will show no commas or separations. Mind this method's behavior when working with it on your programming tasks.

Replacing all string occurrences

Because the output you get with the join() method includes spaces when the string separator is empty, you can manipulate the output a little bit. For instance, you can replace all string occurrences, such as spaces, with other symbols you need. Let's take a closer look at how to perform this task:

const title = 'This is some type of example';
const url = title.split(' ')
    .join('-')
    .toLowerCase();
 
console.log(url); // Expected output: this-is-some-type-of-example

Here, we provide the URL, joined by a split command, followed by the join() method. As you can see in the output example, we've achieved our goal of transforming a sentence string into the URL structure using this method. More precisely, in this example, the title string is split by space, followed by concatenating all elements by using the join() method.

Joining array-like objects

One more great use case of the join() method is an approach of joining array-like objects, such as arguments using the Function.prototype.call method. While this is a combination of two methods, having an option to join array-like objects on your own will be handy. Take a look:

function f(a, b, c) {
    var s = Array.prototype.join.call(arguments);
    console.log(s);
}
f(7, 'JavaScript', false); //Expected output: 7,JavaScript,false

What happens here: the Array.prototype.call method is joined with a join() method and is used for arguments we specified earlier. We intentionally included various data sets, including an integer, a string, and a Boolean. The expected output you get with this approach equals 7, JavaScript, and false. Accordingly, the combination of these two methods seems to be beneficial for proper work with array-like objects.

Test yourself

  • Task 1. Use the join() method to work with a message containing three strings: "This," "is," "example" to join them and name it a joinedMessage.

Solution:

let message = ["This", "is", "example"];
let joinedMessage = message.join();
console.log(joinedMessage); // Expected output: This,is,example

  • Task 2. Use the same strings, values, and names as in Task 1. But this time, use a string separator ">" to see what output it brings to your code:

Solution:

let message = ["This", "is", "example"];
let joinedMessage = message.join('>');
console.log(joinedMessage); // Expected output: This,is,example

  • Task 3. Within the following array: [1,7,8,4,2,12,75,45], use the join() method and use an empty string as a separator to see the result:

Solution:

var a = [1,7,8,4,2,12,75,45];
console.log(a.join('')) // Expected output: 17842127545

Final remarks

The join() method in JavaScript allows working with arrays by concatenating all elements and returning them as a string. Output results might differ depending on how you use the string separator.