Nerd For Tech
Published in

Nerd For Tech

Basics of Javascript · String · concat() (method)

This article is a transcript of my free youtube series about basics of web development. If you prefer watching over reading, feel free to visit my channel “Dev Newbs”.

Hello my fellow newbs. Another day, another String method to cover. Today it is going to be a method that helps to put things together. Introducing the concat() method.

The concat() method joins two or more strings together. The result of the method is a completely new string that does not alter existing strings used as arguments for the method.

It means that changes to the original string or the returned string don’t affect each other.

Let’s see how to concatenate two or more strings together in the first example .

let endOfSentence = "newbs!";
let conStr = "Hello ".concat(endOfSentence);
conStr // Hello newbs!let str01 = "My ";
let str03 = "is ";
let str04 = "Jacob!";
let resultStr = str01.concat("name ", str03, str04, " 🙂");
resultStr // My name is Jacob! 🙂

As we can see in the example, concat does not differentiate between string in variable and expression using quotes. They can be used interchangeably. Also emojis and special characters are no issue at all.

To concatenate more than one string, you just add more strings as arguments of method. And that’s it.

If the arguments are not of the type string, they will be converted to string values before concatenating.

let prefix = "Concat can deal with: ";
let ctr = prefix.concat(45, " - ", true," - ", ["a", 147.5, false]);
ctr // Concat can deal with: 45 - true - a,147.5,false

Concat() can handle any numeric values, booleans and even arrays.

There are, however, some special cases that are worth mentioning. As always, it is better to see once than hear a hundred times, so here is another example.

"".concat({})            // [object Object]
"".concat([]) // ""
"".concat(null) // null
"".concat(NaN) // NaN
"".concat(undefined) // undefined
"".concat(false) // true
"".concat(1, 1) // 11

Concat() can not convert an object, so it just replaces the object with string stating the object was provided. Empty array is substituted with empty string, constants like null, NaN or undefined are converted to string without any issues like with the cases in previous example.

Concat() is not the only option for combining strings together. Actually there is something even better, that you already know. You can use the assignment operator — yes, that is what they call the plus sign.

Have a look at comparison between concat() method and assignment operator in the next example.

// concat
let i = 3;
let s1 = "Number ".concat(i," times 2 equals ");
let s2 = 2*i;
let r = s1.concat(s2);
console.log(r); // Number 3 times 2 equals 6
// assignment operators
let i = 3;
let s1 = "Number " + i + " times 2 equals ";
let s2 = 2*i;
let r = s1 + s2;
console.log(r); // Number 3 times 2 equals 6

Okay, so concat() can do basically the same thing. So which is better to use? Well, apart from assignment operator being easier to write, it is strongly recommended that we use it instead of the concat() method because of the performance issues.

On average assignment operator is twice as fast as concat() method. It is because of overhead related to concat() being a method of a String object — so effectively it being function.

If you don’t believe me, have a look at the last example I prepared for you. Just like in the previous example, we use both concat() and plus operator trying to achieve the same result string. But if we just ran the commands once, the difference in duration would be too small to compare. Therefore, we will run the same set of operations one million times for each option and we get the difference by subtracting timestamp before starting from timestamp after finishing the million iterations. We output the duration for each option afterwards.

let startTime = new Date().getTime();
for(let i = 0; i < 1000000; i++){
let str1 = "Number ".concat(i," times 2 is ");
let str2 = 2*i;
let resStr = str1.concat(str2);
let endTime = new Date().getTime();
endTime - startTime // for example 239
let startTime2 = new Date().getTime();
for(let i = 0; i < 1000000; i++){
let str1 = "Number " + i + " times 2 is ";
let str2 = 2*i;
let resStr = str1 + str2;
let endTime2 = new Date().getTime();
endTime2 - startTime2 // for example 95

So just like that, we can see that assignment is indeed roughly twice as fast. It won’t make a difference in single executions, but in real life, you might do some complex string modifications on a large set of data and then it will make a great difference. So best to keep this in mind for the future.

As always thank you very much for your time and I hope to see you soon in the next method’s article.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store