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

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 [k,v] of Object.entries(b)) a[k] = b[v];
condensed
const a = { x: 'xxx', y: 1, z: null } for (let prop in { z: 1, u: 'uuu', v: null }) a[prop] = 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
condensed

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 124 on Windows

View result in a separate tab

condensed

33.8M/s

for in loop

32.3M/s

Object.assign

12.3M/s

for of loop

9.3M/s

View exact numbers

Test name	Executions per second
✓ condensed	33,796,912 Ops/sec
for in loop	32,287,086 Ops/sec
Object.assign	12,307,975 Ops/sec
for of loop	9,344,111 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 JavaScript microbenchmark being tested on MeasureThat.net.

**Benchmark Description**

The benchmark compares four approaches to copy properties from one object (`b`) to another object (`a`):

1. `Object.assign()`
2. For-in loop
3. For-of loop
4. Condensed ( implicit iteration using an object literal with spread operator )

**What is being tested?**

Each test case measures the performance of a specific approach when copying properties from `b` to `a`. The tests are designed to simulate the scenario where you want to merge two objects in JavaScript.

**Options compared:**

* `Object.assign()`: A built-in method that copies all enumerable own properties from one or more source objects to a target object.
* For-in loop: Uses a traditional for loop to iterate over the keys of an object and assigns the corresponding values to another object.
* For-of loop: Uses a modern iteration syntax (introduced in ES6) to iterate over key-value pairs in an array-like object (in this case, `Object.entries(b)`).
* Condensed: Implicit iteration using an object literal with spread operator (`{ ...b }`), which creates a new object by spreading the properties of `b`.

**Pros and Cons:**

1. **Object.assign()**:
	* Pros: Fast, concise, and widely supported.
	* Cons: May not be as efficient as other methods for very large objects or when dealing with deeply nested structures.
2. For-in loop:
	* Pros: Portable across older browsers and systems.
	* Cons: Less readable than other options and can lead to security issues if not used carefully (e.g., modifying the original object).
3. For-of loop:
	* Pros: Modern, concise, and easy to read.
	* Cons: May not be supported in older browsers or systems.
4. Condensed:
	* Pros: Concise and modern syntax.
	* Cons: May be less readable than other options for large or complex objects.

**Library/Features Used:**

None explicitly mentioned, but the use of `Object.entries()` and spread operator (`...`) implies familiarity with modern JavaScript features.

**Special JS Feature/Syntax:**

The benchmark uses ES6+ syntax (e.g., `for-of loop`, `Object.entries()`, spread operator), which is a relatively recent addition to the JavaScript language. This suggests that the test is designed for modern browsers and environments.

Now, regarding alternative approaches:

Other options you could consider using in similar scenarios include:

* Using `reduce()` method with an accumulator function
* Implementing your own merge function using recursion or iteration
* Using a library like Lodash (`_.merge()`)

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

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

Created: 4 years ago by: Guest

Go to the latest result

Object.assign

for in loop

for of loop

condensed

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 loop vs condensed (version: 0) Benchmark.js

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

Created: 4 years ago by: Guest

Go to the latest result

Object.assign

for in loop

for of loop

condensed

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 vs condensed`