JS Object of Arrays vs JS Array of Objects efficient and performance

Question

This question regarding javascript language. Simply think we have a map and we insert item as following manner

var dataMap=new Map();

//First Mechanism
//firstly we can think of structure of values of map can be JSONArray of objects
 dataMap.set("key1",[{'id':12,'name':"obj1"}]); // init
// and,then insert  new element to JSON Array which holds by map using 'key1'
dataMap.get("key1").push({'id':23,'name':"obj47"});//updated, now value of 'key1' is an JSON array which holds two elements
// expect 'key1' ->   [{'id':12,'name':"obj1"},{'id':23,'name':"obj47"}]          

//Second mechanism
// next we cant think of structure of values of map as JSONObject of Arrays
dataMap.set("key1",{'id':[12],'name':["obj1"]}); // init
// then we proceed with update operations like this
dataMap.get("key1").id.push(23);
dataMap.get("key1").name.push("obj47"); // two operations to insert items to respective arrays.
// expect 'key1' ->{'id':[12,23],'name':["obj1","obj47"]}

Which approach is most effective and efficient?

Think we have considerable amount of insertion operations to map ,if we are in to performance which one is better?

(If I have done mistake please correct ,I wanted to simplify the question as possible as I can that's why) Thank you.

Both approaches results in different output so it depends on how you intend to use this array later. — gurvinder372, Sep 20 '17 at 07:11
@gurvinder372 That's what I thought earlier.But how to determine performance of each approach? — , Sep 20 '17 at 07:12
@Buddhika: Performance isn't the issue. It depends on what is easier to use for you. And that's ___Primarily Opinion-Based.___ — Cerbrus, Sep 20 '17 at 07:14
Performance will vary with function, purpose, context and scale, or may be more such parameters. I don't think it is possible to determine what is `better` without knowing the complete context. — gurvinder372, Sep 20 '17 at 07:14
@gurvinder372 what about insertion operations of map? second approach need two push operations think pushing large objects to array like scenario,but first approach require only one insertion/push operation even if object is larger or smaller considerably.but I have no idea about internal layout of JSON objects of javascript engine — , Sep 20 '17 at 07:18
@Cerbrus First mechanism is easiest I think.if we are in to Data-Oriented layout second mechanism is better right? — , Sep 20 '17 at 07:20
What problem are you trying to solve here, @Buddhika? Just chose one of the 2 methods, whatever works for you. There is no "better". — Cerbrus, Sep 20 '17 at 07:20
I agree with @Cerbrus, it certainly depends on what you intend to do with the data later on. In my opinion, the array is often better, but there could be cases where objects would be better. — Nisarg Shah, Sep 20 '17 at 07:26

score -1 · Answer 1 · answered Sep 20 '17 at 07:56

Just for the sake of curiosity I went ahead and used console.time() to benchmark the results.

Starts a timer you can use to track how long an operation takes. You give each timer a unique name, and may have up to 10,000 timers running on a given page. When you call console.timeEnd() with the same name, the browser will output the time, in milliseconds, that elapsed since the timer was started.

Now you can argue about how reliable its results are considering there are other factors involved such as browser caching etc.

These are the results* for 1000000 operations on my machine.

Chrome Version 61.0.3163.91 (Official Build) (64-bit)

// 1st run
default: 2217.048095703125ms
default: 3032.159912109375ms
// 2nd run
default: 1948.16796875ms
default: 3320.7431640625ms
// 3rd run
default: 2177.461181640625ms
default: 2989.448974609375ms


Firefox 55.0.3 (32-bit)

// 1st run
default: 2146.64ms
default: 2390.11ms
// 2nd run
default: 1863.7ms
default: 2264.02ms
// 3rd run
default: 1751.7ms
default: 2283.6ms

You can see that the difference is not that big and should not be a factor affecting your decision. As @Nina Scholz very correctly mentioned choose the data structure that will make your life easier.

[*] Code used in the benchmark as reference:

let dataMap = new Map();
const diff = 1000000;
let key = null;

console.time();
for(let i = 0; i < 1000000; i++){
    key = `key${i}`;
    dataMap.set(key, [{'id': i, 'name': `obj${i}`}]);
    dataMap.get(key).push({'id': i + diff, 'name': `obj${i + diff}`})
}   
console.timeEnd();

dataMap = new Map();

console.time();
for(let i = 0; i < 1000000; i++){
    key = `key${i}`;
    dataMap.set(key, {'id':[i], 'name': [`obj${i}`]});
    dataMap.get(key).id.push(i + diff);
    dataMap.get(key).name.push(`obj${i + diff}`);
}
console.timeEnd();

Or try it online.

So, basically _"Use whatever works easiest for you"_, which is a typical "Primarily Opinion based" answer. — Cerbrus, Sep 20 '17 at 08:02
@Cerbrus I believe the question does not provide enough information to answer it otherwise since we do not know how will those data we used. — Sotiris Kiritsis, Sep 20 '17 at 08:03
So why did you answer a question that can't be answered properly? — Cerbrus, Sep 20 '17 at 08:04
Because I believe the answer at the very least addresses the part of the question of "which is more effective and efficient". — Sotiris Kiritsis, Sep 20 '17 at 08:06
We don't "owe" the OP an answer. Especially not about an _insignificant_ performance difference between 2 valid methods of doing something. — Cerbrus, Sep 20 '17 at 08:09

JS Object of Arrays vs JS Array of Objects efficient and performance

1 Answers1