Question

I’ve seen this pretty funny screencast yesterday about some oddities in languages like Ruby and Javascript and the guy shows that:

[] + [] -> ""  // returns empty string

not very obvious…

I’ve decided to go to the ECMAscript language specification to get more info. I’ve started with the + operator implementation (p.75) which says:

11.6.1 The Addition operator ( + )

The addition operator either performs string concatenation or numeric addition.
The production AdditiveExpression : AdditiveExpression + MultiplicativeExpression is evaluated as follows:
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. Return the String that is the result of concatenating ToString(lprim) followed by ToString(rprim)
8. Return the result of applying the addition operation to ToNumber(lprim) and ToNumber(rprim). See the Note below 11.6.3.

NOTE1 No hint is provided in the calls to ToPrimitive in steps 5 and 6. All native ECMAScript objects except Date objects handle the absence of a hint as if the hint Number were given; Date objects handle the absence of a hint as if the hint String were given. Host objects may handle the absence of a hint in some other manner.

NOTE 2 Step 7 differs from step 3 of the comparison algorithm for the relational operators (11.8.5), by using the logical-or operation instead of the logical-and operation.

My guess was that the point 7 was reached in some way through different evaluations/conversions as described before but I cannot figure out what is really happenning…

Can someone provide a much straightforward explanation for this ?

---

I’m willing to understand all this a bit better in order to try to answer why:

[] + {} -> [object Object]
{} + [] -> 0

Answer 1

1. Let lprim be ToPrimitive(lval).
2. Let rprim be ToPrimitive(rval).

Since no hint is provided to ToPrimitive:

When the [[DefaultValue]] internal method of O is called with no
hint, then it behaves as if the hint were Number, unless O is a Date
object (see 15.9.6), in which case it behaves as if the hint were
String.

So it’s same as calling with a Number hint:

When the [[DefaultValue]] internal method of O is called with hint Number, the following steps are taken:
1. Let valueOf be the result of calling the [[Get]] internal method of object O with argument "valueOf".
2. If IsCallable(valueOf) is true then, a. Let val be the result of calling the [[Call]] internal method of valueOf, with O as the this value and  an empty argument list. b. If val is a primitive value, return val.
3. Let toString be the result of calling the [[Get]] internal method of object O with argument "toString".
4. If IsCallable(toString) is true then, a. Let str be the result of calling the [[Call]] internal method of toString, with O as the this value and  an empty argument list. b. If str is a primitive value, return str.
5. Throw a TypeError exception.

Since the return value of [].valueOf() is not a primitive, it goes to [].toString() which returns "".

This same applies for object objects, except the .toString of an object returns [object Object] while .toString of an array returns .join(",")

---

{} + []

The {} is not treated as an object here but as an empty block. So the code that runs is:

{}
+[]; //Same as +[] ( Number([]) ) which is 0

To resolve the ambiguity and get normal result from {} + [] use

({}) + [] or ({} + [])

Funny code:

{} ! [] //false
({}) ! [] //SyntaxError