tldr

After comparing several methods, the below approach was the fastest way to populate an array.

const array = new Array(arraySize);
for(let i=0; i< arraySize; i+=1) {
    array[i] = {id: i, name:"test"};
}

Article

I recently read an article looking at the difference between coding methods used by "noobs" and "pros". Whilst several of the methods were useful demonstrations of neater and more efficient code, a few made me look at what was more performant.

The below 2 methods of populating an array seemed like a good example of this:

"Method 1"

const array = [];
for(let i=0; i< arraySize; i+=1) {
    array[i] = { id: i, name:"test" };
}

"Method 2"

const array = new Array(arraySize).fill(null).map((_, idx)=>({ id:idx, name: "test" }));

Whilst Method 2 may be considered cleaner code, does it actually perform better?

Well the answer is no!

Using a couple of benchmarking tools, JSBEN.CH and JSBench.me the method didn't perform as well as "Method 1".

As with all things there are multiple ways to populate arrays, so I thought I would test a few of these to see which might be the fastest. I used the two tools to test each of the approaches, which I ran 3 times and averaged the results.

Methods

I declared the arraySize as a const outside of the tests. For running them I used a value of 6.

"Method 1"

const array = [];
for(let i=0; i< arraySize; i+=1) {
    array[i] = { id: i, name:"test" };
}

"Method 2"

const array = new Array(arraySize).fill(null).map((_, idx)=>({ id:idx, name: "test" }));

"Method 3"

const array = [];
for(let i=0; i< arraySize; i+=1) {
    array.push({id: i, name:"test"});
}

"Method 4"

const array = [...new Array(arraySize)].map((_, idx)=>({id: idx, name: "test"})); 

"Method 5"

const array = new Array(arraySize);
for(let i=0; i< arraySize; i+=1) {
    array[i] = {id: i, name:"test"};
}

Results

JSBEN.CH Link to Tests

JSBench.me

Each of the approaches showed that Method 5 performed better for each of the test runs.

Conclusion

As mentioned there are other approaches that can be taken to populate arrays. For the tests and comparison done here "Method 5" performed the best;

const array = new Array(arraySize);
for(let i=0; i< arraySize; i+=1) {
    array[i] = {id: i, name:"test"};
}

However there may be a different approach which outperforms this method. I think the main takeaway is whilst code may appear cleaner it, doesn't necessarily make that code more performant.