How much memory is an empty JavaScript object?

Question

Option A:

myobj = {
    a: 'a',
    a1: 'a1',
    a2: 'a2',
    a2a: 'a2a',
    a2b: 'a2b',
    a3: 'a3',
    a3a: 'a3a',
    a3a1: 'a3a1',
    a3a2: 'a3a2',
    b: 'b',
    // ...
};

vs. Option B:

myobj = {
    a: {
        a1: 'a1',
        a2: {
            a2a: 'a2a',
            a2b: 'a2b'
        },
        a3: {
            a3a: {
                a3a1: 'a3a1',
                a3a2: 'a3a2'
            }
        }
    },
    b: { ... }
};

I'm weighing this as a design decision. Here's a simpler case:

Option A:

eventHandler: {
    triggerObj: triggerObj,
    triggerAction: triggerObj.someMethod,
    responseObj: responseObj,
    responseAction: responseObj.someMethod
}

vs. Option B:

eventHandler: {
    trigger: {
        obj: triggerObj,
        action: triggerObj.someMethod
    },
    response: {
        obj: responseObj,
        action: responseObj.someMethod
    }
}

I'm pretty sure this is like the eye doctor: they're so close, it doesn't really matter. However, thought I'd see if there are any solid reasons for performance, or just for semantic/readability/other.

Relating back to the question title: how many extra object braces would be necessary to have a notable performance issue? I doubt even a few 1000 or even a 1,000,000 would matter much :-\

Why don't you create a million elements each way, and look at the memory graph in Developer Tools to see how they compare? — Barmar
– Barmar, Commented Nov 5, 2013 at 0:41
Do you have a performance issue? If not, you're pre-optimizing, and you're making your code less coherent in the process. — Aesthete
– Aesthete, Commented Nov 5, 2013 at 0:41

Robert Martin · Accepted Answer · 2014-06-21 18:50:08Z

4

I went ahead and did it. I created an empty object, and into it I put 1 million empty objects. Then I opened profiler.

Object count: 1,011,296
Shallow size: 12,202,312
Retained size: 14,434,484

So each empty JavaScript object is about 12 bytes. I also tried it with empty array objects:

Array count: 1,000,725
Shallow size: 32,023,200
Retained size: 32,034,880

Empty array objects take up about 32 bytes.

edited Jun 21, 2014 at 18:50

answered Jun 18, 2014 at 16:42

Robert Martin

17.3k17 gold badges64 silver badges89 bronze badges

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

2 Comments

Robert Martin Over a year ago

Good point but do you think array objects behave differently? Arrays are objects in JavaScript.

JLRishe Over a year ago

I think it's entirely possible that an empty array occupies a different amount of memory than an empty object does.

Collectives™ on Stack Overflow

How much memory is an empty JavaScript object?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related