How is alert(++[[]][+[]]+[+[]]); calculated to 0?

86 views Asked by At

How is alert(++[[]][+[]]+[+[]]); calculated to 0? What is this process called so that I can read more about this

1

There are 1 answers

2
JJWesterkamp On BEST ANSWER

The expression ++[[]][+[]]+[+[]] will actually return the string '10'. Let's break it down:

Step 1: +[]

This is an unary plus operator followed by an empty array literal. The unary plus tries to convert the value that follows it into an integer. In this case the value is an array:

+[]; // 0

// This is identical:
Number([]); // 0

The returned value is equivalent to calling [].toString() and then giving that result to Number(). [].toString() will return an empty string (''), and Number('') will return 0.

Array.prototype.toString

The Array object overrides the toString method of Object. For Array objects, the toString method joins the array and returns one string containing each array element separated by commas.

Number.

In a non-constructor context (i.e., without the new operator), Number can be used to perform a type conversion.

So, when we change occurences of +[] to 0 in the source, we get:

++[[]][0] + [0]

Step 2: [[]][0]

This step is a simple array member access operation: An array with one nested (empty) array is first defined, and then that first nested array is accessed with [0], which simply returns []. So, if we replace this part of the expression, we get:

++[] + [0]

Step 3: ++[]

The ++ <value> operator first tries to convert <value> to a number, and then increments that number by 1. The procedure for converting the array to a number in this example occurs the same way as +[] was in step 1: [] is first converted to a string ('' in this case, because the array is empty), and then converted to a number, which again returns 0. Lastly, 0 is incremented by 1, which returns 1. So if we replace this part of the expression, we get:

1 + [0]

Step 4: 1 + [0]

This is the weird part of the story. You would expect this to evaluate to the integer 1, given the information above, but actually it will evaluate to a string '10'. This is because of the 2 steps in the example above for the type conversions of arrays (first to string, then to number). These 2 steps were required because the arrays were always operands of arithmetic operators (i.e. math calculations). The + operator however can serve as both an arithmetic + operator or a string concatenation operator, and the latter always has precedence.

So as soon as [0] is converted to a string, both operands given to the + operator will be converted to a string, because one operand is already a string. If we now replace the expression with converted operands we get the final step in evaluating the expression:

'1' + '0'; // '10'