Memory usage of JavaScript objects

Question

If I have an array of three objects:

var array = [obj1, obj2, obj3];

And my objects has one specific property (example: "id") and two common properties (example: "prop" and "log" function)..

I wonder which one would have least memory usage? What's better to use?

Defining the same properties on all items of my array:

var obj1 = {id: 1, prop: '@', log: function() { console.log('TEST'); }};
var obj2 = {id: 2, prop: '@', log: function() { console.log('TEST'); }};
var obj3 = {id: 3, prop: '@', log: function() { console.log('TEST'); }};

var array = [obj1, obj2, obj3];

vs.

Creating objects (items of my array) with a given prototype

var myProto = {prop: '@', log: function() { console.log('TEST'); }};

var obj1 = Object.create(myProto);
obj1.id = 1;

var obj2 = Object.create(myProto);
obj2.id = 2;

var obj3 = Object.create(myProto);
obj3.id = 3;

var array = [obj1, obj2, obj3];

vs.

Create a object with the common properties and extend my array items to use this object

var common = {prop: '@', log: function() { console.log('TEST'); }};

var obj1 = extend({id: 1}, common);
var obj2 = extend({id: 2}, common);
var obj3 = extend({id: 3}, common);

var array = [obj1, obj2, obj3];

Why not a fourth option, similar to your second one, but add the id to the prototype and assign a value to it while using `new` or `Object.create`? — Etheryte, Jun 09 '14 at 13:04
Maybe this will help. Object.create and or constructor functions are use less CPU and memory and are common used patterns for oop JavaScript: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 — HMR, Jun 10 '14 at 05:26

score 1 · Accepted Answer · answered Jun 09 '14 at 13:08

1

From a memory standpoint, using a prototype would be more efficient. Secondly, since you want to initialize a property in each of the new objects, you may have a case for constructor functions.

function Foo(id) {
    this.id = id || null;
}

Foo.prototype = {

    id: null,

    prop: "@",

    constructor: Foo,

    log: function() {
        console.log("TEST");
    }

};

var array = [
    new Foo(1),
    new Foo(2),
    new Foo(3)
];

answered Jun 09 '14 at 13:08

Greg Burghardt

17,900
9
49
92

1

@Nit There is no reason to add the `id` to the `prototype` here since the constructor's code unconditionally set the `id` property on the instance itself. It would however be different if the code was `if (id) this.id = id;`. However, please note that even though you could decrease memory consumption by sharing defaults through the prototype, it is inefficient in terms of performance. As a general rule, share functions through the prototype, but not properties, unless the only goal is to save on memory. http://msdn.microsoft.com/en-us/library/windows/apps/hh781219.aspx – plalx Jun 09 '14 at 14:19
Or unless the goal is to set default values for properties. And as for the additional processor time required to execute a constructor function, I doubt the user will notice any difference unless you are instantiating hundreds or thousands of objects at runtime. The actual performance difference is negligible. – Greg Burghardt Jun 09 '14 at 15:00
@Nit: Another reason I add properties to the prototype of an object, besides to set default values, is a way to communicate to other programmers just what properties they should expect to see in an object of this type. – Greg Burghardt Jun 09 '14 at 15:02

score 0 · Answer 2 · answered Jun 09 '14 at 13:17

Case one - you are creating 3 separate objects with different properties (while prop and log looks the same, they have nothing in common).

Case two - here you are using prototype. Properties and functions are common to all of the objects that shares this prototype.

Case three - you are extending your object, meaning copying properties and references. You definitely don't want to go this way in your case. Although it might be useful if you want to exactly that, but you may end up creating memory leaks, since when you are disposing of objects - you have to detach all of the references to other objects and functions.

Conclusion, use prototypes to share stuff between the objects.

Memory usage of JavaScript objects

2 Answers2