Which Javascript object structure uses less memory?

When it comes to JavaScript objects, arrays, and memory usage, which of the below structures is more memory efficient?

aa = [ {'a':1, 'b' : 2}, {'a':3, 'b' : 4} ]
bb = { 'a' : [1,3], 'b' : [2,4] }

aaa = [ {'a':1, 'b' : 2}, {'a':1, 'b' : 2}, {'a':1, 'b' : 2}, {'a':1, 'b' : 2}, {'a':1, 'b' : 2}, {'a':1, 'b' : 2}, {'a':1, 'b' : 2} ];
bbb = { 'a' : [1,1,1,1,1,1,1], 'b' : [2,2,2,2,2,2,2] };

It seems that it is quite difficult to get accurate measures of how much RAM an object uses in JavaScript due to a variety of reasons. However, Chrome’s new memory tab appears to possibly help us track down which of the above is better.

In the case of aa and bb, it appears that aa uses less memory (are we looking at retained or shallow size)? It’s hard to tell because the creation of that array of objects appears to create other objects at the same time.

AA:

Screenshot of Chrome’s Memory for Creation of AA

BB:

Screenshot of Chrome’s Memory for Creation of BB

In the case of aaa and bbb, it seems the object size of bbb is smaller than the array of objects of aaa, but then again, the total ram for all of the entries is less in aaa than bbb, so which one is truly more efficient?

AAA:

Screenshot of Chrome’s Memory for Creation of AAA

BBB:

Screenshot of Chrome’s Memory for Creation of BBB

Developers appear to prefer working with an array of objects because it’s easier to search (myself included), but I really only want to know which structure is more efficient in terms of memory.

I am not low level enough to understand what truly happens when JavaScript objects are stored in memory. Managing memory has been abstracted due to its complexity (thanks to all who made that possible… but poor Chromium developers).


Source: stackoverflow-javascript