DEV Community

Jenuel Oras Ganawed
Jenuel Oras Ganawed

Posted on

Use Objects than Arrays For Large Data in JS

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 }

Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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'});
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

the 2nd test is the associative array (object).

var id = 29938;
var result = a2[id];
console.log(result)
// this took 43ms!!!
Enter fullscreen mode Exit fullscreen mode

The 3rd test is the object.

var id = '29938';
var result = o[id];
console.log(result)
// this took 51ms!!!
Enter fullscreen mode Exit fullscreen mode

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.

drawing

Discussion (3)

Collapse
captainyossarian profile image
yossarian

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.

Collapse
alexparra profile image
Alex Parra
Collapse
lexlohr profile image
Alex Lohr

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.