0

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?

Travis J
  • 81,153
  • 41
  • 202
  • 273
  • 3
    I think you should spend some more time with the [MDN JavaScript Guide](https://developer.mozilla.org/en/JavaScript/Guide). The object literal syntax is not at all related to the function syntax. – Felix Kling May 14 '12 at 21:20
  • why would you think these were equivalent?!? is there any book or webpage in circulation that says so? – Aprillion May 14 '12 at 21:21
  • @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. – Travis J May 14 '12 at 21:21
  • It's ok to not know the difference between `{}` and `function(){}` as a beginner, but at least do a little bit of searching online to solve your confusion before posting a question to [SO]. – zzzzBov May 14 '12 at 21:21
  • Yeah, well, that can happen :) Still, it's useful to have a look at the guide again from time to time (Working with Objects is a great chapter!). – Felix Kling May 14 '12 at 21:22
  • 1
    to be fair, questions involving symbols are kind of hard to search – CrayonViolent May 14 '12 at 21:22
  • part of the answer... http://stackoverflow.com/questions/1140089/how-does-an-anonymous-function-in-javascript-work – Hataru May 14 '12 at 21:24
  • @zzzzBov - Not really as "sinister" as you make it out to be. I was looking at this definition `var CarShop = function(){};` at http://www.joezimjs.com/javascript/javascript-design-patterns-factory-part-2/ and afterward they attach a prototype to CarShop. I wanted to have something similar with some variables and when I tried to define them I got a little mixed up. – Travis J May 14 '12 at 21:24
  • 1
    @FelixKling - I am reading through that MDN link, and it is very good! Thanks! – Travis J May 14 '12 at 21:30

2 Answers2

9

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

Peter Olson
  • 139,199
  • 49
  • 202
  • 242
  • 4
    Right; they're not even *close* to being equivalent. – Pointy May 14 '12 at 21:18
  • 1
    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. – lbstr May 14 '12 at 21:23
  • also, `{}` creates an object instance, and whatever var is set to `function () {}` would need to be called with `new` before an instance is created. – zzzzBov May 14 '12 at 21:23
  • Calling `new __Panel()` where `__Panel` is an object (and not a function) would generate an error. The syntax is just not valid. – Felix Kling May 14 '12 at 21:25
  • @lbstr - Exactly what I was failing at. – Travis J May 14 '12 at 21:25
  • @zzzzBov - That was definitely the goal, to be able to create new instances of this definition. – Travis J May 14 '12 at 21:28
  • @TravisJ why do you want to use `new`? are you a fan of languages that require the use of classes before creating objects? or just unfamiliar with prototypical nature of javascript? – Aprillion May 14 '12 at 21:33
  • @deathApril - Every time I copy paste I try to automate. I find myself in need of a factory for creating divs ("panels"). I am not very familiar with some of the more complex facets of javascript such as prototyping and am just trying to make a proper library for re-use. I wanted to have a structure that I could use the `new` keyword on in, and then pass that initialized structure,in combination with some other input, to a factory to create a complex interconnected series of tunnels and a golden toilet (or a nested div view). – Travis J May 14 '12 at 21:38
  • @deathApril - I am a fan of using the `new` keyword in this instance because when I have to create an array of these I want each one to be different, not to have an array of pointers all linked to the same object. – Travis J May 14 '12 at 21:40
  • @TravisJ as long as you know what you are doing with `new`, have fun with it ;) – Aprillion May 14 '12 at 21:47
  • @zzzzBov my answer shows a simple thing (for whoever is accustomed to js) but interesting to me (what is interesting and what is not is subjective, isn't it); and what it showed that when "inside" an object, a this in a function refers to that object; and this fact should make people ignorant about js (like me): then, this in the "bare" function, refers to? (ans could be: whatever "parent" object the function is used in?); that showed also that an expression can't be used "bare" in a obj – ShinTakezou May 15 '12 at 05:21
  • @zzzzBov and moreover, the first lines show in practice that "this.header = null" can't be a valid property (a different way of saying what this answer says)...; so, the question is: how that does not answer (partially) the question, if it contains part of an accepted answer? lack of imagination and deduction abilities – ShinTakezou May 15 '12 at 05:28
1

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.

ShinTakezou
  • 9,432
  • 1
  • 29
  • 39