Overview

String.prototype.concat() is a method on the String.prototype object which itself represents the string prototype object in JavaScript. This basically means you can use the concat() function on string values in JavaScript. There are many predefined functions like this one that are part of the JavaScript language created to make it easier for developers to work with and do logical operations with the language. As the name implies the concat() function concatenates, or joins, two or more strings together.

Syntax

Let’s take a look at the basic syntax for using the concat() function in JavaScript. First, we will need some string value to work with since this is a function defined on string objects:

var someString = “Hello”;

The variable someString here in this code will be representing the string value Hello. To add additional string(s) of text to it, we will use the concat() function like so:

console.log(someString.concat(“ World”));  /* Hello World */
console.log(someString);  /* Hello */

You can see that we are using dot notation to attach the concat() function to the someString variable and we have passed in one parameter into the concat() function with the string value of ` World. We’ve placed this whole statement into the console.log() function so that we would be able to see the resulting string that is printed in the console, which would be Hello World. This is the most basic usage of the concat() function. It is important to note that this Hello World string is what is returned after executing this function. The original variable of someString is unchanged during this process and will still print out just Hello if it is passed into the console.log()` function as shown above.

Parameters

In the syntax section example you have noticed we used the value ` World to concatenate on the end of the someString variable. This is an example of using one parameter with the concat() function. For the concate() function to work, it requires at least one parameter. The concat()` function can accept any number of parameters thereafter though, all being optional. Here is an example of how that might look like when passing 3 parameters:

See the Pen `concat()` Multiple Parameter Example by Brian Hernandez (@brianhernandez) on CodePen.

In this example we can see how we are passing in the strings ` brown fox, jumped over and the lazy dog! here and they are all getting appended to the end of stringStart` one after the other in the order that they come in.

The concat() function is meant for concatenating strings but we could also use it to concatenate other values, or at least pass in other value types and concatenate their string value versions to a string. Let’s look at this interesting example where we try to concatenate different kinds of value types onto a string:

See the Pen `concat()` Exampole With Multiple Parameter Types by Brian Hernandez (@brianhernandez) on CodePen.

In this example we are starting out with a simple string of I like the following foods:. Notice when we try to add the array of foods to the end of the stringStart string variable, we actually are able to – although the formatting isn’t quite nice looking. In this part of the code, JavaScript was smart enough to convert the foods array into its string equivalent and have that be used by the concat() function.
Continuing, we are also able to pass in the number values of 1, 13, 7, and 0. However, without any proper formatting in between the numbers, the concat() function simply converts each number to its string equivalent and tacks it on to the end of the stringStart making it look like we like the numbers 1,137 and 0 and not the four distinct separate numbers 1, 13, 7 and 0.

Finally, when we try to also append some objects to the end of our sentence, we see some funny looking results. Those objects are converted to their string equivalents, but they don’t make much sense to us since these strings are really just descriptions of the value type that was passed in (an object) and from what parent object they are derived from (either the object Math objects).

So, sometimes it may be useful and convenient to pass in a value type other than a string and sometimes it doesn’t make sense to. It is important to note whatever values that are passed into the concat() function, the returned value will always be a string.

Special Notes

A real world example of how the concat() function might be used is for building up parts of HTML code to be inserted into the DOM at a later point. We were doing a bit of this in the last example in the parameters section but lets look at a specific case of how this could be done:

See the Pen Typical Concatenation Example In The World by Brian Hernandez (@brianhernandez) on CodePen.

In this example, we are simulating some sort of logic work being done by the /* Do Some Logic */ comments. You can imagine that before some content is built up to be inserted into the document, depending on what it is, it may need some logic processing to derive it first. Once the content is created, we can concatenate them onto the <div> we first started building at the top of the code. For this example our results are just simple poem verses. But you can see how the code is being built up over time with each additional <p> tag that is created along with its’ content. They are finally all brought together with the document.write(verse4); line of code that has along with it all the other concatenated strings of text that have been added to the divStart string variable. This type of logical pattern of building up HTML code by adding different parts to it in pieces is then adding it to the DOM is quite common.

We’ve talked a lot about the concat() function but in actuality, this is a rather expensive function to run when compared to its alternative, the simple + assignment operator. The + operator can be used in many places we have talked about in the examples above and it would actually be a better choice because it takes up much less processing resources than the concat() function.

Browser Compatibility

The concat() function is supported on all browsers as it is part of the JavaScript language.