What is the difference of + operator and concat() method in JavaScript

There is no difference in behavior between the string methods on a primitive and the string methods on an object.

There is a big difference in performance as the primitive versions appear to be much faster in this jsperf (perhaps as much as 100x faster), likely due to interpreter optimizations.

As you can see from this jsperf, the main difference in performance is caused by var str1 = new String("Hello "); instead of var str1 = "Hello ";. The + operator vs. concat() does not make much difference at all. My guess is this is because the JS interpreter is optimizing the string method. But, creating an actual string object isn't as optimized or efficient.

As for the ECMAScript specification, in the ECMAScript spec for +, it explicitly says that if the primitive value of the left operand (lprim) is a string, then return the string that is the result of concatenating ToString(lprim) followed by ToString(rprim).

In the ECMAScript spec for String.prototype.concat(), it says: Let R be the String value consisting of the characters in the previous value of R followed by the characters of ToString(next).

This wording implies that + when given a left operand as a string is going to cast the right operand to a string and call .concat() internally which is exactly what .concat() does.

Obviously if the left operand is not a string, then you would get a different behavior with + as it won't necessarily treat it as a string operation at all.

A situation that it can make a difference whether you have a string object or a string primitive is if you want to add a custom property to a string object, then you need the object form, not the primitive form.

As for when to use + and when to use .concat(), this is a personal coding style choice. Both achieve the same results. I personally prefer using operators when possible as the code just seems simpler to read.

Unless you have a specific reason to make a string object, then you should generally just use primitives.

So, there's really no reason to do this:

var str1 = String("Hello ");
var str2 = String("World!");
document.getElementById("demo").innerHTML = str1.concat(str2);

when this works just fine:

var str1 = "Hello ";
var str2 = "World!";
document.getElementById("demo").innerHTML = str1 + str2;

Here's an example of the only time I know of when you might want/need an explicit string object:

// actual string object will retain custom property
var str1 = new String("Hello");
str1.customProp = "foo";
log(str1.customProp);

// string primitive will not retain custom property
var str2 = "Hello";
str2.customProp = "foo";
log(str2.customProp);

function log(x) {
    document.write(x + "<br>");
}

No difference according to functionality but '+' operator is faster that concat() for performance.

var str1="hello";
var str2="world";
var str3;
var start = new Date().getTime();
for (i = 0; i < 100000; ++i) {
str3=str1+str2;
}
var end = new Date().getTime();
var time = end - start;

print('Execution time using + operator: ' + time);

// USING CONCAT OPERATOR

start = new Date().getTime();
for (i = 0; i < 100000; ++i) {
str3=str1.concat(str2);
}
end = new Date().getTime();
time = end - start;
print('Execution time using CONCAT operator: ' + time);

please run at ideone