JavaScript Array Join : How to Join Multiple Elements of an Array into a String

javascript array joinJavaScript is the language that makes your web page interactive. With JavaScript, you can create responsive web pages that doesn’t take very long to load but are still rich in content. JavaScript reduces the load on your web server, as large amounts of data don’t have to be downloaded constantly from it to the client system. At present, almost all the top websites in the world make liberal use of JavaScript. In fact, data suggests that JavaScript may well be the most popular programming language in the world. JavaScript is mostly used to create interactive forms, polls and quizzes – however, that’s not all it can do. If you use Gmail, for example, and see a new email pop into your mailbox without you having to refresh the page, know that this nifty service is provided to you through JavaScript.

If you make liberal use of JavaScript when building a website, a surfer’s browser doesn’t have to reload pages as often. This translates into a better user experience for the surfer and more hits for your website in the long run. If you’re a programming newbie, you might be a little intimidated at the prospect of learning JavaScript. You don’t have to be, really. If you’re familiar with the basics of the language, you can just download and install a prewritten plugin and use it on your website. If you have some programming experience and know a language like Java or C++, JavaScript will be even easier to learn for you.

In this tutorial, we’re going to show you how the join () method can be used to combine the elements of an array in a string. Before that, we’ll also take a look at how you can create arrays in JavaScript.  If you’re unfamiliar with JavaScript methods, you can sign up for our introductory JavaScript course to learn more about them.

Creating an Array in JavaScript

You use an array when you need a single variable to store multiple data elements. The syntax to create an array in JavaScript is as follows:

var array_name = [element1, element2…];

Let’s create a couple of simple arrays that we can use later in our program:

var colors = [“Blue”, “Orange”, “Red”, “Yellow”, “Black”];
var shapes = [“Circle”, “Square”, “Triange”, “Rectangle”];

Take this course to learn more about using arrays in JavaScript.

The JavaScript Array join () Method

You can use the join () method to combine the elements of an array into a string. The created string will then be returned to you. The syntax for the join method is as follows:

array_name.join (separator)

Here, the array_name will be the name of the array containing the elements you want to join. The separator can be anything you want, like a comma, a semicolon, a punctuation mark or even a word.

With the join method, the elements of an array will be turned into a string. If you joined the elements of the “colors” array we wrote earlier, for example, and used a comma (,) as a separator, this would be the result:

colors.join (,)
Blue, Orange, Red, Yellow, Black

If you did the same for the shapes array, this would be the result:

shapes.join (,)
Circle, Square, Triangle, Rectangle

Example Program 1

Let’s write a full, working example to help you understand the concept better:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to join the array elements into a string.</p>
<button onclick="exampleFunction()">Try it</button>
<p id="abc"></p>
<script>
function exampleFunction() {
var colors = ["Blue", "Orange", "Red", "Yellow", “Black”];
var comb = document.getElementById("abc");
comb.innerHTML = colors.join();
}
</script>
</body>
</html>

Output:

Blue, Orange, Red, Yellow, Black

In this program, we’ve created a simple clickable button that you can embed on your webpage. When you click on the button, it will call the function “exampleFunction”. The “exampleFunction” contains the code for the join () method. If you notice, we haven’t specified a separator parameter. If you don’t specify a parameter, a comma (,) is used by default. The variable “comb” will be used to store the “joined” elements of the array.

If you want to know more about how to write working JavaScript programs and execute them in your browser, sign up for our introductory JavaScript course. We cover all the basics of the language, include how to write and test your own programs.

Example Program 2

You can use a different separator than the default comma. You can use an entire word, for example:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to join the array elements into a string.</p>
<button onclick="exampleFunction()">Try it</button>
<p id="abc"></p>
<script>
function exampleFunction() {
var shapes = [“Circle”, “Square”, “Triange”, “Rectangle”];
var comb = document.getElementById("abc");
comb.innerHTML = shapes.join(or);
}
</script>
</body>
</html>

Output:

Circle or Square or Triangle or Rectangle

This example is similar to the one we gave previously, except that this time we specified “or” as a separator parameter. Because of this, the elements of the “shapes” array were separated by “or”.

The split () Method vs the join () Method

The split () method is the opposite of the join method (). With the split method (), you can take a string, split its elements and store them in an array. The syntax for the split () method is as follows:

string.split (separator, limit)

For example, let’s say you had the following string:

var abc = “I like programming”;

Then, if you use the split () method on this string, you would get the following result:

var spli = abc.split (“ “);
I, like, programming

If you understand one method, it should be simple enough to grasp the other. Remember, the join () method is used to combine the elements of an array into a string, while the split () method is used to combine the elements of a string into an array. You could try creating your own arrays and using the join method to combine their elements. If you need more information about arrays and strings, or other JavaScript basics, take a look at this JavaScript course to get a better understanding.