Question

119

Why does [] + {} === {} + [] evaluate to true?

rated 0 times [ 125] [ 6] / answers: 1 / hits: 15902 / 8 Years ago, tue, december 13, 2016, 12:00:00

If you open your JS console and type in [] + {} === {} + [] it tells you it's true.

I don't understand why this is. I attempted to look up at how it's parsed.

For [] + {} the + here is the addition operator as operands are both literals. LHS doesn't yield a number through .valueOf() so it performs string concatenation using .toString() on both operands giving us + [object Object]

For {} + [] the {} is an empty code block and is 'ignored', the + operator here is parsed as the unary plus operator, it converts its operand to a Number. Empty arrays converted to a number become 0

So this is appears to be [object Object] === 0 which surely should be false?.

The identity operator checks if the two operands are equal without type conversion. I can't see how this ever coud be true. What part of the story am I missing?

Edit:

I see if you type ({} + []) it parses it as an empty object making the RHS equal to [object Object]. I looked this up and ( ) is the grouping operator. So perhaps this has something to do with this?

This is not a duplicate of What is the explanation for these bizarre JavaScript behaviours mentioned in the 'Wat' talk for CodeMash 2012?. Answer bullet points 1 === 2 should NOT be true.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ellisw

Add To Favorites

Follow

Total Points: 625

Total Questions: 92

Total Answers: 88

Location: Kazakhstan

Member since Mon, Sep 26, 2022

2 Years ago

ellisw questions

1 How to check if event target is contained within an element?

Mon, Aug 23, 21, 00:00, 3 Years ago

1 Jest - one function mocks file for multiple test files

Fri, Nov 20, 20, 00:00, 4 Years ago

1 Electron Forge with react?

Sat, Jun 20, 20, 00:00, 4 Years ago

1 material-ui makeStyles: how to style by tag name?

Tue, Apr 21, 20, 00:00, 4 Years ago

1 Using async-await with node-fetch does not return the response to the calling method

Sun, Mar 22, 20, 00:00, 4 Years ago

View All

answered 8 Years ago piper · Accepted Answer

The second point in this magnificent answer explains what happens when you add together an array and an object.

var result = [] + {};



console.log(result);

console.log(typeof result);

What you get is the string [object Object] because each of the arguments is converted to a string. For an array, that results in calling .join() on it, which in turn, results in an empty string. For Objects, it produces the string [object Object] - adding them together leaves the second string.

The same happens on both sides of the comparison - on the right hand side, the order is different but that does not matter. The result will not be the same as point 3 in the answer, for the difference is that there {} + [] is in the beginning of the line, so {} is interpreted as an empty block. In this situation it will (correctly) be interpreted as a plain object notation). The same casting logic will be performed and it will produce the same string as before: [object Object]

So, in the end, you are comparing [object Object] === [object Object] which returns true.

Note that {} + [] === [] + {} will not produce the same - again, due to point 3 of the linked answer - the first {} will be interpreted as an empty block, so the left hand side becomes +[] which converts the array to a number, hence the result of the comparison will be false. However if you test this expression in the Chrome dev tools you will indeed get true. This is because Chrome will auto-wrap your expression in parentheses which forces the initial {} to be interpreted as an object. Checking {} + [] === [] + {} in Firefox or Node REPL or others should produce the correct false.