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 objects
will 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.