Most of the time, we have been using data in an array type and we have been using a lot of functions to filter arrays.
If your using array for small amount of data, its fine since its just small amount of data. But if your working with a lot of data, might as well save it as an object.
Let's us look at performance
When it comes to performance, getting data from an array takes time, cause you have to check every items inside an array.
let array = [
{
id: 1,
name: "John",
age: 23
},
{
id: 2,
name: "Samuel",
age: 21
},
{
id: 3,
name: "marvin",
age: 26
},
{
id: 4,
name: "james",
age: 28
}
];
let getUser = array.filter((person) => person.id === 3)[0]
console.log(getUser)
// output: { id: 3, name: 'marvin', age: 26 }
While in Object You can change the property names as an id (you can be creative in naming properties for your objects), this makes even faster when fetching data.
// in this example the properties name I did, is a string "id_"+id
let objects = {
id_1: {
id: 1,
name: "John",
age: 23
},
id_2: {
id: 2,
name: "Samuel",
age: 21
},
id_3: {
id: 3,
name: "marvin",
age: 26
},
id_4: {
id: 4,
name: "james",
age: 28
}
};
console.log(objects.id_4); // or objects['id_4']
//{ id: 4, name: 'james', age: 28 }
When you look at objects, we can easily get data using property names makes it even faster, you don't have to loop every data.
Here is a performance testing using a low spec laptop.
var a1 = [{id: 29938, name: 'name1'}, {id: 32994, name: 'name1'}];
var a2 = []; // this is the array
a2[29938] = {id: 29938, name: 'name1'};
a2[32994] = {id: 32994, name: 'name1'};
var o = {}; // this is the object
o['29938'] = {id: 29938, name: 'name1'};
o['32994'] = {id: 32994, name: 'name1'};
// lets generate 2000 data on each.
for (var f = 0; f < 2000; f++) { //lets add items to our array a2 and object variable called o,
var newNo = Math.floor(Math.random()*60000+10000);
if (!o[newNo.toString()]) o[newNo.toString()] = {id: newNo, name: 'test'};
if (!a2[newNo]) a2[newNo] = {id: newNo, name: 'test' };
a1.push({id: newNo, name: 'test'});
}
The first test is array.
var id = 29938;
var result;
for (var i = 0; i < a1.length; i++) {
if(a1[i].id === id) {
result = a1[i];
break;
}
}
console.log(result);
// this took 1049 ms
the 2nd test is the associative array (object).
var id = 29938;
var result = a2[id];
console.log(result)
// this took 43ms!!!
The 3rd test is the object.
var id = '29938';
var result = o[id];
console.log(result)
// this took 51ms!!!
As you can see, we have generated 2000+ data, and associative array (objects) and the object type are a clear winner here.
Thanks for Reading my short articles, If you like to Buy me coffee, click the image.
Top comments (5)
You have described two different data structures: Array and HashMap. Both of them has their own pros and cons. While [lookup] operation in hashmap is faster, hashmap is unordered data structure. It means that there is no guarantee that keys in
let objectswill be rendered/returned in expected order. It depends on js engine and not on js specification.Instead of first test.
you can do.
result = a1.find(k=>k.id==29938);
thansk mate, thansk for sharing ur idea :) awesome!
Even better, use Map.
developer.mozilla.org/en-US/docs/W...
If you had used the array index as an actual index, it would have been a fair comparison. This way, you're obviously just setting up arrays to fail spectacularly.