String Concatenation in JavaScript

In this blog, let us look at how one can achieve string concatenation & different methods to do it through examples of each type.

Table of Contents

  • Using the concat() method
  • Using the + operator
  • Using the array join() method
  • Using the template literal
  • Conclusion
  • Other Related Concepts

Using the concat() method

As the name suggests, this method joins or merges two strings. This method does not alter the input/given strings, instead, it returns a new string that has both the input strings concatenated.

Syntax: 
string.concat(string1, string2, ..., stringN);

Here, the parameters string1, string2, ..., stringN are the strings that to be concatenated.

Example: 
var str1 = "Example of ";
var str2 = "Javascript ";
var str3 = "String Concatenation";
var res = str1.concat(str2, str3);
console.log(res);

//Output: Example of Javascript String Concatenation

One downside of using concat() method is that the passed parameter must certainly be a string. Non-string parameters can be passed to this method but it would throw a TypeError if the passed string == null. Also, strings in JavaScript are immutable, so concat() doesn't modify the string in place.

Using the + operator

The + operator is the same operator we use to add 2 numbers. It can be used to concatenate strings too in JavaScript.

Syntax: 
let str = 'Hello';
str += ' ';
str += 'World';

//Output: Hello World

One can also concat strings using the + operator using the shorthand += operator


let str = 'Hello';
str += ' ';
str += 'World';

//Output: Hello World


Using the array join() method

The join() method is used to concatenate all the elements of an array into a string. The elements will be separated by a specified separator. When no separator is specified, the default separator is the comma (,). The array join() method does not alter the original array

Syntax
array.join(separator)

Here the Separator is an optional parameter

Example: 
var arry = ["JavaScript", "String", "Concatenate"];
var finalString = arry.join();
console.log(finalString); 

//Output: JavaScript,String,Concatenate

Using the template literal

Template literals are string literals allowing embedded expressions. Using these template literals one can also use multi-line strings and string interpolation features with them.

Syntax
Let expression = 'String1'
`string text ${expression} string text

Example
let str1 = 'Javascript';
let str2 = 'String';
let str3 = 'Concatenate';

let strJoined = `${str1} ${str2} ${str3}`;

console.log(strJoined);
//Output: Javascript String Concatenate

Conclusion

If we look at the browser support, The concat() and join() methods are supported by all the modern browsers. Now the main question is, which one is the best method to use? Well, to answer this question, these methods work differently on different browsers. For example, on Chrome, standard string appends are faster than array joins but on Firefox, it is vice-versa. Do look at this(https://www.sitepoint.com/javascript-fast-string-concatenation/) blog for detailed performance metrics.