Join Arrays to Form String in JavaScript

The given task is to perform joining arrays to form strings in JavaScript.

Input-Output Scenario

Let's look into some input-output scenarios. Consider there is an array having some elements in it and we are trying to join that array to form the string.

Input = [32, 45, 65, 12, 07, 55];
Output = 32, 45, 65, 12, 07, 55 //String

Let's look into another scenario, where we are having two arrays and we are trying to join those two arrays and form a string.

Array1 = [123, 453, 656, 654, 125, 757];
Array2 = ["Hello", "honey", "bunny"];
Output = 123, 453, 656, 654, 125, 757, Hello, honey, bunny //String

Array.join() method

The method join() will join all the elements in the array and return them in form of a string. This method accepts a string value representing a separator, as a parameter.

This method joins all the elements separated by the specified separator. By default, comma (,) is considered as the separator.

Syntax

Following is the syntax of Array.join() method, this method will accept only a single parameter ?

Array.join(seperator);

Example 1

Single Array

In the example below, we have an array with some elements in it and joined the array elements with the help of Join() method. This method returned the array elements in form of string.


<!DOCTYPE html>
<html>
   <title>Joining single array to form string in JavaScript</title>
<head>
   <p id="para1"></p>
   <p id="para2"></p>
   <p id="para3"></p>
</head>
<body>
   <script>
      const snacks = ["Pizza", "Waflle", "Donut"];
      let string1 = snacks.join();
      document.getElementById("para1").innerHTML = string1;
      let string2 = snacks.join(' | ');
      document.getElementById("para2").innerHTML = string2;
      let string3 = snacks.join('');
      document.getElementById("para3").innerHTML = string3;
   </script>
</body>
</html>

In the output, we have passed some particular separators into the join() method and it returned in the form of a string accordingly.

Concat() method

When in case of joining two or more arrays, the concat() method will take place.

The concat() method will join two or more arrays and return a new array that contains the elements of joined arrays. This method will not change or modify the existing array.

Syntax

Following is the syntax of the concat() method,

array1.concat(array2, array3, .....arrayN);

where, the array(s) are to be concatenated.

This method will return all the arrays which are concatenated in a new array.

Example 2

Using Multiple Arrays

In the example below; we have declared more than two arrays and concatenated those arrays with concat() method, which will return as an array.

Now, by using join() method we have joined that new concatenated array and returned it in the form of a string.


<!DOCTYPE html>
<html>
   <title> Joining arrays to form string in JavaScript</title>
<head>
   <p id="para1"></p>
   <p id="para2"></p>
</head>
<body>
   <script>
      const Breakfast = ["Dosa", "Idly", "Poha", "Upma"];
      const snacks = ["Pan cakes", "Waflle", "Donut"];
      const drinks = ["Thumsup", "Sprite"];
      const arr = Breakfast.concat(snacks, drinks);
      document.getElementById("para1").innerHTML = arr;
      let string = arr.join(" + ");
      document.getElementById("para2").innerHTML = string;
   </script>
</body>
</html>

In the Output, we can see the first output which is in the form array, later we joined that concatenated array and returned them string format ?

Example 3

Here, we have created one array with integer values and another array with string values. The arrays got concatenated and returned a new array by having elements of both arrays. Now, the new array got joined by join() method and returned as a string.


<!DOCTYPE html>
<html>
   <title> Joining arrays to form string in JavaScript</title>
<head>
   <p id="para1"></p>
   <p id="para2"></p>
</head>
<body>
   <script>
      const num = [45, 99, 83, 54];
      const snacks = ["Pan cakes", "Waflle", "Donut"];
      const arr = num.concat(snacks);
      document.getElementById("para1").innerHTML = arr;
      let string = arr.join(" - ");
      document.getElementById("para2").innerHTML = string;
   </script>
</body>
</html>

In the output, we can see the both the array containing integers and strings got concatenated and returned as string ?

Updated on: 2022-09-22T12:16:03+05:30

310 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements