Why isn't a semi-colon inserted after this assignment of an object literal?

user_247696 0
Viewed 95

Take this Javascript code:

foobar = {}
["one", "two"].forEach(item => {
  console.log(item)
})

If you run this code in the browser or in Node, you get this error:

hi.js:2
["one", "two"].forEach(item => {
               ^

TypeError: Cannot read property 'forEach' of undefined

However, if you add a semi-colon manually at the end of the first line foobar = {};, you no longer get this error, instead you get the expected output of one and two.

I know Javascript has automatic semi-colon insertion, and I know that many people recommend to always use semi-colons in order to avoid issues like this. My question is specifically about this case: why wasn't a semi-colon automatically inserted at the end of the first line? An object literal, followed by an array literal, isn't valid Javascript syntax, is it? Let me see:

foobar = {} ["one", "two"];
console.log(foobar);

This actually prints undefined without throwing an error! I did not expect that!

So I guess my real question is: why is an object literal, followed by an array literal, in an assignment, considered a syntactically correct Javascript line, and what is it doing?

syntax javascript
2 Answers

In parser view, when you are not adding a ;, the parser will be looking at it as:

{}["one", "two"]

An empty object's index, which is not available. So it technically is a Reference Error, as it doesn't exist or undefined. So effectively, this gets interpreted as:

undefined.forEach(...)
user_83629080

The parser thinks you mean:

foobar.two // foobar['two'] = foobar.two

In Action:

foobar = {one:1,two:2}
["one", "two"] // returns 2

Think of it like this:

obj = {};
obj.foo = 1;
obj['foo']; // equals 1
obj;['foo']; // equals obj {foo:1}, ['foo']
user_24603520
Related