Run results for: Array spread vs concat vs others for adding an item and getting an immutable copy

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser: Chrome 130

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Create a copy using the spread operator	5092517.0 Ops/sec
Create a copy using array.concat	1387774.4 Ops/sec
Create a copy manually in a loop using push	111733.8 Ops/sec
Create a copy manually in a loop by index	121042.9 Ops/sec

Script Preparation code:

const array = [
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
];

Tests:

Create a copy using the spread operator
const newArray = [...array, { foo: 'bar' }];
Create a copy using array.concat
const newArray = array.concat({ foo: 'bar' });
Create a copy manually in a loop using push
const newArray = []; const len = array.length; for (let i = 0; i < len; i++) { newArray.push(array[i]); } newArray.push({ foo: 'bar' });
Create a copy manually in a loop by index
const len = array.length; const newArray = new Array(len + 1); for (let i = 0; i < len; i++) { newArray[i] = array[i]; } newArray[len] = { foo: 'bar' };

Run results for: Array spread vs concat vs others for adding an item and getting an immutable copy

Create a copy using the spread operator

Create a copy using array.concat

Create a copy manually in a loop using push

Create a copy manually in a loop by index