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 }

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.