Run results for: Build vs copy object

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:123.0) Gecko/20100101 Firefox/123.0

Browser: Firefox 123

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

Build up object

10.2M/s

Assign and fill

8.9M/s

Copy and fill

5.1M/s

Use fromEntries

3.6M/s

View exact numbers

Test name	Executions per second
✓ Build up object	10,228,327 Ops/sec
Assign and fill	8,851,860 Ops/sec
Copy and fill	5,112,843 Ops/sec
Use fromEntries	3,587,368 Ops/sec

Script Preparation code:

keys = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
values = [1, 2, 3, 4, 5, 6, 7, 9, 10];
templateObj = Object.fromEntries(keys.map(k => [k, undefined]));
pairs = keys.map((k, i) => [k, values[i]]);

Tests:

Build up object
const obj = {}; for (const [k, v] of pairs) { obj[k] = v; }
Use fromEntries
Object.fromEntries(pairs)
Copy and fill
const obj = {...templateObj}; for (const [k, v] of pairs) { obj[k] = v; }
Assign and fill
const obj = {}; Object.assign(obj, templateObj); for (const [k, v] of pairs) { obj[k] = v; }

Run results for: Build vs copy object

Is it faster to add properties to an object one by one, or create an object with all of them and set values one by one?

Build up object

Use fromEntries

Copy and fill

Assign and fill