Is there any performance difference between doing:
const array = [1, 2]
and
const array = []
array.push(1);
array.push(2);
I think the latter is more readable. I read that array.push() is faster in some browsers compared to doing array[n] = item, but did not find anything about initializing with the element as is. Are they both O(1) operations? Is there a downside to doing the latter?
The first method (const array = [1, 2]) is more performant, as there are fewer operations.
After running a quick benchmark to back this up, it appears that the second method is 95% slower! (based on approximately 736026k ops per sec, as opposed to 27184k ops per sec)
Here's a rudimentary demo which outputs how long (in milliseconds) that it takes to run each operation 1 million times.
const NUM_ITTERATIONS = 1000000;
// TC 1: Initializing an Array
function testCase1() {
const array = [1, 2]
}
// TC 2: Using Array.push()
function testCase2() {
const array = []
array.push(1);
array.push(2);
}
// Start timer, run given function x time, then end timer
const runPerformanceTest = (testCase, msg) => {
const startTime = performance.now();
let n = 0;
while (n < NUM_ITTERATIONS) {
testCase();
n++;
}
const endTime = performance.now();
const totalTime = endTime - startTime;
console.log(`${msg}: ${totalTime} ms`);
}
// Kick of the test for each function + print results
runPerformanceTest(testCase1, 'Test Case 1');
runPerformanceTest(testCase2, 'Test Case 2');Alternatively, here's a longer benchmark: https://jsbench.me/msl33e4b6k/1
return array (or even better assign it to a global variable), otherwise the const initialisation will be completely optimised away and you'll measure only an empty loop.
Test Case 1: 3.5 ms and Test Case 2: 17.3 for me. But I am aware this is terribly inaccurate given the browsers optimizations, and the tiny size of the loop. But it's the best I could include in a runnable snippet.