Run results for: JavaScript spread operator vs Object.assign vs mutation performance with condition #8

Run details:

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

Browser: Yandex Browser 22

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Using the spread operator	509989.9 Ops/sec
Using Object.assign	495165.2 Ops/sec
Using mutation	2804426.2 Ops/sec
Using iterable mutation	1075434.8 Ops/sec

Tests:

Using the spread operator
const firstObject = { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f', g: 'g' } const secondObject = { 0: 0, 1: 1, 2: 2, 3: 3, 4: '4', 5: '5', 6: '6', 7: '7' } const conditionState = Boolean(Object.keys(secondObject).length) const finalObject = { ...firstObject, ...(conditionState ? secondObject : {}), ...(conditionState ? secondObject : {}), ...(!conditionState ? secondObject : {}) };
Using Object.assign
const firstObject = { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f', g: 'g' } const secondObject = { 0: 0, 1: 1, 2: 2, 3: 3, 4: '4', 5: '5', 6: '6', 7: '7' } const conditionState = Boolean(Object.keys(secondObject).length) const finalObject = Object.assign(firstObject, conditionState && secondObject, conditionState && secondObject, !conditionState && secondObject);
Using mutation
const firstObject = { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f', g: 'g' } const secondObject = { 0: 0, 1: 1, 2: 2, 3: 3, 4: '4', 5: '5', 6: '6', 7: '7' } const conditionState = Boolean(Object.keys(secondObject).length) const finalObject = { a: firstObject.a, b: firstObject.b, c: firstObject.c, d: firstObject.d, e: firstObject.e, f: firstObject.f, g: firstObject.g } if (conditionState) { finalObject[0] = secondObject[0] finalObject[1] = secondObject[1] finalObject[2] = secondObject[2] finalObject[3] = secondObject[3] finalObject[4] = secondObject[4] finalObject[5] = secondObject[5] finalObject[6] = secondObject[6] finalObject[7] = secondObject[7] } if (conditionState) { finalObject[0] = secondObject[0] finalObject[1] = secondObject[1] finalObject[2] = secondObject[2] finalObject[3] = secondObject[3] finalObject[4] = secondObject[4] finalObject[5] = secondObject[5] finalObject[6] = secondObject[6] finalObject[7] = secondObject[7] } if (!conditionState) { finalObject[0] = secondObject[0] finalObject[1] = secondObject[1] finalObject[2] = secondObject[2] finalObject[3] = secondObject[3] finalObject[4] = secondObject[4] finalObject[5] = secondObject[5] finalObject[6] = secondObject[6] finalObject[7] = secondObject[7] }
Using iterable mutation
const firstObject = { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f', g: 'g' } const secondObject = { 0: 0, 1: 1, 2: 2, 3: 3, 4: '4', 5: '5', 6: '6', 7: '7' } const conditionState = Boolean(Object.keys(secondObject).length) const finalObject = {} for (const key in finalObject) { finalObject[key] = firstObject[key] } if (conditionState) { for (const key in secondObject) { finalObject[key] = secondObject[key] } } if (conditionState) { for (const key in secondObject) { finalObject[key] = secondObject[key] } } if (!conditionState) { for (const key in secondObject) { finalObject[key] = secondObject[key] } }

Run results for: JavaScript spread operator vs Object.assign vs mutation performance with condition #8

Using the spread operator

Using Object.assign

Using mutation

Using iterable mutation