Inconsistency in JS console when adding arrays and objects

Question

I don't want to ask why [] + [] gives you empty string, or so on, as we can't change it. And the reason is just a design of the language.

My question is about following inconsistency, noticed in Chrome and FF Firebug JS consoles:

{} + []; // outputs 0
console.log({} + []); // outputs [object Object]
var c = {} + [];
console.log(c); // outputs [object Object]

I understand that expression returns a value, and this is what you see in console output. But why this return value changes, when assigned to a variable or output using console.log()?

Does it mean that mentioned consoles are buggy?

Is there any better explanation then stating that this is the way it's done?

Why not remove the cases where every place gives the same output? It’s just clutter. — Andrew Marshall
– Andrew Marshall, Commented May 15, 2013 at 1:29
possible duplicate of What is the explanation for these bizarre JavaScript behaviours mentioned in the 'Wat' talk for CodeMash 2012? — Bergi
– Bergi, Commented May 15, 2013 at 2:22
@Bergi you're right - they touch this very same issue. Thanks for posting this link! — Karol
– Karol, Commented May 16, 2013 at 2:25

Qantas 94 Heavy · Accepted Answer · 2013-05-15 02:19:51Z

4

In your first example, it is just a block, so it is equivalent to running this code (the plus in front of the array literal converts it to a number):

{};
+[]; // 0

However, in your console.log code, it is considered an expression, so it is in fact an object literal. You can only pass expressions to functions, so this is the same.

function a(b) {return b;}
a({}+[]); // "[object Object]"

The addition operation converts them to a string, so that's why you get "[object Object]".

edited May 15, 2013 at 2:19

answered May 15, 2013 at 1:30

Qantas 94 Heavy

16k31 gold badges74 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bergi Over a year ago

Instead of that identity function a simple grouping operator would've been enough: ({}+[]) ;-)

Qantas 94 Heavy Over a year ago

@Bergi: it was to prove the point that when passing arguments to a function, they are passed as expressions - just like the console.log() example.

Andrew Marshall · Accepted Answer · 2013-05-15 01:32:41Z

3

It has nothing to do with console.log().

In {} + [] the {} is parsed as a block, whereas in the second two cases, it is parsed as an object as a part of an expression.

This is made evident by the fact that, console.log() or not, var a = {} + [] sets a to an object.

You can simplify the second two cases even further by simply adding parenthesis (which makes it an expression):

({} + [])  //=> "[object Object]"

answered May 15, 2013 at 1:32

Andrew Marshall

97.3k20 gold badges228 silver badges217 bronze badges

1 Comment

Karol Over a year ago

This code convinced me the most: ({} + []). It's indeed a block. Thanks!

Collectives™ on Stack Overflow

Inconsistency in JS console when adding arrays and objects

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related