Benchmark: Object.assign vs. JavaScript Polyfill Example

Script Preparation code:

const sourceObjects = [];
const destObjects = [];

for (let i = 0; i < 500; ++i) {
    const sourceObject = {};
    for (let j = 0; j < 10; ++j) {
        sourceObject[Math.random().toFixed(0) * 1000] = Math.random().toFixed(0) * 1000;
    }
  
    const destObject = {};
    for (let j = 0; j < 5; ++j) {
        destObject[Math.random().toFixed(0) * 1000] = Math.random().toFixed(0) * 1000;
    }
  
    sourceObjects.push(sourceObject);
    destObjects.push(destObject);
}

window.sourceObjects = sourceObjects;
window.destObjects = destObjects;

​x
 
const sourceObjects = [];const destObjects = [];​for (let i = 0; i < 500; ++i) {    const sourceObject = {};    for (let j = 0; j < 10; ++j) {        sourceObject[Math.random().toFixed(0) * 1000] = Math.random().toFixed(0) * 1000;    }      const destObject = {};    for (let j = 0; j < 5; ++j) {        destObject[Math.random().toFixed(0) * 1000] = Math.random().toFixed(0) * 1000;    }      sourceObjects.push(sourceObject);    destObjects.push(destObject);}​window.sourceObjects = sourceObjects;window.destObjects = destObjects;

Tests:

Object.assign

const sourceObjects = window.sourceObjects;
const destObjects = window.destObjects;

for (let i = 0; i < sourceObjects.length; ++i) {
    const destObject = destObjects[i];
    const sourceObject = sourceObjects[i];
  
    const newObject = Object.assign(destObject, sourceObject);
}

 
const sourceObjects = window.sourceObjects;const destObjects = window.destObjects;​for (let i = 0; i < sourceObjects.length; ++i) {    const destObject = destObjects[i];    const sourceObject = sourceObjects[i];      const newObject = Object.assign(destObject, sourceObject);}

Polyfill Extend

function objForEachKey(target, callbackfn) {
    if (target) {
        for (var prop in target) {
            if (Object.prototype.hasOwnProperty.call(target, prop)) {
                callbackfn.call(target, prop, target[prop]);
            }
        }
    }
}

function extend(obj, obj2, obj3, obj4, obj5) {
    // Variables
    var extended = {};
    var deep = false;
    var i = 0;
    var length = arguments.length;
    var objProto = Object.prototype;
    var theArgs = arguments;
    // Check if a deep merge
    if (objProto.toString.call(theArgs[0]) === "[object Boolean]") {
        deep = theArgs[0];
        i++;
    }
    // Loop through each object and conduct a merge
    for (; i < length; i++) {
        var obj = theArgs[i];
        objForEachKey(obj, function (prop, value) {
            extended[prop] = value;
        });
    }
    return extended;
}

const sourceObjects = window.sourceObjects;
const destObjects = window.destObjects;

for (let i = 0; i < sourceObjects.length; ++i) {
    const destObject = destObjects[i];
    const sourceObject = sourceObjects[i];
  
    const newObject = extend(destObject, sourceObject);
}

 
function objForEachKey(target, callbackfn) {    if (target) {        for (var prop in target) {            if (Object.prototype.hasOwnProperty.call(target, prop)) {                callbackfn.call(target, prop, target[prop]);            }        }    }}​function extend(obj, obj2, obj3, obj4, obj5) {    // Variables    var extended = {};    var deep = false;    var i = 0;    var length = arguments.length;    var objProto = Object.prototype;    var theArgs = arguments;    // Check if a deep merge    if (objProto.toString.call(theArgs[0]) === "[object Boolean]") {        deep = theArgs[0];        i++;    }    // Loop through each object and conduct a merge    for (; i < length; i++) {        var obj = theArgs[i];        objForEachKey(obj, function (prop, value) {            extended[prop] = value;        });    }    return extended;}​const sourceObjects = window.sourceObjects;const destObjects = window.destObjects;​for (let i = 0; i < sourceObjects.length; ++i) {    const destObject = destObjects[i];    const sourceObject = sourceObjects[i];      const newObject = extend(destObject, sourceObject);}​

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Object.assign
Polyfill Extend

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36 Edg/97.0.1072.76

Browser/OS: Chrome 97 on Windows

View result in a separate tab

Test name	Executions per second
Object.assign	1333.7 Ops/sec
Polyfill Extend	524.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):

