DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Speed Testing Object VS Array Operation In JavaScript
Asad Anik
Asad Anik

Posted on

Speed Testing Object VS Array Operation In JavaScript

When you wants to working with collections of data, there is a conclusion between Object and Array. Sometimes Array works great and sometime Object works outstanding. We are going to testing these 2 things when million of data comes into an empty Array & Object, and how they perform. How many times they needs to update data.

Update operation speed comparisons.

Array updating speed with 5M. data

// Array..
const arr = [];

for (let i = 0; i < 5000000; i++){
    arr.push({
        id: I,
        value: `${i * 84}`
    });
}

// Updating data..
console.time('ARRAY SPEED');
let id = 4999998;
const findItem = arr.find(item => item.id === id);
findItem.value = 'HACKED BY ASAD ANIK';
console.timeEnd('ARRAY SPEED');
Enter fullscreen mode Exit fullscreen mode

ARRAY SPEED: 48.817ms

Object updating speed with 5M. data

// Object..
const obj = {};

for (let i = 0; i < 5000000; i++){
    obj[i] = {
        id: I,
        value: `${i * 84}`
    };
}

// Updating data..
console.time('OBJECT SPEED');
let id = 4999998;
obj[id].value = 'HACKED BY RAKHIYAATUL KUBRA';
console.timeEnd('OBJECT SPEED');
Enter fullscreen mode Exit fullscreen mode

OBJECT SPEED: 0.085ms

Delete operation speed comparisons.

Array’s Deleting speed.

// Array..
const arr = [];

for (let i = 0; i < 5000000; i++){
    arr.push({
        id: I,
        value: `${i * 84 + 77}`
    });
}

// Deleting data..
console.time('ARRAY DELETE SPEED');
let id = 4999999;
const index = arr.findIndex(item => item.id === id);
arr.splice(index, 1);
console.timeEnd('ARRAY DELETE SPEED');
Enter fullscreen mode Exit fullscreen mode

ARRAY DELETE SPEED: 49.457ms

Object’s Deleting speed.

// Object..
const obj = {};

for (let i = 0; i < 5000000; i++){
    obj[i] = {
        id: i,
        value: `${i * 84 + 77}`
    };
}

// Deleting data..
console.time('OBJECT DELETE SPEED');
let id = 4999999;
delete obj[id];
console.timeEnd('OBJECT DELETE SPEED');
Enter fullscreen mode Exit fullscreen mode

OBJECT DELETE SPEED: 0.084ms

Reduce Vs Map, Filter method.

Reduce is more powerful method than Map and Filter. Let’s see the prove.
β†’ Map, Filter

const arr = [];

for (let i = 0; i < 5000000; i++){
    arr.push(i);
}

// Not Optimised operation..
console.time('MAP_FILTER');
arr.filter(item => item %2 === 0).map(item => item * 2);
console.timeEnd('MAP_FILTER');
Enter fullscreen mode Exit fullscreen mode

MAP_FILTER: 153.749ms

β†’ Reduce

const arr = [];

for (let i = 0; i < 5000000; i++){
    arr.push(i);
}

// Optimised operation..
console.time('REDUCE_WAY');
arr.reduce((acc, cur) => {
    if (cur %2 === 0){
        acc.push(cur * 2);
    }
    return acc;
}, []);
console.timeEnd('REDUCE_WAY');
Enter fullscreen mode Exit fullscreen mode

REDUCE_WAY: 89.065ms

Decision making

β†’ When is time to build an Application, so we have to decide about its task. Is your Application are handling lots of traversing ? β‡’ So go for working with Array Operations in the most case. it’s totally fine.

β†’ And if your Application handles lot’s of CRUD operations like Create, Retrieve, Read, Update, Delete ? β‡’ So go for working with Object Operations in the most case. It’s fine.

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!