Why ++[[]][+[]]+[+[]] Evaluates to '10' in JavaScript

The JavaScript expression ++[[]][+[]]+[+[]] evaluates to the string “10” due to JavaScript’s type conversion rules and operator precedence. This seemingly complex expression follows a specific step-by-step evaluation process.

Contents

• Breaking Down the Expression
• Step-by-Step Evaluation Process
• Type Conversion Rules
• Operator Precedence
• Practical Implications

Breaking Down the Expression

The expression ++[[]][+[]]+[+[]] can be divided into three main parts:

1. ++[[]][+[]] - The first operand
2. + - The addition/concatenation operator
3. [+[]] - The second operand

Understanding how each part works is key to understanding the final result.

Step-by-Step Evaluation Process

Part 1: Evaluating [[]]

The expression [[]] creates an array containing one element, which is an empty array:

[[]] // → [ [] ]

Part 2: Evaluating +[]

The unary plus operator + converts its operand to a number. When applied to an empty array:

+[] // → 0

According to the MDN documentation, the unary plus operator “precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn’t already.”

Part 3: Array Indexing [[]][+[]]

Now we have array indexing:

[[]][+[]] // → [][0] → []

The array [[]] has one element at index 0 (the empty array []), so this returns the empty array.

Part 4: Increment Operator ++[[]][+[]]

The increment operator is applied to the result:

++[[]][+[]] // → ++[] → ++0 → 1

The increment operator converts the empty array to a number (0), then increments it by 1, resulting in the number 1.

Part 5: Evaluating [+[]] Again

The second part of the expression is another array:

[+[]] // → [0]

This creates an array containing the number 0.

Type Conversion Rules

The final step involves the addition operator and type conversion:

1 + [0] // → 1 + "0" → "10"

When the addition operator encounters different types, JavaScript applies specific type conversion rules:

1. Both operands are first converted to primitives
2. If either primitive value is a string, string concatenation is performed
3. Otherwise, numeric addition is performed

In this case:

• The number 1 is converted to the string "1"
• The array [0] is converted to the string "0" (via its toString() method)
• String concatenation produces "10"

Operator Precedence

The order of operations follows JavaScript’s operator precedence rules:

1. Array indexing ([]) has higher precedence than unary operators
2. Unary plus (+) is evaluated before increment (++)
3. Increment (++) has higher precedence than addition (+)

This is why the expression is evaluated as ++([[]][+[]]) + [+[]] rather than other possible groupings.

Practical Implications

This expression demonstrates several important JavaScript concepts:

1. Type coercion: JavaScript automatically converts between types
2. Array behavior: Empty arrays convert to 0 in numeric contexts
3. String concatenation: When addition involves strings, concatenation occurs
4. Implicit conversion: Objects and arrays have default string representations

While this expression is primarily a curiosity, understanding these concepts helps avoid unexpected behavior in real code. For example:

// This produces "10", not 11
console.log(1 + [0]); // "10"

// This produces "10", not 2
console.log([1] + [0]); // "10"

The expression ++[[]][+[]]+[+[]] is a great example of how JavaScript’s type conversion rules can produce surprising results when different types are combined.

Sources

1. How does the following piece of expression evaluates to “10” - Stack Overflow
2. Why does ++[[]][+[]]+[+[]] evaluates to 10 - Stack Overflow
3. Why ++[[]][+[]]+[+[]] evaluates to “10” in JavaScript
4. Unary plus (+) - JavaScript | MDN
5. Expressions and operators - JavaScript | MDN
6. JavaScript Unary Operators - JavaScript Tutorial

Conclusion

The expression ++[[]][+[]]+[+[]] evaluates to the string “10” through a series of type conversions:

1. [[]] creates an array containing an empty array
2. +[] converts the empty array to the number 0
3. [[]][+[]] indexes the array to get the empty array
4. ++[[]][+[]] increments the empty array (converting it to 0 first, then to 1)
5. [+[]] creates an array containing the number 0
6. The addition operator performs string concatenation, resulting in "10"

This demonstrates JavaScript’s flexible type conversion system and how different operators interact with various data types. While such expressions are rarely used in practical code, understanding these concepts helps prevent unexpected behavior in everyday JavaScript programming.