If you’ve ever encountered the expression console.log({} + []) in JavaScript, you might have been confused by the result: "[object Object]". The combination of {} (an empty object) and [] (an empty array) doesn’t seem intuitive, but there’s a good explanation for why JavaScript behaves this way. Let’s dive into the reasoning behind this seemingly strange output.

Understand the expression: { } + []

At first glance, you might think that this expression is trying to add an empty object to an empty array. However, JavaScript evaluates it in a different way due to its parsing rules and operator precedence.

1. Object Literal vs. Code Block: The first issue arises from the fact that the {} syntax can be interpreted in two different ways in JavaScript:
   • Object literal: When used in a non-expression context, {} represents an empty object.
   • Code block: When used in an expression context, {} is treated as an empty block of code (a no-op, i.e., a block that does nothing).
   In the expression {} + [], JavaScript interprets the {} as an empty code block and not as an object literal. As a result, the + [] part is what gets evaluated next.
2. String Conversion: After treating {} as an empty block, the + operator is then applied to the [] (empty array). When the + operator is used in JavaScript, it triggers type coercion, attempting to convert the operands into strings.
   • Empty array []: When an empty array is converted to a string, it becomes an empty string "".
   • Empty object {} (interpreted as code block): Now, the {} is evaluated and converted to a string. In JavaScript, objects are automatically converted to the string "[object Object]" when used in a string context.
3. The Result of the Expression: With this in mind, the expression {} + [] is effectively treated as:

{} + [] // interpreted as:
{} // empty block (no value)
[] // empty array is converted to an empty string

The result is the string "[object Object]", which is the string representation of an object in JavaScript.

Why Does console.log({} + []) Output “[object Object]”?

When console.log({} + []) is executed, here’s what happens:

• {} is interpreted as an empty block of code (not an object).
• + [] triggers the conversion of the array [] to an empty string "".
• Finally, JavaScript attempts to concatenate the results, but because the empty block {} is converted to "[object Object]" by the engine, the result is "[object Object]".

So, the output of console.log({} + []) is "[object Object]" — not because you’re adding an object to an array, but because of how JavaScript handles expression evaluation and type coercion.

A More Readable Version of the Code

If you want to avoid this confusion, it’s best to explicitly use the object literal syntax in a way that JavaScript can interpret it correctly. If your intention is to log an object and an array, here’s how you can write it

console.log({} + []);  // Output: "[object Object]"

However, to properly log an empty object and an empty array together, you could separate them in the console.log statement, like this:

console.log({});  // Output: "{}"
console.log([]);   // Output: "[]"

Alternatively, if you want to concatenate the object and array values as strings, you could convert both explicitly:

console.log(JSON.stringify({}) + JSON.stringify([]));  // Output: "{}[]"

Conclusion

The expression console.log({} + []) in JavaScript is a result of the way JavaScript parses the {} as an empty block and applies type coercion. It’s a good reminder of how JavaScript interprets syntax and handles type conversions, and why being explicit with your code can help avoid confusion.

So, while it may look like adding an object to an array, JavaScript evaluates the expression in a completely different way, ultimately resulting in "[object Object]".