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.

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)