Benchmark: Shallow copy performance

Script Preparation code:

var data = [];
var res = [];

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(json => data = json)

Tests:

slice
res = data.slice();
concat
res = data.concat();
forEach
res = []; data.forEach(element => res.push(element));
Traditional For Loop
res = []; for (let i = 0; i < data.length; i++) { res.push(data[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
concat
forEach
Traditional For Loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 71 on Mac OS X 10.14.2

View result in a separate tab

Test name	Executions per second
slice	4309205.5 Ops/sec
concat	3314342.5 Ops/sec
forEach	4537916.5 Ops/sec
Traditional For Loop	4854953.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Overview**

The benchmark measures the performance of shallow copy operations on an array. The input data is fetched from a JSON endpoint using the `fetch` API, which returns a JSON response. This response is then assigned to the `data` variable. The goal is to create a shallow copy of this data and compare the performance of different methods.

**Script Preparation Code**

The script preparation code fetches data from the specified JSON endpoint using the `fetch` API:
```javascript
var data = [];
var res = [];

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(json => data = json);
```
This code uses the `fetch` API to make a GET request to the specified endpoint, which returns a JSON response. The response is then parsed as JSON and assigned to the `data` variable.

**Html Preparation Code**

There is no HTML preparation code provided for this benchmark.

**Test Cases**

The test cases are defined in the individual test cases array:
```javascript
[
  {
    "Benchmark Definition": "res = data.slice();",
    "Test Name": "slice"
  },
  {
    "Benchmark Definition": "res = data.concat();",
    "Test Name": "concat"
  },
  {
    "Benchmark Definition": "res = [];\r\ndata.forEach(element => res.push(element));",
    "Test Name": "forEach"
  },
  {
    "Benchmark Definition": "res = [];\r\nfor (let i = 0; i < data.length; i++) {\r\n\tres.push(data[i]);\r\n}",
    "Test Name": "Traditional For Loop"
  }
]
```
Each test case defines a different method for creating a shallow copy of the `data` array:

*   **slice**: Creates a shallow copy of the entire `data` array using the `slice()` method.
*   **concat**: Creates a new array by concatenating all elements from the `data` array using the `concat()` method.
*   **forEach**: Creates a new array by iterating over each element in the `data` array and pushing it to a new array using the `forEach()` method.
*   **Traditional For Loop**: Creates a new array by iterating over each element in the `data` array using a traditional for loop and pushing it to a new array.

**Library: None**

There is no library used in this benchmark. The only library mentioned is `fetch`, which is part of the browser's native API.

**Special JS Feature or Syntax: None**

There are no special JavaScript features or syntax used in this benchmark.

**Benchmark Results**

The latest benchmark results show the performance of each test case:

| Test Name | ExecutionsPerSecond |
| --- | --- |
| Traditional For Loop | 4854953.0 |
| forEach | 4537916.5 |
| slice | 4309205.5 |
| concat | 3314342.5 |

These results indicate that the traditional for loop method is the fastest, followed closely by the `slice()` method. The `forEach()` method and the `concat()` method are slower.

**Other Alternatives**

If you're interested in exploring alternative shallow copy methods, here are a few options:

*   **Array.prototype.map()**: Creates a new array with the result of applying a provided function to each element in this array.
*   **Array.prototype.reduce()**: Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

These alternatives can be used to create shallow copies, but they may have different performance characteristics compared to the methods tested in this benchmark.

Related benchmarks:

Shallow copy performance (version: 7)

Comparing performance of: slice vs concat vs forEach vs Traditional For Loop

Created: 5 years ago by: Registered User

Jump to the latest result

slice

concat

forEach

Traditional For Loop

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):