Initializing array as is vs doing array.push(item) in javascript

Question

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?

Why are you worrying about this? Choose one or the other. If you think option 2 is more readable use that. Premature optimisation is a pointless exercise. But, personally, I would go for option 1. — Andy
– Andy, Commented May 12, 2022 at 18:08
Performance-wise: no difference. If you worry, benchmark it! But I have to disagree that the latter with mutations is more readable. — Bergi
– Bergi, Commented May 12, 2022 at 18:08
The former is MUCH more readable to people who know what an array is. — mplungjan
– mplungjan, Commented May 12, 2022 at 18:08
There are some neat tools, like jsbench.me, which make quickly testing stuff like this really easy, without having to write your own benchmark. But if you're unsure, I've written a benchmarking script an answer below. Hope it helps.. — Alicia Sykes
– Alicia Sykes, Commented May 12, 2022 at 18:27

Alicia Sykes · Accepted Answer · 2022-05-12 19:16:25Z

3

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

edited May 12, 2022 at 19:16

answered May 12, 2022 at 18:11

Alicia Sykes

7,3928 gold badges39 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bergi Over a year ago

What browser are you using? I cannot reproduce a 95% difference (even with more iterations). Also, beware of microbenchmarks - you'll need to 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.

Alicia Sykes Over a year ago

I'm using Firefox, but also get a similar result in Brave: It's outputting: 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.

Collectives™ on Stack Overflow

Initializing array as is vs doing array.push(item) in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related