Benchmark: Mutable object reducer vs immutable object reducer

Script Preparation code:

var arr = [
  { key: 'one',       val: 1 },
  { key: 'two',       val: 2 },
  { key: 'three',     val: 3 },
  { key: 'four',      val: 4 },
  { key: 'five',      val: 5 },
  { key: 'six',       val: 6 },
  { key: 'seven',     val: 7 },
  { key: 'eight',     val: 8 },
  { key: 'nine',      val: 9 },
  { key: 'ten',       val: 10 },
  { key: 'eleven',    val: 11 },
  { key: 'twelve',    val: 12 },
  { key: 'thirteen',  val: 13 },
  { key: 'fourteen',  val: 14 },
  { key: 'fifteen',   val: 15 },
  { key: 'sixteen',   val: 16 },
  { key: 'seventeen', val: 17 },
  { key: 'eighteen',  val: 18 },
  { key: 'nineteen',  val: 19 },
  { key: 'twenty',    val: 20 }
];

Tests:

Immutable reducer via spread operator
const reducer = (obj, pair) => ({...obj, [pair.key]: pair.val }); arr.reduce(reducer, {});
Mutable reducer via property assign
const reducer = (obj, pair) => { obj[pair.key] = pair.val; return obj; }; arr.reduce(reducer, {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Immutable reducer via spread operator
Mutable reducer via property assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 132 on Android

View result in a separate tab

Mutable reducer via property assign

298K/s

Immutable reducer via spread operator

40K/s

View exact numbers

Test name	Executions per second
✓ Mutable reducer via property assign	298,472 Ops/sec
Immutable reducer via spread operator	39,905 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 provided benchmark.

**Benchmark Definition:**
The benchmark compares two approaches to reducing an array of objects: one using immutable object reduction and the other using mutable object reduction.

**Immutable Object Reduction:**
The first approach uses the spread operator (`{...obj, [pair.key]: pair.val}`) to create a new immutable object for each iteration. The `reduce()` function is then used to apply this transformation to each object in the array.

Pros:

* Ensures immutability of the objects being processed
* Can be more efficient than mutable reductions since it avoids modifying original objects

Cons:

* May require additional memory allocations due to the creation of new objects
* Can lead to performance overhead if not optimized properly

**Mutable Object Reduction:**
The second approach uses direct property assignment (`obj[pair.key] = pair.val;`) to modify each object in place. The `reduce()` function is then used to apply this transformation to each object in the array.

Pros:

* Typically more efficient than immutable reductions since it avoids creating new objects
* Can be faster for large datasets

Cons:

* Modifies original objects, which can lead to unexpected behavior if not expected
* May not preserve immutability guarantees

**Library and Special JS Feature:**
Neither of these approaches relies on any specific JavaScript library or feature. The `reduce()` function is a built-in method that comes with the language.

However, it's worth noting that some modern browsers may have experimental features or extensions that can optimize performance for certain use cases. But in this benchmark, neither approach seems to be leveraging such optimizations.

**Benchmark Preparation Code:**
The provided script preparation code creates an array of objects (`arr`) and assigns a `key` and a `val` to each object. The two test cases then define reducer functions that will be used with the `reduce()` function to process this array.

**Individual Test Cases:**

1. **Immutable Reducer via Spread Operator:**
This test case uses the spread operator (`{...obj, [pair.key]: pair.val}`) to create a new immutable object for each iteration. This ensures immutability of the objects being processed and avoids modifying original objects.
2. **Mutable Reducer via Property Assign:**
This test case uses direct property assignment (`obj[pair.key] = pair.val;`) to modify each object in place. This approach is typically more efficient than immutable reductions but may lead to unexpected behavior if not expected.

**Benchmark Results:**
The latest benchmark results show that the "Mutable reducer via property assign" approach outperforms the "Immutable reducer via spread operator" approach by a significant margin (over 1000x). However, it's essential to consider the trade-offs between performance and immutability when choosing an approach.

Mutable object reducer vs immutable object reducer (version: 19) Benchmark.js

Comparing performance of: `Immutable reducer via spread operator vs Mutable reducer via property assign`

Created: 8 years ago by: Registered User

Go to the latest result

Immutable reducer via spread operator

Mutable reducer via property assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Mutable object reducer vs immutable object reducer (version: 19) Benchmark.js

Comparing performance of: Immutable reducer via spread operator vs Mutable reducer via property assign

Created: 8 years ago by: Registered User

Go to the latest result

Immutable reducer via spread operator

Mutable reducer via property assign

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: `Immutable reducer via spread operator vs Mutable reducer via property assign`