Benchmark: Object.assign vs direct assign

Script Preparation code:

var prop = 'asdasdasdasd'
var fun = () => 'hello'
var prop2 = { name: 'Jan', age: 86}

Tests:

Object.assign
const obj = Object.assign({},{prop},{fun},{prop2})
direct assign
const obj = {} obj.prop = prop obj.fun = fun obj.prop2 = prop2

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
direct assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 85 on Windows

View result in a separate tab

Test name	Executions per second
Object.assign	1679679.6 Ops/sec
direct assign	3525642.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and explain what's being tested, the options compared, pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark compares two ways to create an object in JavaScript: using `Object.assign()` and direct assignment (using dot notation or bracket notation).

**Script Preparation Code**

```javascript
var prop = 'asdasdasdasd';
var fun = () => 'hello';
var prop2 = { name: 'Jan', age: 86 };
```

This code defines three variables: `prop`, `fun`, and `prop2`. The variable `fun` is a function that returns the string `'hello'`.

**Html Preparation Code**

The "Html Preparation Code" field is empty, which means the benchmark doesn't require any HTML setup.

**Individual Test Cases**

There are two test cases:

1. **Object.assign**
```javascript
const obj = Object.assign({}, {}, {prop}, {fun}, {prop2});
```

This code creates an object `obj` by calling `Object.assign()` with six arguments: three objects (`{}`, `{prop}`, and `{prop2}`) and two values (`fun` and the string `'hello'`). The resulting object will have all the properties from the first two objects, including `prop` and `fun`, and then extend it with the third and fourth objects.

2. **Direct Assign**
```javascript
const obj = {};
obj.prop = prop;
obj.fun = fun;
obj.prop2 = prop2;
```

This code creates an empty object `obj` and then uses dot notation to assign three properties: `prop`, `fun`, and `prop2`. The resulting object will have these properties.

**Benchmark Results**

The latest benchmark result shows the execution times for each test case on a Chrome 85 browser:

| Test Name | ExecutionsPerSecond |
| --- | --- |
| direct assign | 3,527,642.5 |
| Object.assign | 1,679,679.625 |

**What's being tested?**

The benchmark is testing the performance difference between two approaches to create an object in JavaScript: using `Object.assign()` and direct assignment.

**Options compared**

* **Object.assign()**: a built-in JavaScript function that creates a new object by copying properties from one or more source objects.
* **Direct Assign**: using dot notation or bracket notation to assign properties directly to an existing object.

**Pros and Cons of each approach:**

1. **Object.assign():**
	* Pros:
		+ More concise and expressive syntax
		+ Less error-prone (e.g., no need to worry about property names)
	* Cons:
		+ May be slower than direct assignment due to the overhead of function calls and object creation
2. **Direct Assign:**
	* Pros:
		+ Can be faster for simple assignments, since it avoids the overhead of function calls and object creation
	* Cons:
		+ More verbose syntax can lead to errors (e.g., typos or property name mistakes)
		+ Less readable code

**Considerations:**

* The performance difference between `Object.assign()` and direct assignment is likely due to the overhead of creating a new function object (`fun`) in the `Object.assign()` approach.
* For simple assignments, direct assign might be faster. However, for more complex assignments or when working with large datasets, `Object.assign()` can provide a more concise and readable way to create objects.

**Other alternatives:**

* **Array.prototype.push()**: you could use `push()` to add properties to an array-like object (like the one created by `Object.assign()`), but this approach is less common and might not be supported in all browsers.
* **`const obj = Object.create(null)`**: you could create an object without any prototype using `Object.create(null)`, which would then require manual property assignment. This approach is more verbose than `Object.assign()` or direct assign.

Keep in mind that the performance difference between these approaches can vary depending on the specific use case, browser, and JavaScript engine used.

Related benchmarks:

Object.assign vs direct assign (version: 0)

Comparing performance of: Object.assign vs direct assign

Created: 4 years ago by: Guest

Jump to the latest result

Object.assign

direct assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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