Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When does JS interpret {} as an empty block instead of an empty object?

Tags:

I was reading the answer to this question (about the "wat" video) and it said:

  1. {}+[]
    This is interpreted as an empty block of code, unary plus and empty array. First part does nothing, array is converted to a comma-separated string of it's elements (empty string for empty array), then to a number (empty string is converted to 0), hence 0.

I am currently learning JS from "The Definitive Guide" so I try to really understand things like that.

My question is, when does JS decide to interpret {} as an empty block of code, instead of an empty object?

Also, there are some inconsistencies between Node.js and Firebug which I would like to understand.

Firebug:

Firebug console output for <code>{}[]</code> and <code>({}[])</code>

Node.js:

Node.js output for <code>{}[]</code> and <code>({}[])</code>

like image 353
Ella Sharakanski Avatar asked Oct 13 '14 19:10

Ella Sharakanski


People also ask

What is an empty object in JavaScript?

Using Object. Object. keys will return an Array, which contains the property names of the object. If the length of the array is 0 , then we know that the object is empty.

Why empty object is true in JavaScript?

There are only seven values that are falsy in JavaScript, and empty objects are not one of them. An empty object is an object that has no properties of its own. You can use the Object.

Does empty object return true JavaScript?

Checking empty object with JavaScriptIt returns true for objects. And we're covered for null and undefined . It will return false and not throw a TypeError .

Is empty array object in JavaScript?

The answer is NO, because an array in JavaScript is an instance of the Array object and typeof would return the type object for it.


1 Answers

Let's look at the language grammar, shall we? Section 12, Statements:

Statement :     Block     VariableStatement     EmptyStatement     ExpressionStatement     ...lots of other stuff... 

That's a very fancy way of saying that a statement can be a block, a variable statement, an empty statement, an expression statement, or lots of other stuff. Notice that the first option there is a 'Block':

Block :     { StatementList(opt) }  StatementList :     Statement     StatementList Statement 

Which is again, a fancy way of saying that a block is a {, optionally followed by a bunch of statements, followed by a }.

And that's what you see in your example: Before the JavaScript parser thinks that what you have could be an object literal (which is defined somewhere under ExpressionStatement, the 4th thing a 'Statement' could be), it first thinks that you have a 'Block'.

Edit: If you want, you can see it live in a JavaScript engine's source code:

  • In V8, Chrome's JavaScript engine, we go into Parser::ParseStatement. The first thing it checks is whether we're on a {, and if it does, parses as block.
  • In SpiderMonkey, Firefox's JavaScript engine, we go from Parser::statement to again see the first check being against a { and parsing it as a block statement.

Regarding your second question, that's been covered to great detail on this question. To summarise in a sentence: Node.js treats your input as if it were an expression (thus it can't be a 'Block'), while Firebug/Chrome dev tools treat it like a 'Statement'.

like image 107
Zirak Avatar answered Oct 12 '22 18:10

Zirak