Benchmark: Object.assign vs direct assignment

Script Preparation code:

var data = {};

Tests:

Direct Assignment
for(var i = 0; i < 10000; i++) { data[`prop_${i}`] = true; }
Object.assign
for(var i = 0; i < 10000; i++) { var propName = `prop_${i}`; Object.assign(data, { [propName]: true }); }

Historical Performance Data aggregated from 49 community runs

Desktop Results:

Chrome 42 runs

Direct Assignment

916/s

Object.assign

199/s

Fastest: Direct Assignment (4.6x faster)

View exact numbers

✓ Direct Assignment: 916 ops/sec
• Object.assign: 199 ops/sec

Firefox 7 runs

Direct Assignment

1K/s

Object.assign

629/s

Fastest: Direct Assignment (1.8x faster)

View exact numbers

✓ Direct Assignment: 1,150 ops/sec
• Object.assign: 629 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Direct Assignment
Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:152.0) Gecko/20100101 Firefox/152.0

Browser/OS: Firefox 152 on Mac OS X 10.15

View result in a separate tab

Direct Assignment

2K/s

Object.assign

926/s

View exact numbers

Test name	Executions per second
✓ Direct Assignment	1,511 Ops/sec
Object.assign	926 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 explanation of the benchmark.

**Benchmark Definition and Purpose**

The benchmark is designed to compare two approaches for assigning properties to an object in JavaScript: direct assignment (`data[prop_i] = true;`) versus using the `Object.assign()` method.

**Options Compared**

There are two options being compared:

1. **Direct Assignment**: This approach uses the dot notation (`data[prop_i] = true;`) to assign a value to a property on the object `data`. This is a simple and concise way to set properties, but it may not be as flexible or efficient for complex objects.
2. **Object.assign() Method**: This approach uses the `Object.assign()` method to assign multiple properties to an object at once. The syntax involves creating an object with property names as keys and values as values, and then passing this object to `Object.assign()` to set the properties on the target object.

**Pros and Cons of Each Approach**

* **Direct Assignment**:
	+ Pros: Simple, concise, and easy to read.
	+ Cons: May not be efficient for large numbers of properties or complex objects, as it involves repeated lookups in the object.
* **Object.assign() Method**:
	+ Pros: Efficient for large numbers of properties or complex objects, as it avoids repeated lookups and can set multiple properties at once.
	+ Cons: May be less readable than direct assignment, especially for simple cases.

**Library Used**

In this benchmark, the `Object` library is used. The `Object.assign()` method is a part of the ECMAScript standard, but it was introduced in ECMAScript 2015 (ES6), so its support may not be universal across all browsers and platforms.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark. The code uses only standard ECMAScript syntax.

**Other Alternatives**

If you wanted to test other approaches, you could consider:

* **Using a library like Lodash**: Lodash provides an `assign()` function that can be used to assign multiple properties to an object.
* **Using a different assignment method**, such as using the spread operator (`{ ...data, [propName]: true }`).
* **Testing performance with other browsers or platforms** to see how the results vary.

In terms of test preparation code, it's worth noting that both examples use the same script preparation code (`var data = {};`) and HTML preparation code (none). This suggests that the focus is on comparing the two assignment methods themselves, rather than exploring other aspects of JavaScript or performance variations due to environment.

Object.assign vs direct assignment (version: 0)

Comparing performance of: `Direct Assignment vs Object.assign`

Created: 6 years ago by: Guest

Go to the latest result

Direct Assignment

Object.assign

Historical Performance Data aggregated from 49 community runs

Desktop Results:

Chrome 42 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Object.assign vs direct assignment (version: 0)

Comparing performance of: Direct Assignment vs Object.assign

Created: 6 years ago by: Guest

Go to the latest result

Direct Assignment

Object.assign

Historical Performance Data aggregated from 49 community runs

Desktop Results:

Chrome 42 runs

Firefox 7 runs

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: `Direct Assignment vs Object.assign`