What's the fastest way to populate an array in Javascript?
Tags: javascript
Published: 2020-12-02 16:47:01

# tldr

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

```js
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"
```js
const array = [];
for(let i=0; i< arraySize; i+=1) {
	array[i] = { id: i, name:"test" };
}
```

"Method 2"
```js
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](https://jsben.ch/) and [JSBench.me](https://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"
```js
const array = [];
for(let i=0; i< arraySize; i+=1) {
	array[i] = { id: i, name:"test" };
}
```

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

```

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

```

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

```

"Method 5"
```js
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](https://jsben.ch/HTH7K)

| 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;

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