String literal first or second in concatenation?

Question

In JavaScript, is there any circumstance where there is a semantic difference between these two options?

foo.bar + ''

...and...

'' + foo.bar

I would've expected the latter to more reliably coerce the result to a string, but I can't find any discussion of this (after much Googling) nor any example where it seems to matter.

Answer 1

Both are the same.

There is only a difference if there are other + (on the left or the right). In other words:

1 + 1 + ''                          // results in '2'

Is not the same as:

'' + 1 + 1                          // results in '11'

Answer 2

They are the same as others have already mentioned, with additional considerations listed by @Zohaib Ijaz:

var values = [
  undefined,
  null,
  false,
  true,
  0,
  -1,
  1,
  NaN,
  Infinity,
  '',
  '123',
  'abc123',
  '123abc',
  [],
  [0],
  [1],
  {},
  {a: 1},
  function(){}   
];
var foo = {bar: null};

values.forEach(function(value) {
  foo.bar = value;
  
  console.log("foo.bar + '':", foo.bar + '');
  console.log("'' + foo.bar:", '' + foo.bar);
});

However there are significant differences, when you have more than 2 operands as mentioned by @ibrahim mahrir:

var values = [
  undefined,
  null,
  false,
  true,
  0,
  -1,
  1,
  NaN,
  Infinity,
  '',
  '123',
  'abc123',
  '123abc',
  [],
  [0],
  [1],
  {},
  {a: 1},
  function(){}   
];
var foo = {bar: null};

values.forEach(function(value) {
  foo.bar = value;
  
  console.log("foo.bar + '' + foo.bar:", foo.bar + '' + foo.bar);
  console.log("'' + foo.bar + '':", '' + foo.bar + '');
});

Answer 3

If one of the operands is a string, valueOf() or toString() will be called on the other one, so yes they are exactly the same.

12.8.3 of the spec:

 AdditiveExpression + MultiplicativeExpression

1. Let lref be the result of evaluating AdditiveExpression.

2. Let lval be ? GetValue(lref).

3. Let rref be the result of evaluating MultiplicativeExpression.

4. Let rval be ? GetValue(rref).

5. Let lprim be ? ToPrimitive(lval).

6. Let rprim be ? ToPrimitive(rval).

7. If Type(lprim) is String or Type(rprim) is String, then

   a. Let lstr be ? ToString(lprim).

   b. Let rstr be ? ToString(rprim).

   c. Return the String that is the result of concatenating lstr and rstr

Answer 4

Here are few rules taken from here

• If at least one operand is an object, it is converted to a primitive value (string, number or boolean);
• After conversion, if at least one operand is string type, the second operand is converted to string and the concatenation is executed;
• In other case both operands are converted to numbers and arithmetic addition is executed.

Answer 5

No, there is no difference.

If foo.bar is not a primitive value then first valueOf is called on it. If that still does not return a primitive value, toString is called on it. If that still does not return a primitive value, an error is triggered.

In all this, the foo.bar object is not aware in which context valueOf or toString are called. There is no way the object can differentiate between the two cases you mention. It does not even have to be one of those two.

Finally, there is no way to set a trap on the + operator, so you could know its operands.

Here is a demo of how valueOf and toString are called in that order:

const foo = { 
    bar: {
        valueOf() {
            console.log('valueOf');
            return this; // not a primitive value, so now toString will be called.
        },
        toString() {
            console.log('toString');
            return "1";
        }
    }
}

console.log(foo.bar + '');
console.log("====");
console.log('' + foo.bar);