Benchmark: Create vs Mutate Object 2

Script Preparation code:

var collection = new Array(10000).map(item => ({a:null, b:null, c:null}))

Tests:

Create new object
collection.map(() => { return {a:1, b:1, c:1} })
Mutate object
collection.map((obj) => { obj.a = 1 obj.b = 1 obj.c = 1 return obj })
Destructure
collection.map((obj) => { return {...obj, a:1, b:1, c:1} })
Add new properties
collection.map((obj) => { obj.d = 1 obj.e = 1 obj.f = 1 return obj })
Just mutate in-place
collection.forEach((obj) => { obj.a = 1 obj.b = 1 obj.c = 1 })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Create new object
Mutate object
Destructure
Add new properties
Just mutate in-place

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, `Create vs Mutate Object 2`, tests the performance of different approaches to create or modify objects in a JavaScript array.

**Script Preparation Code**

```javascript
var collection = new Array(10000).map(item => ({a:null, b:null, c:null}));
```

This script creates an array of 10,000 objects with three null properties each. This serves as the base data for the benchmark.

**Benchmark Definition**

The benchmark consists of four test cases:

1. **Create new object**: `collection.map(() => {\r\n\treturn {a:1, b:1, c:1}\r\n})`
2. **Mutate object**: `collection.map((obj) => {\r\n\tobj.a = 1\r\n\tobj.b = 1\r\n\tobj.c = 1\r\n  return obj\r\n})`
3. **Destructure**: `collection.map((obj) => {\r\n  return {...obj, a:1, b:1, c:1}\r\n})`
4. **Add new properties**: `collection.map((obj) => {\r\n\tobj.d = 1\r\n\tobj.e = 1\r\n\tobj.f = 1\r\n  return obj\r\n})`

**Test Cases**

Each test case is designed to measure the performance of a specific approach:

* **Create new object**: Creates a new object with three properties (`a`, `b`, and `c`) on each iteration.
* **Mutate object**: Modifies the existing object by setting its properties (`a`, `b`, and `c`) to 1 on each iteration. The original object is returned.
* **Destructure**: Creates a new object with three properties (`a`, `b`, and `c`) using object destructuring, and adds new properties (`d`, `e`, and `f`) on each iteration.
* **Add new properties**: Modifies the existing object by adding new properties (`d`, `e`, and `f`) on each iteration.

**Library**

The benchmark uses the built-in `Array.prototype.map()` method to iterate over the array, but it's worth noting that this method is a part of the ECMAScript standard and does not rely on any specific library.

**Special JavaScript Features or Syntax**

None of the test cases use any special JavaScript features or syntax beyond what's necessary for the benchmark. However, it's worth mentioning that object destructuring was introduced in ECMAScript 2015 (ES6) and is supported by most modern browsers.

**Pros and Cons of Each Approach**

Here's a brief summary:

* **Create new object**: Creates a new object on each iteration, which can lead to memory overhead. However, it avoids modifying the original object.
	+ Pros: Avoids modifying the original object, potentially more efficient in terms of memory management.
	+ Cons: Creates a new object on each iteration, leading to increased memory allocation and garbage collection.
* **Mutate object**: Modifies the existing object by setting its properties to 1 on each iteration. This approach is faster than creating a new object but can lead to performance issues if the array is large.
	+ Pros: Faster than creating a new object, potentially more efficient in terms of CPU cycles.
	+ Cons: Modifies the original object, which may not be desirable depending on the use case.
* **Destructure**: Creates a new object with three properties using object destructuring and adds new properties on each iteration. This approach is faster than creating a new object but requires more complex syntax.
	+ Pros: Faster than creating a new object, potentially more efficient in terms of CPU cycles.
	+ Cons: Requires more complex syntax, may not be as intuitive for some developers.
* **Add new properties**: Modifies the existing object by adding new properties on each iteration. This approach is similar to `mutate object`, but adds new properties instead of overwriting existing ones.
	+ Pros: Similar performance characteristics to `mutate object`.
	+ Cons: Adds new properties instead of updating existing ones, which may not be desirable depending on the use case.

**Other Alternatives**

Some alternative approaches that could be tested in this benchmark include:

* Using `Array.prototype.forEach()` instead of `map()`
* Using a custom loop or iterative function to iterate over the array
* Using a library like Lodash or Underscore.js for array manipulation and optimization

However, these alternatives may not provide meaningful insights into the performance characteristics of the specific approaches being tested.

Latest run results:

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

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

Browser/OS: Chrome 94 on Linux

View result in a separate tab

Test name	Executions per second
Create new object	36555.0 Ops/sec
Mutate object	37208.8 Ops/sec
Destructure	37244.1 Ops/sec
Add new properties	36137.2 Ops/sec
Just mutate in-place	59301.5 Ops/sec

Related benchmarks:

Create vs Mutate Object 2 (version: 3)

Comparing performance of: Create new object vs Mutate object vs Destructure vs Add new properties vs Just mutate in-place

Created: 3 years ago by: Registered User

Jump to the latest result

Create new object

Mutate object

Destructure

Add new properties

Just mutate in-place

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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