This content originally appeared on DEV Community and was authored by Jenuel Oras Ganawed
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.
This content originally appeared on DEV Community and was authored by Jenuel Oras Ganawed
Jenuel Oras Ganawed | Sciencx (2021-10-27T06:41:39+00:00) JS Tip Series: Use Objects than Arrays For Large Data. Retrieved from https://www.scien.cx/2021/10/27/js-tip-series-use-objects-than-arrays-for-large-data/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.