Good Javascript code

Question

I've been broadening my horizons learning javascript and I have a quick question about style. I used to use a literal notation when making my code like this.

var foo = {
 bar:function(){/*something*/}
};

but I would have problems accessing certain variables within the object, it would claim a few didn't exist nomatter what. So I started using this, cause it worked.

var foo = {};
foo.bar = function(){/*something*/};

But after reading around a bit I get the impression that this style isn't preferred. Not that I liked the style, it just got things to work. Is there any best practices when using the literal notation so all my variables and such will work?

Wish I had the old code that didn't work still, but I think it was a variable pointing to another variable withing the same object literal or something like that.

• Petar Ivanov: So if you don't have the code that didn't work, how would you check whether what we suggest here works and solves this problem that you forgot? :)
• James Khoury: I would also check out : stackoverflow.com/questions/1704618/… For yet another style. (function foo{...}; new foo(); Which happens to be my prefered style atm)
• Raynos: @PetarIvanov because it's a common problem ;)

Answer 1

Object literals should be a static definition, the moment you do calculations or logic in the literal declaration it will break. If you need logic/calculations use an object constructor instead.

For example

var o = {
 b: 4,
 c: 8, 
 d: o.b + o.c
}

Will cause a TypeError because o is undefined. The reason for this is that the object literal is created first and then assigned to the variable o.

So whilst your creating the object literal, the object o doesn't exist.

The following :

var o = {
 b: 4,
 c: 8, 
 d: this.b + this.c
}

Will work, but not like you expect it to. You cannot reference the object literal directly in the declaration. Because this is bound to window in this example and not to o.

If you want to do logic use a constructor

var o = new function() {
 this.b = 4;
 this.c = 8;
 this.d = this.b + this.c;
}

or

var O = function() {
 this.b = 4;
 this.c = 8;
 this.d = this.b + this.c;
}
var o = new O();

Conclusion:

As long as the object literal declaration contains no logic it is safe. (Just declare functions and properties with static values).

If the declaration contains logic it should be in a function body (like a constructor)

• Christian C. Salvadó: Related: Self-references in object literal declarations.
• Isaiah: This helped more than you can imagine. Thank you.

Answer 2

You can access members of the current object via this

var foo = {
 bar: 10,
 baz: function() {
 console.log(this.bar);
 }
}

• Raynos: window.bar='fail';var o = foo.baz;o();
• Sascha Goebel: yep, if you copy the method to global scope, it will access variables from global scope ;-)