Does {} use less memory than [] for nested objects in Javascript?

Question

I had some old JS code that creates a gigantic structure of nested objects using []. The code looks something like this:

var data = []; data ["first"] = []; data ["first"]["second"] = []; data ["first"]["second2"] = "hello"; 

This is about 250 + KB of javascript, which is quite large. When I try to wrap it with requirejs to load into another requirejs module, it throws a "Out of memory" error.

The error disappears if I use {}, where I used [].

Over the weekend, I did some homework at [] vs. {}, and the reason is that using linked arrays, since nested dictionaries can be fuzzy in Javascript, because the array extends the JS object and may contain more material to update when new objects are added to it. But does this explain the problem of memory consumption? Or is it due to how Requirejs parse a module object?

I don’t have enough knowledge about working with JS memory tools and the comparison between using {} or [] in browsers, so it’s hard to draw conclusions. Any hint or suggestion on how to use the {} vs. tool [] are welcome.

Update: Yesterday I tried using sizeOf () via node. I used all existing: "js-sizeof", "object-sizeof", "sizeof"

the code:

 var sizeof = require('object-sizeof'); var obj = []; obj['ball'] = 'hello'; obj['air'] = 'hello'; obj['ball']['fire'] = 'world'; obj['ball']['ice'] = []; console.log(sizeof(obj)); var obj2 = {}; obj2['ball'] = 'hello'; obj2['air'] = 'hello'; obj2['ball']['fire'] = 'world'; obj2['ball']['ice'] = []; console.log(sizeof(obj2)); 

results

[]: 34 {}: 34

The size ofOf is actually the same., But maybe something happened to [], which may cause a memory problem. I'm not sure if this is a requirejs parsing that runs it or some way of optimizing V8. I don’t think Lint’s tools even offer against this practice, so it’s rather ambiguous how this is the “right” way to practice.

Answer 1

There is no such thing as a “linked array” in JavaScript. [ 1, 2, 3 ] - the syntax of the array literal; it initializes the array. { foo: "bar" } - object literal syntax; it initializes the object. However, the quirk of JavaScript is that arrays are also objects, so this code "works":

 var data = []; data["first"] = []; data["first"]["second"] = []; 

... but you should not do this, because it makes no sense. You initialize an empty array ( [] ), but then you do not use it as an array, you use it as an object. If you use property names ( data["first"] , which is equivalent to data.first ) instead of integer keys ( data[0] ), then you want to use an object. There is no scenario in which you have to initialize the array when you are going to use it as an object.

Typically, if you want each element to have a name or to quickly access them by name, use Object ( {} ) and use the string for the keys. If you need to be able to iterate over items in order, use an array with integers for the keys.

I don’t know the exact cause of your memory error, especially not seeing your actual code, but you should definitely use Object ( {} ) and not an array ( [] ) when you are not using integer keys. JavaScript engines optimize everything they can, and arrays and objects are no exception, so it is not surprising that when using an array in such a way that the engine does not expect this to cause performance or memory problems.

PS As a style, consider the use of property notation (or "dot notation", ie foo.bar ) instead of musical notation (ie foo["bar"] ) when working with objects:

 var data = {}; data.first = {}; data.first.second = {}; data.first.second2 = "hello"; 

This is exactly equivalent to the code you sent, but it is easier to read and may help you remember that objects and arrays have different uses. You can also simply express this as a literal of a single object:

 var data = { first: { second: {}, second2: "hello" } }; 

It is also exactly equivalent and helps you see the "structure" of your object (as long as you are disciplined with indentation).

Most JavaScript style guides say that you should always use "dot notation" if you don't have keys that could cause a syntax error. For example, if you have a property called "foo/bar" , you obviously cannot do this:

 var obj.foo/bar = 1; 

... because it is a syntax error. Therefore, you must do this:

 var obj["foo/bar"] = 1; 

... which is absolutely true. These cases are usually the exception, so I would advise you to always use dot notation if you do not need to use musical notation.