Javascript Concatenation: A Comparison


Javascript is an awesome language, until it is not so awesome. Having a small, pretty and neat code is as important as adding comments in your otherwise under-commented code.

Having said that, the piece of code that seems most cluttered and filthy (yes, filthy is the word) is string concat! Even if the strings are in variables or the strings are directly concatanated using a ‘+’ or a ‘||’ or a ‘.’(depending upon the language used). I will stick to Javascript for now.

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.

  1. Firefox
  2. Safari
  3. Chrome
  4. Opera
  • ** That’s right, I intentionally ignored IE.

Okay… Let’s get started.

Initial setup: prepare sufficiently large data and run the test.

I used this jsfiddle to generate 10 Million random strings and store it in an array. This fiddle joins the strings using array.join and this uses ‘+’ operator.

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.

All times in seconds

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

Firefox took 0.754 seconds to join 10 million strings using Array.join.

Chrome


Chrome took 1.096 seconds to join 10 million strings.

Safari

Safari being slow, took 2.621 seconds to do the job.

Opera

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!

-Harsha

Show your support

Clapping shows how much you appreciated Harsha Bhat’s story.