Benchmark: Array.prototype.with() vs Array.prototype.toSpliced() 2

HTML Preparation code:

<div id="memory">
</div>

Tests:

With
const memBefore = window.performance.memory.usedJSHeapSize; const data = new Array(10000).fill(0); const formatter = Intl.NumberFormat('ru-RU'); const newData = data.with(123, "new value using With()"); const memDiff = window.performance.memory.usedJSHeapSize - memBefore; if(memDiff!==0){ console.log('WITH ',formatter.format(memDiff)); }
ToSpliced
const memBefore = window.performance.memory.usedJSHeapSize; const data = new Array(10000).fill(0); const formatter = Intl.NumberFormat('ru-RU'); const newData = data.toSpliced(123, 1, "new value using With()"); const memDiff = window.performance.memory.usedJSHeapSize - memBefore; if(memDiff!==0){ console.log('TSPL ',formatter.format(memDiff)); }
Splice
const memBefore = window.performance.memory.usedJSHeapSize; const data = new Array(10000).fill(0); const formatter = Intl.NumberFormat('ru-RU'); const newData = [...data].splice(123, 1, "new value using With()"); const memDiff = window.performance.memory.usedJSHeapSize - memBefore; if(memDiff!==0){ console.log('SPLI ',formatter.format(memDiff)); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
With
ToSpliced
Splice

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
With	4839.1 Ops/sec
ToSpliced	5006.0 Ops/sec
Splice	36474.8 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 JSON and explain what's being tested, compared, and their pros and cons.

**What is being tested?**

The benchmark compares three different approaches to insert a new value into an array:

1. `Array.prototype.with()`
2. `Array.prototype.toSpliced()`
3. `Array.prototype.splice()`

These methods are used to add or replace elements in the array, but they have different performance implications.

**Options being compared**

* `with()`: This method is not a standard method of arrays in JavaScript and is not widely supported. It's possible that this method is specific to certain libraries or implementations.
* `toSpliced()`: This method is not a standard method of arrays in JavaScript and is likely a custom implementation or a part of a library.
* `splice()`: This is the standard method for replacing elements in an array.

**Pros and Cons**

* `with()`:
	+ Pros: None known
	+ Cons: Not widely supported, may have performance issues
* `toSpliced()`: 
	+ Pros: May be more efficient than `splice()` for some use cases
	+ Cons: Not a standard method of arrays in JavaScript, may not work in all browsers or environments
* `splice()`: 
	+ Pros: Widely supported, well-established performance
	+ Cons: May have overhead due to the creation of a new array

**Library and purpose**

* No library is explicitly mentioned, but `toSpliced()` suggests that it might be part of a custom implementation or a third-party library.

**Special JS feature or syntax**

None are explicitly mentioned in the provided JSON.

**Other considerations**

The benchmark measures the memory usage before and after executing each test case to compare their performance. The results show that `splice()` performs best, followed by `toSpliced()`, and then `with()` which is likely not widely supported.

**Alternatives**

If you need to insert a new value into an array, `splice()` is usually the most reliable option. However, if you're looking for more efficient solutions, you might want to consider:

* Using a library like Lodash or Underscore.js, which provide alternative methods for inserting elements into arrays.
* Implementing your own custom method using techniques like array slicing and concatenation.
* Using native WebAssembly (WASM) performance optimizations.

Keep in mind that the best approach depends on the specific use case and requirements of your project.

Related benchmarks:

Array.prototype.with() vs Array.prototype.toSpliced() 2 (version: 2)

Comparing performance of: With vs ToSpliced vs Splice

Created: one year ago by: Registered User

Jump to the latest result

With

ToSpliced

Splice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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