difference between {} and function(){}

Question

I thought these were equivalent.

var __Panel = {
 this.header = null;
};
var __Panel = function() {
 this.header = null;
};

The first one gives a compiler error "Expected identifier or string" for this, and "Expected ','" for ;.

Can someone clarify this a little for me?

• Felix Kling: I think you should spend some more time with the MDN JavaScript Guide. The object literal syntax is not at all related to the function syntax.
• Aprillion: why would you think these were equivalent?!? is there any book or webpage in circulation that says so?
• Travis J: @FelixKling - I am working on implementing a factory design pattern in javascript and got a little caught up here with defining my object in a more general way and just ended up a little spun around. I have used both definitions before but I am just off today I guess.
• CrayonViolent: to be fair, questions involving symbols are kind of hard to search
• Travis J: @FelixKling - I am reading through that MDN link, and it is very good! Thanks!

Answer 1

{} is used to define an object, and function(){} is used to define a function.

Thos body inside of {} must be a series of comma-separated key: value pairs, like this:

var man = {
 age: 24,
 height: 6,
 occupation: "programmer"
};

Your example doesn't work for three reasons. First, this.header is not a valid key because it contains a dot, : rather than = is the token used to separate keys from the values, and , is used instead of ; to delimit key-value pairs.

• Pointy: Right; they're not even close to being equivalent.
• lbstr: I think its important to note that they might be using __Panel to create instances of __Panel. For example: var myPanel = new __Panel(). The keyword this would actually mean something in the second case, but not the first.
• zzzzBov: also, {} creates an object instance, and whatever var is set to function () {} would need to be called with new before an instance is created.
• Felix Kling: Calling new __Panel() where __Panel is an object (and not a function) would generate an error. The syntax is just not valid.
• Travis J: @lbstr - Exactly what I was failing at.

Answer 2

This one was interesting to me:

js> var p = { this.header = null; };
js: "<stdin>", line 11: invalid property id
js: var p = { this.header = null; };
js: ..............^
js: "<stdin>", line 11: syntax error
js: var p = { this.header = null; };
js: ..............................^

Pleonastic explanation of this follows:

It is rhino suggesting the answer: the this.header text is going to be interpreted as a property id, and as property id, it is not valid. So, you learn { } is an object that "contains" properties, and properties name can't look like this.header. You can go further and check the syntax for an "object"; it looks simply as { propertyId1 : value1, propertyId2 : value2, ...}.

js> var p = { header:0, doit: function(){this.header=null;} };

This is accepted, in fact the "object syntax" is respected; we defined an object with two property, header holding the integer 0, and doit, holding a function.

Now you can wonder why there {this.header=null;} is accepted; it is since you have not to confuse the syntax of an object with the usage of the {} to "delimit" a "block" of code, in this case "containing" the function itself, its code. Those {} do not represent the same thing "bare" {} represent, and this is made clear by the presence of function() before them.

js> p.header;
0

This shows that the property header holds 0, a plain simple obvious fact.

js> p.doit();

This executes the function held in the property doit. What we expect it happens?. This question descends from asking what this is.

js> p.header;
null

When we check again the content of the property header, we see it is modified to null. This means that this in the function in the property doit refers to the object "containing" the property, the object p itself.

The original, deleted, community wiki post was:

This one was interesting to me:

js> var p = { this.header = null; };
js: "<stdin>", line 11: invalid property id
js: var p = { this.header = null; };
js: ..............^
js: "<stdin>", line 11: syntax error
js: var p = { this.header = null; };
js: ..............................^
js> var p = { header:0, doit: function(){this.header=null;} };
js> p.header;
0
js> p.doit();
js> p.header;
null

End of the original post

All this answers the question maybe in a different way, through a path, in a tacit and implicit fashion, that the Community Wiki mode could have helped in growing with more "talking examples" (a learning by practice and interpreting errors technique).

But it was not "caught" and the explicit "deductive" steps were added.

• zzzzBov: How does this answer the question?
• Kev: If you can expand on why "this was interesting" then flag to undelete.