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

Question

The plus ( + ) operator and String.concat() method gives the same result.

plus ( + ) operator;

str1 + str2;

String concat() method;

str1.concat(str2);

Addionally, it is written in w3schools ;

But with JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties.

So which way is better to use to combine for either we use on primitives or on String objects in JS, what are the performance advantages and disadvantages between them if there is any?

var firstName = "John"      // String
var y = new String("John"); // with String Object

Here are the example codes which give same results;

function example1 () {
  var str1 = "Hello ";
  var str2 = "World!";
  document.getElementById("demo1").innerHTML += str1 + str2;
}


function example2 () {
  var str1 = "Hello ";
  var str2 = "World!";
  document.getElementById("demo2").innerHTML += str1.concat(str2);
}

function example3 () {
  var str1 = String("Hello ");
  var str2 = String("World!");
  document.getElementById("demo3").innerHTML += str1 + str2;
}

function example4 () {
  var str1 = String("Hello ");
  var str2 = String("World!");
  document.getElementById("demo4").innerHTML += str1.concat(str2);
}

example1();
example2();
example3();
example4();

<p id="demo1">Demo 1: </p>
<p id="demo2">Demo 2: </p>
<p id="demo3">Demo 3: </p>
<p id="demo4">Demo 4: </p>

Answer 1

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>");
}