Benchmark: JavaScript Object.assign vs for in loop vs for of keys loop

Tests:

Object.assign
const a = { x: 'xxx', y: 1, z: null } const b = { z: 1, u: 'uuu', v: null } Object.assign(a, b);
for in loop
const a = { x: 'xxx', y: 1, z: null } const b = { z: 1, u: 'uuu', v: null } for (let prop in b) a[prop] = b[prop];
for of loop
const a = { x: 'xxx', y: 1, z: null } const b = { z: 1, u: 'uuu', v: null } for (let prop of Object.keys(b)) a[prop] = b[prop];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
for in loop
for of loop

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/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

for in loop

30.5M/s

Object.assign

11.3M/s

for of loop

9.6M/s

View exact numbers

Test name	Executions per second
✓ for in loop	30,531,734 Ops/sec
Object.assign	11,255,660 Ops/sec
for of loop	9,645,357 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark definition and test cases.

**What is being tested?**

MeasureThat.net is testing three different approaches to merge two objects in JavaScript:

1. **Object.assign**: A built-in method that merges two or more source objects into an object.
2. **For-in loop**: A traditional way of iterating over the properties of an object and assigning values from another object to a target object.
3. **For-of loop with Object.keys()**: A modern way of iterating over the properties of an object using a for-of loop, combined with the `Object.keys()` method to get an array of property names.

**Options compared**

The three approaches are being tested against each other, allowing users to compare their performance and choose the best one for their use case.

**Pros and cons of each approach:**

1. **Object.assign**:
	* Pros: Fast, concise, and easy to read.
	* Cons: Can be less intuitive than other approaches, especially for complex merge scenarios.
2. **For-in loop**:
	* Pros: Flexible and can handle complex merge scenarios.
	* Cons: Less efficient than built-in methods like `Object.assign`, requires manual property iteration.
3. **For-of loop with Object.keys()**:
	* Pros: Fast, modern, and easy to read, leveraging the latest JavaScript features.
	* Cons: Requires knowledge of the `Object.keys()` method and may not be as intuitive for complex merge scenarios.

**Library usage**

None of the test cases use any external libraries or dependencies other than built-in JavaScript methods.

**Special JS feature or syntax**

The tests utilize modern JavaScript features, such as:

1. **For-of loop**: A new way of iterating over arrays and objects using a simple `for` loop.
2. **Object.keys()**: A method that returns an array of property names in an object.
3. **Macros**: The `const` keyword is used to declare variables, and the `let` keyword is used to declare block-scoped variables.

**Alternatives**

Other approaches to merge two objects in JavaScript might include:

1. **Spreadsheets**: Some spreadsheets, like Google Sheets, offer automatic merging of data between sheets.
2. **Data binding libraries**: Libraries like React or Angular provide built-in features for handling data updates and merges.
3. **Manual property iteration**: You could write a custom function to iterate over the properties of an object and merge values from another object.

In conclusion, MeasureThat.net provides a simple and straightforward way to compare the performance of different approaches to merging two objects in JavaScript. By using built-in methods like `Object.assign`, traditional loops, and modern features like for-of loops with `Object.keys()`, users can choose the best approach for their specific use case.

JavaScript Object.assign vs for in loop vs for of keys loop (version: 0) Benchmark.js

Comparing performance of: `Object.assign vs for in loop vs for of loop`

Created: 2 years ago by: Guest

Go to the latest result

Object.assign

for in loop

for of loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JavaScript Object.assign vs for in loop vs for of keys loop (version: 0) Benchmark.js

Comparing performance of: Object.assign vs for in loop vs for of loop

Created: 2 years ago by: Guest

Go to the latest result

Object.assign

for in loop

for of loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Object.assign vs for in loop vs for of loop`