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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0

Browser: Chrome 130

Operating system: Windows

Device Platform: Desktop

Date tested: 2 days ago

Test name	Executions per second
Create a copy using the spread operator	6546440.0 Ops/sec
Create a copy using array.concat	1745822.6 Ops/sec
Create a copy manually in a loop using push	147850.8 Ops/sec
Create a copy manually in a loop by index	161804.0 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