Is it more efficient to declare the length of array before assigning values at its indices?

Question

Is there any benefit to setting the array's length before assigning values?

For example,

let arr = [];
arr.length = 10;
arr[0] = 'a'; // arr.length === 10
...
arr[9] = 'i'; // arr.length === 10

or even

let arr = new Array(10);
arr[0] = 'a'; // arr.length === 10
...
arr[9] = 'i'; // arr.length === 10

versus

let arr = [];
arr[0] = 'a'; // arr.length === 1
arr[1] = 'b'; // arr.length === 2
...
arr[9] = 'i'; // arr.length === 10

Answer 1

In V8, at least, it would appear that new Array(length) is much faster than the alternatives, by at least an order of magnitude. Including the push method just for fun:

(warning: running the following code will block your browser for a bit)

const t0 = performance.now();
for (let i = 0; i < 2e6; i++) {
  const arr = [];
  arr.length = 7;
  arr[0] = 'a';
  arr[1] = 'b';
  arr[2] = 'c'
  arr[3] = 'd'
  arr[4] = 'e'
  arr[5] = 'f';
  arr[6] = 'g';
}
const t1 = performance.now();
for (let i = 0; i < 2e6; i++) {
  const arr = new Array(7);
  arr[0] = 'a';
  arr[1] = 'b';
  arr[2] = 'c'
  arr[3] = 'd'
  arr[4] = 'e'
  arr[5] = 'f';
  arr[6] = 'g';
}
const t2 = performance.now();
for (let i = 0; i < 2e6; i++) {
  const arr = [];
  arr[0] = 'a';
  arr[1] = 'b';
  arr[2] = 'c'
  arr[3] = 'd'
  arr[4] = 'e'
  arr[5] = 'f';
  arr[6] = 'g';
}
const t3 = performance.now();
for (let i = 0; i < 2e6; i++) {
  const arr = [];
  arr.push('a');
  arr.push('b');
  arr.push('c');
  arr.push('d');
  arr.push('e');
  arr.push('f');
  arr.push('g');
}
const t4 = performance.now();

console.log('arr.length = length', t1 - t0);
console.log('new Array(length)', t2 - t1);
console.log('arr = [] only', t3 - t2);
console.log('push only', t4 - t3);

The difference is less impressive on Firefox, but it's still there - new Array(length) appears to be something like twice as fast as the other possibilities. You might think that

const arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

would be even more efficient, which is true in FF (by another couple orders of magnitude) but it would appear to be about the same as new Array(length) in V8:

const t0 = performance.now();
for (let i = 0; i < 2e8; i++) {
  const arr = new Array(7);
  arr[0] = 'a';
  arr[1] = 'b';
  arr[2] = 'c'
  arr[3] = 'd'
  arr[4] = 'e'
  arr[5] = 'f';
  arr[6] = 'g';
}
const t1 = performance.now();
for (let i = 0; i < 2e8; i++) {
  const arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
}
const t2 = performance.now();

console.log('new Array(length)', t1 - t0);
console.log(`arr = ['a', 'b', ...]`, t2 - t1);