Benchmark: Object.assign vs normal set vs object iterate

Script Preparation code:

data = {
    innerText: 'Apply Now',
    href: 'https://example.com',
    className: 'link',
    target: '_blank',
    rel: 'noopener noreferrer'
};

Tests:

Object.assign
Object.assign(document.createElement('a'), data);
Normal set
const link = document.createElement('a'); link.innerText = 'Apply Now'; link.href = 'https://example.com'; link.className = 'link'; link.target = '_blank'; link.rel = 'noopener noreferrer';
Object.entries
const link = document.createElement('a'); for (const [key, value] of Object.entries(data)) { link[key] = value; }
for in loop
const link = document.createElement('a'); for (const key in data) { link[key] = data[key]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
Normal set
Object.entries
for in loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Linux

View result in a separate tab

Test name	Executions per second
Object.assign	213415.6 Ops/sec
Normal set	297168.7 Ops/sec
Object.entries	207881.5 Ops/sec
for in loop	200488.0 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 its test cases.

**Benchmark Overview**

The benchmark compares three approaches to assign properties to an HTML anchor element: `Object.assign()`, normal assignment using dot notation (`link.innerText = 'Apply Now';...`), and iterating over an object using `Object.entries()` or a `for...in` loop.

**Options Compared**

1. **Object.assign()**: This method is used to copy the properties of one or more source objects into another object.
2. **Normal set**: Using dot notation to assign individual properties to the anchor element.
3. **Object.entries()**: Iterating over an object's key-value pairs using `Object.entries()` and then assigning each value to a corresponding property on the anchor element.
4. **for...in loop**: Iterating over the object's properties using a `for...in` loop and then assigning each value to a corresponding property on the anchor element.

**Pros and Cons**

1. **Object.assign()**:
	* Pros: Fast, concise, and easy to read.
	* Cons: Can be less readable for complex objects or nested structures.
2. **Normal set**:
	* Pros: Easy to read, well-known syntax.
	* Cons: Less efficient than `Object.assign()` for large numbers of properties.
3. **Object.entries()**:
	* Pros: More concise and expressive than `for...in` loop for iterating over objects.
	* Cons: Requires modern JavaScript versions (ES6+) and may not be supported in older browsers.
4. **for...in loop**:
	* Pros: Can handle nested objects or complex property names.
	* Cons: Less efficient, more verbose, and potentially error-prone than other approaches.

**Libraries and Special Features**

The benchmark does not use any external libraries. However, it assumes that the `document` object is available in the context of the test cases.

There are no special JavaScript features or syntax mentioned in the provided benchmark definition or test cases.

**Other Alternatives**

1. **Array.prototype.forEach()**: This method can be used to iterate over an array's elements and assign each value to a corresponding property on an object.
2. **Object.assign()` with a custom iterator**: Some browsers support using a custom iterator function with `Object.assign()`. However, this approach is not shown in the provided benchmark.
3. **Other iterative approaches**: Other ways to iterate over objects or arrays, such as using `for` loops with indexes (`i = 0; i < data.length; i++`) or recursive functions, are not explored in this benchmark.

Overall, the benchmark provides a simple and concise way to compare the performance of different methods for assigning properties to an HTML anchor element.

Related benchmarks:

Object.assign vs normal set vs object iterate (version: 0)

Comparing performance of: Object.assign vs Normal set vs Object.entries vs for in loop

Created: 2 years ago by: Guest

Jump to the latest result

Object.assign

Normal set

Object.entries

for in loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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