What's the fastest way to populate an array in Javascript?

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

Method	Run 1	Run 2	Run 3	Avg.	Rank
Method 1	2693921	2647128	2637345	2659464.667	2
Method 2	2296840	2239211	2250513	2262188	5
Method 3	2566325	2610068	2642650	2606347.667	3
Method 4	2615853	2366320	2525441	2502538	4
Method 5	2815441	2741250	2775356	2777349	1

JSBench.me

Method	Run 1	Run 2	Run 3	Avg.	Rank
Method 1	17303999.34	18669299.96	16783919.58	17585739.63	2
Method 2	6940740.02	6606290.3	6502288.05	6683106.12	5
Method 3	16096156.21	15486862.02	15490723.59	15691247.27	3
Method 4	12156381.37	11547434.73	11957833.35	11887216.48	4
Method 5	30680035.11	30626210.94	29888080.94	30398109	1

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.