Run results for: flatMap(spread, concat) vs reduce vs forEach

Run details:

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

Browser: Chrome 102

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
reduce with spread	1.7 Ops/sec
reduce with concat	5.9 Ops/sec
flat	141.7 Ops/sec
foreach	584.4 Ops/sec

Script Preparation code:

const sections = [
      {
        id: 'what',
        name: 'what',
        items: [
          {
            id: 'id',
            name: 'Id'
          },
          {
            id: 'yo',
            name: 'Date'
          }
        ]
      },
      {
        id: 'hey',
        name: 'hey',
        items: []
      },
      {
        id: 'ha',
        name: 'ha',
        items: [
          {
            id: 'good',
            name: 'good'
          }
        ]
      }
    ];

    var arr = [...sections];
    Array(10000)
      .fill(0)
      .forEach((i) => {
        arr = arr.concat(sections);
      });

Tests:

reduce with spread
const case1 = arr.reduce( (acc, cur, i) => [...acc, ...cur.items.map((item) => item.id + i)], [] );
reduce with concat
const case2 = arr.reduce((acc, cur, i) => acc.concat(cur.items.map((item) => item.id + i)), []);
flat
const case3 = arr.flatMap((x, i) => x.items.map((item) => item.id + i));
foreach
const case4 = []; arr.forEach((section, i) => { section.items.forEach((item) => { case4.push(item.id + i); }); });

Run results for: flatMap(spread, concat) vs reduce vs forEach

reduce with spread

reduce with concat

flat

foreach