CODEWITHSUNDEEP
javascript
Travis J
Travis J

Reputation: 82337

difference between {} and function(){}

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?

Upvotes: 0

Views: 167

Answers (2)

ShinTakezou
ShinTakezou

Reputation: 9681

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.

Upvotes: 1

Peter Olson
Peter Olson

Reputation: 143037

{} 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.

Upvotes: 9

Related Questions