0

I am new to javascript and I've been wondering about something. Is there an accepted way I should be listing my object properties?

To be specific, I have been writing code where an object is created without any initial properties and adding them on as the code runs.

Example:

Game = {};
Game.x = 0;
...Code code code
Game.thing = function ()  {
    Game.variable = 30;
}

As you can see, my Game object is just slowly gathering properties as my code runs on. Is this acceptable? Or should I be listing out all the properties I will be using at the beginning in my Game object initialization? Thanks.

jahmezz
  • 416
  • 1
  • 5
  • 15

2 Answers2

2

You can do this:

var Game = { // DON'T FORGET var !!!!!
  x: 0,
  something: some_value,
  thing: function() {
    this.variable = 30;
  }
};

What you're doing in your code is not really wrong (except don't forget var!!). It's a matter of style and intent. The above code (well the part in the curly braces) is called an "object literal", and it's a way of creating an object as a JavaScript value on the fly. It's very useful, but it's not necessarily better than other ways of building an object.

edit

Note that according to this article when an object (in V8 at least, though I suspect other runtimes are likely to have similar behavior) starts looking like it's being used like a map, then it internally is optimized for that purpose. After that point, for ... in loops over the object will no longer be candidates for optimization. You can (I think) still use Object.keys() to do such iterations, and overall it's probably a net benefit, but it might be the case that objects that experience a lot of property creation fall into that situation.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • You should explain why this is better. – Robert Harvey Jul 07 '14 at 23:17
  • @RobertHarvey well I've been thinking about what to say; it's not necessarily *better*; it's just different. – Pointy Jul 07 '14 at 23:18
  • @Pointy I understand, but I was wondering if I should list out all my properties before I do anything with them, or is it okay to add properties to my object real-time? Like say, 300 lines down I add a new property to the object that isn't listed at the beginning. Is that okay? – jahmezz Jul 07 '14 at 23:19
  • 1
    @jahmezz funny you should ask this - I was just reading an article on this the other day. I'll extend the answer a little. – Pointy Jul 07 '14 at 23:20
1

It really depends on your application. If you have all of the data you want to put in your object when you create it, use an object literal:

var Game = {
    x: 0,
    thing = function ()  {
        this.variable = 30;
    }
}

However, there may be instances where you want to add to your newly created object as you go. This is common when namespacing (which it seems like you're trying to do).

I would start with something like this:

var Game = Game || {};

That way, you make sure you aren't colliding with another object. Then go from there, by adding your properties and methods. A common approach is to create a closure and assign new methods from within that closure.

(function() {
    var foo = function () {
        ... stuff ...
    }
    Game.foo = foo;
})();

That way, you don't run the risk of accidentally creating any global variables. :)

SeeMeCode
  • 1,415
  • 15
  • 19
  • Yes, I am attempting to namespace. Thanks for the input! – jahmezz Jul 07 '14 at 23:29
  • To clarify, the extra () create a closure? And it looks like it keeps all global definitions from going beyond the braces, am I right? @SeeMeCode – jahmezz Jul 07 '14 at 23:33
  • 1
    Basically that just allows you to create a [self invoking function](http://sarfraznawaz.wordpress.com/2012/01/26/javascript-self-invoking-functions/), which you would want since you're creating an anonymous function to act as a closure. It's the actual function that creates a closure – [all functions in JS are automatic closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures). – SeeMeCode Jul 08 '14 at 00:20