Today I will explain the string concatenation in JS and a comparison of this using ‘+’ operator and array.join in terms of ease of use and performance.
Join those bits and pieces into one string.
//This is a better way when you have smaller string processing to //do.
var myBoringString = 'A small string '+' concatenates with a bigger string '+' is NOT cool!';
//The below way is a better way when you have huge string processing //to do.
//Here's why??? 1)Performance is better (in most browsers). 2) Makes //them easy to process and do calculations. 3) Makes you look cool.
var myAwesomeString = ['A small string','A Big String which is really really big','Another Cool string that is so big that the big appears small and is the biggest'].join(' ');
Let’s do some comparison between these 2 methods in the following browsers.
- ** That’s right, I intentionally ignored IE.
Okay… Let’s get started.
Initial setup: prepare sufficiently large data and run the test.
I will loop through this array and concatenate the string using both the methods. Compare the time in each of the above mentioned browsers.
Enough of story telling, let’s get started.
Here is the comparison report.
As you can see, Array.join works faster on a huge data set, except in Chrome where String concat works like a charm.
I am surprised that in Chrome, string concat is almost 100% faster than Array.join. Now this has my attention for more study. That shall be my next blog too!
For all the people who are not interested in the details of the test results, this is it! You can move on to your next blog. For those interesting bunch of folks, read on… check the comparison yourself!
String Concatenation using ‘+’
Firefox (version 32)
Firefox took 1 second 741 milliseconds to concat 10 million random strings.
Chrome ( Version 37.0.2062.120)
Chrome took a whopping 542 milliseconds (0.5 seconds) to concat 10 million random strings.
Safari (Version 7.0.2)
Safari took 3.899 seconds to concat them.
Opera (Version 24)
Opera took 1.304 seconds for concat 10 million random strings.
String Concatenation using array.join
Firefox took 0.754 seconds to join 10 million strings using Array.join.
Chrome took 1.096 seconds to join 10 million strings.
Safari being slow, took 2.621 seconds to do the job.
The decent opera took 1.123 seconds to concat.
After the comparison, if you are still reading this, here is the conclusion of my test.
Browsers are much faster when concat is done using array.join for huge data sets (except Chrome). Also, array.join makes you look cool and makes your code more flexible and maintainable. You get more handle over your data, to manupulate and to search and reach it.
My vote is for Array.join!