Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
228 Views
