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
How to create a string by joining the elements of an array in JavaScript?
In this tutorial, we will see how to create a string by joining the elements of an array in JavaScript. We will see two different approaches to doing this task. The first approach is using a simple addition operator (+) to add the elements of the array and separator. The second approach is to use the join() method.
Approach 1: Using the Addition Operator (+)
In this approach, we will pass two parameters to the function the array of which elements we have to Join, and the second parameter will be the separator that the user has to give, basically, a separator is a middle element that will come between every element of array value while joining the string it can be space, comma, or any word.
Algorithm
STEP 1 − Create an array called arr with elements. Display the array using the innerHTML property.
STEP 2 − Create a variable called ans to store the resultant string. Initialize it with the first element of the array.
STEP 3 − Define a separator. We define it as a variable with a space.
STEP 4 − Loop over the array elements starting from the index value 1 as we have initialized the 0th element to the string ans. Add the array elements to the string ans using "+" operator.
STEP 5 − Finally display the final string using the innerHTML property.
Our pseudocode for the above algorithm will look something like this −
var arr=["first", "second", "third", "fourth", "fifth"];
var ans=arr[0];
var separate = " ";
for(var i=1;i<arr.length;i++){
ans+=separate+arr[i];
}
document.getElementById('writeHere').innerHTML=ans
We have an array with some value, separate is variable which will take separator as input from the user.
We checked if the user didn’t enter any separator, then by default, we will give out the separator as blank space.
Example
We have taken ans variable with 0th array element as for the first element there will not be any separator, then using a loop from 1st index which is 2nd value of array we started iteration and parallelly joining all the array elements into the ans variable. Let’s embed our function code to HTML.
<html> <body> <p>arr=["Tutorials", "Point", "Simply", "Easy", "Learning"]</p> <input type="text" placeholder="Seperator" id="separate" /> <input type="button" value="Join" onclick="joinTheArr()" id="JoinBtn"/> <p id="writeHere">After joning array is:..</p> <script> function joinTheArr(){ var arr=["Tutorials", "Point", "Simply", "Easy", "Learning"]; var separate=document.getElementById("separate").value if(!separate)separate=" " console.log(separate) var ans=arr[0]; for(var i=1;i<arr.length;i++){ ans+=separate+arr[i]; } document.getElementById('writeHere').innerHTML=ans } </script> </body> </html>
Approach 2: Using the join() Method
The join() method converts every element of the array to a string and then it joins all the strings using a separator which the user has to define and it will come in between every array element which has been converted to a string, after all, it will return an array as a string. The join() doesn’t modify the original array.
Example
In the below example, we use the join() method to concatenate the an array element with the separator.
<!DOCTYPE html> <html> <body> <p>arr=["first", "second", "third", "fourth", "fifth"]</p> <input type="text" placeholder="Seperator" id="separate" /> <input type="button" value="Join" onclick="joinTheArr()" id="JoinBtn"/> <p id="writeHere">After joning array is:<br><br></p> <script> function joinTheArr(){ var arr=["first", "second", "third", "fourth", "fifth"]; var separate=document.getElementById("separate").value if(!separate) separate=" "; arr=arr.join(separate); document.getElementById('writeHere').innerHTML+=arr } </script> </body> </html>
The idea here is we use join arr.join(separate) and assigned it back to the array as join returns array as string.
So, this is how we can create a string by joining array elements.
463 Views
