Benchmark: Object assign vs direct assignment by iterating keys without Object.keys

Object assign vs direct assignment by iterating keys without Object.keys (version: 0) Benchmark.js

Should you be saving your fields to an object with Object.keys(toSave).forEach(k => ...) or by for(var i in object) { toSave[i] } or by Object.assign(destination, toSave);

Comparing performance of: `With Object.assign() vs With Iteration and Assignment vs With Iteration and .keys().forEach vs With for iteration`

Created: 2 years ago by: Guest

Go to the latest result

Tests:

With Object.assign()
var toSave = { "def":100101102, "ghi":null, "jkl":106107108, "mno":109110111.106107108, "pqr":'112113114', "stu":NaN, "vwx":118119120, "yz{":[ { "vwx":118119120 }, { "vwx":118119120 } ], }; var dest = { "abc":979899 }; if (toSave) { Object.assign(dest, toSave); }
With Iteration and Assignment
var toSave = { "def":100101102, "ghi":null, "jkl":106107108, "mno":109110111.106107108, "pqr":'112113114', "stu":NaN, "vwx":118119120, "yz{":[ { "vwx":118119120 }, { "vwx":118119120 } ], }; var dest = { "abc":979899 }; if (toSave) { var keys = Object.keys(dest); for (var i = 0; i < keys.length; i++) { dest[keys[i]] = toSave[keys[i]]; } }
With Iteration and .keys().forEach
var toSave = { "def":100101102, "ghi":null, "jkl":106107108, "mno":109110111.106107108, "pqr":'112113114', "stu":NaN, "vwx":118119120, "yz{":[ { "vwx":118119120 }, { "vwx":118119120 } ], }; var dest = { "abc":979899 }; if (toSave) { var keys = Object.keys(dest).forEach(key => { dest[key] = toSave[key]; }); }
With for iteration
var toSave = { "def":100101102, "ghi":null, "jkl":106107108, "mno":109110111.106107108, "pqr":'112113114', "stu":NaN, "vwx":118119120, "yz{":[ { "vwx":118119120 }, { "vwx":118119120 } ], }; var dest = { "abc":979899 }; if (toSave) { for (const key in toSave) { dest[key] = toSave[key]; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
With Object.assign()
With Iteration and Assignment
With Iteration and .keys().forEach
With for iteration

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

With Iteration and Assignment

4.1M/s

With Iteration and .keys().forEach

3.5M/s

With for iteration

2.9M/s

With Object.assign()

2.3M/s

View exact numbers

Test name	Executions per second
✓ With Iteration and Assignment	4,123,526 Ops/sec
With Iteration and .keys().forEach	3,499,085 Ops/sec
With for iteration	2,909,476 Ops/sec
With Object.assign()	2,340,598 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The test is comparing three ways to copy an object from `toSave` to `dest`:

1. **Object.assign()**: uses the spread operator (`...`) or `Object.assign()` method to create a shallow copy of the source object.
2. **Iteration and Assignment**: manually iterates over the keys of the source object using `for...in` loop and assigns values to the destination object.
3. **Iteration with .keys().forEach()**: uses the `Object.keys()` method and `forEach()` method to iterate over the keys of the source object and assigns values to the destination object.
4. **For Iteration**: uses a traditional `for` loop to iterate over the keys of the source object and assigns values to the destination object.

**What's being tested**

The test is measuring the performance (number of executions per second) of each approach in copying an object with various types of data, including numbers, strings, null, NaN, and nested arrays.

**Options Compared**

Here are the options being compared:

* **Object.assign()**: a built-in method for creating a shallow copy of an object.
* **Iteration and Assignment**: a manual approach using `for...in` loop to iterate over keys and assign values.
* **Iteration with .keys().forEach()**: using `Object.keys()` and `forEach()` to iterate over keys and assign values.
* **For Iteration**: a traditional `for` loop to iterate over keys and assign values.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **Object.assign()**:
	+ Pros: concise, efficient, and widely supported.
	+ Cons: shallow copy, may not preserve all object properties (e.g., inherited ones).
* **Iteration and Assignment**:
	+ Pros: flexible, can handle nested objects, but may be slower due to manual iteration.
	+ Cons: verbose, error-prone if not done correctly.
* **Iteration with .keys().forEach()**:
	+ Pros: concise, efficient, and easy to read.
	+ Cons: requires modern JavaScript (ES6+) support for `Object.keys()` and `forEach()` methods.
* **For Iteration**:
	+ Pros: widely supported across browsers and versions, can handle nested objects.
	+ Cons: verbose, may be slower due to manual iteration.

**Other Considerations**

When deciding which approach to use:

* If you need a shallow copy of an object with simple properties, `Object.assign()` is likely the best choice.
* If you need to preserve all object properties (e.g., inherited ones) or handle nested objects, one of the iterative approaches might be more suitable.
* If you're working with modern JavaScript and want a concise solution, consider using `Object.keys()` and `forEach()`.