What is the best way to manage variable in memory for Javascript

Question

I'm building a web application that is heavily based on the browser via Javascript.

When I need a module located in a separated file, I don't know which of the three methods is the best regarding the memory taken by the javascript engine :

Idea 1, assign variables in the extend method

function (ContactCollection , ItemCollection, ContactListView) {
    var ContactExample = function (inst) {
         // Wild examples of possible uses :

         this.collections.contact.each(function(model) {
             // do something with each model
         });

         this.collections.item.on('reset', this.resetItems, this);

         this.$el.remove().append(this.view.render().el);
    };

    jQuery.extend(true, ContactExample.prototype, {
        'collections': {
            'contact': ContactCollection,
            'item': ItemCollection
        },
        'view': ContactListView,
        '$el': jQuery('#somediv'),
    }, ContactExample);

    return new ContactExample();
};

Idea 2, assign variables in the instanciation method :

function (ContactCollection , ItemCollection, ContactListView) {
    var ContactExample = function (inst) {
         // Wild examples of possible uses :

         inst.collections.contact.each(function(model) {
             // do something with each model
         });

         inst.collections.item.on('reset', this.resetItems, this);

         inst.$el.remove().append(this.view.render().el);
    }

    jQuery.extend(true, ContactExample.prototype, {
        '$el': jQuery('#somediv')
    }, ContactExample);

    return new ContactExample({
        'collections': {
            'contact': ContactCollection,
            'item': ItemCollection
        },
        'view': ContactListView
    });
};

Idea 3, simply use them in the code, since they are already referenced in the scope of the function :

function (ContactCollection , ItemCollection, ContactListView) {
    var ContactExample = function (inst) {
         // Wild examples of possible uses :

         ContactCollection.each(function(model) {
             // do something with each model
         });

         ItemCollection.on('reset', this.resetItems, this);

         this.$el.remove().append(ContactListView.render().el);
        }
    });

    jQuery.extend(true, ContactExample.prototype, {
        '$el': jQuery('#somediv')
    }, ContactExample);

    return new ContactExample();
});

What (and why) is the best way to handle variable in the javascript memory engine.

Thank you for your answers

Can you remove the backbone./require code then and create a general question? It will be more helpful to others and you'll get more responses. — Jan Hančič
– Jan Hančič, Commented Mar 12, 2013 at 10:25
My advice would be to start from scratch with a reliable Backbone tutorial, such as net.tutsplus.com/sessions/… Might also help to go over a JavaScript reference if your background is in another technology, such as developer.mozilla.org/en-US/docs/JavaScript/Memory_Management — Rick Suggs
– Rick Suggs, Commented Apr 8, 2013 at 14:26
jQuery.extend can not be used the same way as Backbone.View.extend. Your question is not answerable in its current form because it is broken. — Beat Richartz
– Beat Richartz, Commented Apr 10, 2013 at 9:56
I changed it, or at least I tried it (with simpler objects) and it works that way. — Cyril N.
– Cyril N., Commented Apr 10, 2013 at 13:14

Richard Connamacher · Accepted Answer · 2013-04-11 14:33:36Z

1

+100

The lowest memory use of your three options would be to use the context variables (idea #3), since it eliminates duplication. The other two copy the values to a second object created inside of that function. Here's the background:

Everything in JavaScript is an object and objects are internally just hashmaps relating string keys to a reference to its actual value. This includes ordinary local variables; internally they're properties on an invisible context object that can be accessed by that function and any functions defined inside of it. Using $.extend vs assigning properties directly makes no difference, because the extend function is just syntactic sugar around a for loop that copies properties from one object to another.

Since a function's context (local variable) object is retained for use by all functions defined inside of it, the lowest memory usage of your options would be the one that doesn't duplicate it to new internal objects. But the difference would be minor.

If you really want to cut your memory usage to the smallest level and write easier-to-maintain code, I'd suggest getting rid of the fancy (and hard-to-debug) context wrapping and code it the old fashioned JavaScript OOP way: use an ordinary constructor defined either at the top level or inside a single wrapper function that's run only once when the page is first loaded. That gets rid of the duplicate contexts. Call it with the 'new' keyword and pass in data as arguments that you assign to 'this'. Do your initialization inside of the constructor, and nothing more.

Put all of your method functions on its prototype and then use it as a normal, ordinary, no-frills JavaScript object.

https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript

edited Apr 11, 2013 at 14:33

answered Apr 11, 2013 at 5:35

Richard Connamacher

3,22622 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cyril N. Over a year ago

Great answer, exactly what I was looking for. Regarding the last part, this "design" is required because I'm using RequireJs (hence the root function) and Backbone (hence the extend, replaced by jQuery here for a more broader approach).

Richard Connamacher Over a year ago

If you're using a RequireJS module as a constructor that gets called every time you need a new object, then that style makes sense. It's also the worst memory-wise since you now have duplicate prototypes defined on each child object. (In normal JavaScript OOP the shared prototype is defined once and child objects contain only the properties they change plus a single reference to their prototype.) Usually I see people define the constructor and prototype in the module and return that, and then get back to the normal OOP way in the rest of their code.

Cyril N. Over a year ago

I did that for my shared prototype (like the same functions used in the "list" pages or "details" page, and I extend this prototype with specific functions for any list or details).

Rui Jarimba · Accepted Answer · 2013-04-09 16:47:57Z

0

Why are you using $.extend at all? Just create an instance and assign the properties:

var c = new ContactExample();
c.$el = $('#somediv');

Memory won't be a problem - instead focus on the references to DOM-elements (#somediv) that may cause the troubles later.

edited Apr 9, 2013 at 16:47

Rui Jarimba

18.5k11 gold badges64 silver badges101 bronze badges

answered Apr 8, 2013 at 14:26

Sebastian Brand

5474 silver badges11 bronze badges

1 Comment

Cyril N. Over a year ago

I use $.extend because I recreate a similar environment as Backbone does when you instantiate a Backbone Object. My question here is specifically oriented about the difference of the memory usage in those 3 use case, I know it's different from the DOM-elements memory leaks, but that's not the point of the question.

xavierm02 · Accepted Answer · 2013-04-10 14:04:32Z

Constants
- If you don't need them outside of the scope of the function, then use normal variables.
- If you need them outside of the scope of the function, then put them on the constructor.
Instance variables (that change with each instance)
- For properties that you know will have different values for each instance, declare them with the proper type in the constructor so that they can be optimized into the static type associated with the constructor.
- For properties that are shared among all objects (like methods), use the prototype.
- For properties that will more likely keep their default value, if you want speed of access, you should declare them in the constructor, but if you want to use far less memory, you should put the default values on the constructor and only add a property to the object if it differs from the default value.

Collectives™ on Stack Overflow

What is the best way to manage variable in memory for Javascript

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related