JavaScript Array Join() Method with Example

JavaScript array join() method joins all elements in an array and returns them as a string. It does not change original array.

A specified separator will separate the elements of an array. The default separator is comma (,).

If you omit separator, the array elements will separate with a comma.

The join() method in JavaScript also allows you to specify any characters you want to insert between elements when they will join together.

JavaScript Array Join Method Syntax

The general syntax to declare array join() method in JavaScript is as:

array.join();
array.join(separator);

In the above syntax, the method has one parameter named separator that represents a string to separate each pair of adjacent elements of the array.

If the array has only one element, then JavaScript will return that element without using the separator.

If omitted, the array elements will separate by a comma (“,”) by default.

JavaScript joins all elements with no characters in between them if the separator is an empty string,

The join() method returns an empty string if an array has an empty.

Warning: If an element in an array is undefined, null or an empty, JavaScript converts and displays it as an empty string.

Let’s take some important example programs based on JavaScript array join() method.

JavaScript Array Elements Join by Comma

Let’s create a JavaScript program in which we will join all elements of an array with comma and display them as a string.

Program code 1:

<script>
// Create an array of elements.
  let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
// Convert the array into one string with join() method.
  let weekDays = days.join(); // without separator.
  document.write("Week days:", "<br>");
  document.write(weekDays);
</script>

[adinserter block=”5″]

Output:
      Week days:
      Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday

Program code 2:

<script>
let myShopping = new Array("Milk", "Eggs", "Cereal", "Banana", "Tomatoes");
let myShoppingList = myShopping.join("<br />");
document.write("My shopping list:", "<br>");
document.write(myShoppingList);
</script>

Output:
     My shopping list:
     Milk
     Eggs
     Cereal
     Banana
     Tomatoes

In this example program, we have used <br /> tag as a separator. If you want each element to be on a distinct line, you can do this by using the <br/> tag between each element in the array. The <br/> tag is an HTML line break that breaks text into different lines.

Joining an Array four Different Ways

Let’s create a JavaScript program in which we will create an array, colors, with three elements. Then, we will concatenate the elements of array four times: using dash separator, then a comma and a space, then a plus and an empty string.
[adinserter block=”5″]
Program code 3:

<script>
let colors = ["Red", "Orange", "Green", "Black", "Blue"];
let c1 = colors.join("-"); // dash separator.
document.write(c1, "<br>");
let c2 = colors.join(", "); // a comma and a space separator.
document.write(c2, "<br>");

let c3 = colors.join(" + "); // plus separator.
document.write(c3, "<br>");
let c4 = colors.join(""); // empty string.
document.write(c4);
</script>

Output:
      Red-Orange-Green-Black-Blue
      Red, Orange, Green, Black, Blue
      Red + Orange + Green + Black + Blue
      RedOrangeGreenBlackBlue

As you can observe in the output that the join() method converts all the array elements into a string and separate each adjacent element by the specified separator.

Joining Array Elements using String Separator

Let’s take an example program in which we will concatenate elements of an array using string as a separator in JavaScript.

Program code 4:

<script>
let name = ["I", "JavaScript"];
let joined = name.join(" like "); // string separator.
document.write(joined);
</script>

Output:
     I like JavaScript

Let’s take an example program where we will take undefined, null and empty string as elements in array and join them as a string.

Program code 5:

<script>
let elements = [10, undefined, 30, null, 40];
let joined = elements.join(", ");
document.write(joined);
</script>

Output:
     10, , 30, , 40

Joining Array-like objects using Array join() method

As we know, arrays are objects in JavaScript that have a length property with special behavior. An “array-like” object in JavaScript is an ordinary object that has numeric properties names and a length property.

The general syntax to declare array-like object is as:

let arraylikeobject = {
    0: "a",
    1: "b",
    2: "c",
    3: "d",
    length: 4
  };

JavaScript defines array methods as generic. They work correctly when applied to array-like objects.

But, array-like objects do not inherit from Array.prototype, so we cannot call array methods on them directly. We can call them indirectly using Function.call() method.

Let’s create a JavaScript program in which we will join array-like objects using call() and join() methods.

Program code 6:

<script>
// Create an array-like object.
   let fruits = {
        0: "Banana",
        1: "Orange",
        2: "Apple",
        3: "Guava",
        length: 4
   };
let joined = Array.prototype.join.call(fruits, " | ");
document.write(joined);
</script>

Output:
     Banana | Orange | Apple | Guava

In this tutorial, you learned JavaScript array join() method with various example programs. Hope that you will have understood the basic concepts of join() method in JavaScript.
Thanks for reading!!!
Next ⇒ JavaScript array sort() method⇐ Prev Next ⇒