Javascript Performance Gains from Object Literals vs Functions

Question

So, let's think big here. Let's say you have an entire MMO you want to put together. Naturally, this involves a lot of resources from mobs, items, spritesheets, tilemaps, dialogue, characters, etc etc. In a typical game engine, you'd load or unload these resources based on some arbitrary designator, such as a map or "zone".

Is there a Javascript version of this? For example, would you be able to, while the game loop is running.

(pseudocode)

If playerPosition = theRightPlace {
    Load Resources for Next Zone
    Unload Resources for Previous Zone
}

Is there a performance gain in doing this? Or should you just load all resources for the game and be done with it? Say in some zones I have a class UglyMonster and in another zone I have UglierMonster.

I can instantiate these two classes either via John Resig's classical inheritance Class structure (which I've been using up until I hit this conversation starter, and which is handy for this kind of program)

var UglyMonster = Monster.extend({
    Stuff why it is ugly;
    Make a position!
    Attack player!!!
});

var Monster1 = new UglyMonster();

or Function

function UglyMonster(name, position) {
    Create Ugly Monster!!!! Attack player!
    Stuff why it is ugly
}

var Monster1 = new UglyMonster('Fred', 100);

If I declare them all as Variables, all Monsters in the game are sitting in the Global variable, are they not? Is there a way to declare variables WITHOUT actually constructing them? I'm new to the whole Inheritance game in Javascript, so perhaps I'm missing something obvious.

What's the best way to handle these kinds of classes floating around? Leave them? Remove them? Instantiate via Functions? Does it make a noticeable difference?

I hope I've stated clearly enough what I hope to accomplish. Thank you!

Answer 1

I'm not totally sure what you're asking, but

function UglyMonster(name, position) {
   ...
}

and

var UglyMonster = function (name, position) {
    ...
}

are equivalent expressions. Functions are objects in Javascript. In both of these cases these functions are saved as variables and attached as properties on the global object.

There won't be any noticeable performance difference in these 2 approaches.

As far as

Is there a way to declare variables WITHOUT actually constructing them?

You can declare a variable without defining it. Just var x;. Or you can declare a class constructor without instantiating an object of that class immediately. You'll have just defined a function that won't actually have been run yet.

Update

A bit more background on how functions are read in javascript.

When the javascript engine is interpreting a new scope, it starts by hoisting all variable declarations in the code to the top of the current scope (the global scope or the current function). Those variables then "exist" but are undefined. It then processes the function declarations, as they're moved to the top by default.

so the following code

var x = 3+2;

var UglyMonster = function (name, position) {
    ...
}

function UglyMonster2(name, position) {
   ...
}

is interpreted as if it was written like this:

var UglyMonster, UglyMonster2,x;

UglyMonster2 = function(name, position) {
   ...
}

x = 3+2;

UglyMonster = function (name, position) {
    ...
}

Its important to note that no functions have actually been run in this example. They've just been defined. No functions are run and no instances of UglyMonster are created until you run

new UglyMonster(). If you are creating many monsters then there may be value in holding off on creating these as long as possible. In the end though, performance is going to depend on many things and the only surefire way to tell is to test it and try things out yourself.

Answer 2

That's a lot of questions! Let's try to go one by one.

Should I load and unload my resources?

I believe game engines load resources from disk into memory. In browser JavaScript you can't read from disk, you have to read from the network, and that's slow. So only load/unload if you are having serious memory use issues (use the browser tools to check for that).

If I declare them all as Variables, all Monsters in the game are sitting in the Global variable

If you're saying function UglyMonster is different, it's not. It's also in the global scope. If you want to keep the global scope clean, wrap your code in an immediately invoked function expression:

(function(){}(
    // your code here
));

Is there a way to declare variables WITHOUT actually constructing them?

Not sure what you mean, but you can define object literals:

var Monster = {
    attack : function() {  },
    eyes : 5
};

You can also inherit from any object with Object.create:

var UglyMonster = Object.create(Monster);

What's the best way to handle these kinds of classes floating around? Leave them? Remove them? Instantiate via Functions? Does it make a noticeable difference?

I have no idea what you're asking here! :)