Question

Why is it that this code evaluates to:

10 + "10" => "1010"
"10" + 10 => "1010"

and why does it not work like this:

10 + "10" => 20 // the number comes first
"10" + 10 => "1010" // the string comes first   

EDIT:

More specifically, where in the implementation of the interpreter does it do this? Or, how does it do this?

Answer 1

The ECMAScript 262 Specification codifies the JavaScript language (JavaScript is actually the Mozilla implementation of ECMAScript). In any case, things are relatively easy to find in Annotated ES5 which I usually consult.

See 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
   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.