Let's dive into the explanation of the provided benchmark.

What is tested?

The benchmark compares two approaches to merge objects in JavaScript:

Object.assign(): A built-in method that copies properties from one or more source objects to a target object.
A custom implementation, known as "Polyfill Extend", which achieves the same result using a loop and recursion.

Options compared:

The benchmark compares the performance of Object.assign() vs. the Polyfill Extend implementation.
Both approaches aim to merge two arrays of objects into one array with merged objects.

Pros and Cons:

Object.assign():
- Pros: Efficient, widely supported, and easy to use.
- Cons: May not work as expected if the source or target object is not an object, and it only copies enumerable properties.
Polyfill Extend:
- Pros: Customizable, can handle non-enumerable properties, and can be used with any type of data structure.
- Cons: More complex to implement, may have performance overhead due to the recursive loop.

Library/Extension:

In this benchmark, there is no explicit library or extension being tested. However, the Polyfill Extend implementation uses a custom objForEachKey() function and an extend() function from the Lodash library (not explicitly mentioned in the benchmark code). The use of Lodash suggests that the test author wanted to compare the performance of Object.assign() against a well-known polyfill implementation.

Special JS feature or syntax:

There are no special JavaScript features or syntax being tested in this benchmark. Both approaches rely on standard JavaScript constructs.

Other alternatives:

If you're interested in exploring alternative merge methods, here are a few:

Lodash's _.merge(): A built-in method that merges two objects into one.
ES6's Object.assign() with spread syntax: An updated implementation of Object.assign() using the spread operator ({ ... }).
Manual loop-based merge: Implementing a custom merge function from scratch, similar to the Polyfill Extend approach.

In conclusion, this benchmark provides a useful comparison between two approaches to merging objects in JavaScript. By choosing one or both of these methods, developers can optimize their code for performance and readability.

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**What is tested?**

The benchmark compares two approaches to merge objects in JavaScript:

1. `Object.assign()`: A built-in method that copies properties from one or more source objects to a target object.
2. A custom implementation, known as "Polyfill Extend", which achieves the same result using a loop and recursion.

**Options compared:**

* The benchmark compares the performance of `Object.assign()` vs. the Polyfill Extend implementation.
* Both approaches aim to merge two arrays of objects into one array with merged objects.

**Pros and Cons:**

* **Object.assign()**:
	+ Pros: Efficient, widely supported, and easy to use.
	+ Cons: May not work as expected if the source or target object is not an object, and it only copies enumerable properties.
* **Polyfill Extend**:
	+ Pros: Customizable, can handle non-enumerable properties, and can be used with any type of data structure.
	+ Cons: More complex to implement, may have performance overhead due to the recursive loop.

**Library/Extension:**

In this benchmark, there is no explicit library or extension being tested. However, the Polyfill Extend implementation uses a custom `objForEachKey()` function and an `extend()` function from the Lodash library (not explicitly mentioned in the benchmark code). The use of Lodash suggests that the test author wanted to compare the performance of `Object.assign()` against a well-known polyfill implementation.

**Special JS feature or syntax:**

There are no special JavaScript features or syntax being tested in this benchmark. Both approaches rely on standard JavaScript constructs.

**Other alternatives:**

If you're interested in exploring alternative merge methods, here are a few:

* **Lodash's `_.merge()`**: A built-in method that merges two objects into one.
* **ES6's `Object.assign()` with spread syntax**: An updated implementation of `Object.assign()` using the spread operator (`{ ... }`).
* **Manual loop-based merge**: Implementing a custom merge function from scratch, similar to the Polyfill Extend approach.

Related benchmarks:

Object.assign vs. JavaScript Polyfill Example (version: 1)

Comparing Object.assign vs. a JavaScript Implementation that achieves the same thing

Comparing performance of: Object.assign vs Polyfill Extend

Created: 3 years ago by: Registered User

Jump to the latest result