Performance benchmarks between arrays and Object.keys - create, access, delete.

[JSideris]

Code

Setup:

var collection = {};
var array = [];
var n = 100;
var MyObj = function(id){
    this.id = id;
    this.y = 0;
}

MyObj.prototype.use = function(x){
    this.y = 2*x;
}

Creation:

for(let i = 0; i < n; i++){
    collection[i] = new MyObj(i);
}

for(let i = 0; i < n; i++){
    array.push(new MyObj(i));
}

Linear Access:

let i = 0;
Object.keys(collection).forEach(k=>{
    i++;
    collection[k].use(i);
}); 

let K = Object.keys(collection);
let i = 0; 
for(let k in K){
    i++;
    collection[k].use(i);
}

for(let i = 0; i < array.length; i++){
  array[i].use(i);
}

Random Access:

/*setup*/ var rand = Math.floor(Math.random() * n);
collection[rand].use(123);

/*setup*/ var rand = Math.floor(Math.random() * n);
for(let i = 0; i < array.length; i++){
    let a = array[i];
    if(a.id == rand){
        a.use(123);
        break;
    }
}

Deleting:

let i = 0;
Object.keys(collection).forEach(k=>{
    delete collection[k];
}); 

while(array.length > 0){
    array.splice(0, 1);
}

Results

Creating - Objects vs Arrays
For n=1000:

Linear Access - Objects vs Arrays

(BONUS) Linear Access - Object.keys.forEach vs Iterating Over Object.keys In a Regular For Loop

Random Access - Objects by ID vs Array search - n=100

Random Access - Objects vs Array search - n=1000

Random Access - Objects vs Array search - n=10000

Deleting - Objects (delete) vs Arrays (splice)

Conclusion

In the game, creating and deleting are relatively rare. Objects are only created once, but updated many, many times over the duration of their life. So the create/delete metrics are far less relevant. The vast majority of updates require linear access, for instance, updating objects once per frame.

The most surprising result here is that For n <= 100, arrays just as performant as objects for random access, even though the time complexity to find one is on the order of n.

Wherever linear updates are required (draw/fixed updates), use arrays. Iterate in reverse order, and if an item is dead, splice it from the array. To handle random updates (from the server, etc) have a repository of all game objects in an object. When the game object needs to be deleted, call it's delete function, which should delete it from the global container object, and set a flag indicating that it should be spliced from any arrays it's in.