Use Objects than Arrays For Large Data in JS
Tags: javascript, webdev, news, typescript
Published: 2021-10-27 06:41:39

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.
```js

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.
```js
// 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.
```js
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.
```js
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).
```js
var id = 29938;
var result = a2[id];
console.log(result)
// this took 43ms!!!
```
The 3rd test is the object.
```js
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.
<a href="https://www.buymeacoffee.com/BroJenuel" >
<img src="https://raw.githubusercontent.com/BroJenuel/BroJenuel/master/images/buymecoffee.svg" alt="drawing" width="150" title="buy me coffee"/>
</a>