Benchmark: Move an array element

HTML Preparation code:

<div id='1'></div>

AخA
 
<div id='1'></div>

Script Preparation code:

var arr = [1,2,3,4];

 
var arr = [1,2,3,4];

Tests:

splice

function arrayMove(arr, oldIndex, newIndex) {
  const copiedArr = [...arr];
  const length = copiedArr.length;
  
  if (oldIndex !== newIndex && length > oldIndex && length > newIndex) {
    copiedArr.splice(newIndex, 0, copiedArr.splice(oldIndex, 1)[0]);
  }
  
  return copiedArr;
}

arrayMove(arr, 0, 3)

​x
 
function arrayMove(arr, oldIndex, newIndex) {  const copiedArr = [...arr];  const length = copiedArr.length;    if (oldIndex !== newIndex && length > oldIndex && length > newIndex) {    copiedArr.splice(newIndex, 0, copiedArr.splice(oldIndex, 1)[0]);  }    return copiedArr;}​arrayMove(arr, 0, 3)

flatMap

function arrayMove(arr, oldIndex, newIndex) {
    const length = arr.length;
    const itemToMove = arr[oldIndex]

    if (oldIndex === newIndex || oldIndex > length || newIndex > length) {
        return arr;
    }

    return arr.flatMap((item, index) => {
        if (index === oldIndex) return [];
        if (index === newIndex) return oldIndex < newIndex ? [item, itemToMove] : [itemToMove, item];
        return item;
    })
}

arrayMove(arr, 0, 3)

 
function arrayMove(arr, oldIndex, newIndex) {    const length = arr.length;    const itemToMove = arr[oldIndex]​    if (oldIndex === newIndex || oldIndex > length || newIndex > length) {        return arr;    }​    return arr.flatMap((item, index) => {        if (index === oldIndex) return [];        if (index === newIndex) return oldIndex < newIndex ? [item, itemToMove] : [itemToMove, item];        return item;    })}​arrayMove(arr, 0, 3)

reduce

function arrayMove(arr, oldIndex, newIndex) {
    const length = arr.length;
    const itemToMove = arr[oldIndex]

    if (oldIndex === newIndex || oldIndex > length || newIndex > length) {
        return arr;
    }

    return arr.reduce((acc, item, index) => {
        if (index === oldIndex) return acc;
        if (index === newIndex) return oldIndex < newIndex ? [...acc, item, itemToMove] : [...acc, itemToMove, item];
        return [...acc, item];
    }, [])
}

arrayMove(arr, 0, 3)

 
function arrayMove(arr, oldIndex, newIndex) {    const length = arr.length;    const itemToMove = arr[oldIndex]​    if (oldIndex === newIndex || oldIndex > length || newIndex > length) {        return arr;    }​    return arr.reduce((acc, item, index) => {        if (index === oldIndex) return acc;        if (index === newIndex) return oldIndex < newIndex ? [...acc, item, itemToMove] : [...acc, itemToMove, item];        return [...acc, item];    }, [])}​arrayMove(arr, 0, 3)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
splice
flatMap
reduce

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 108 on Windows

View result in a separate tab

Test name	Executions per second
splice	5010550.5 Ops/sec
flatMap	952172.3 Ops/sec
reduce	4747937.0 Ops/sec

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

Let's break down the benchmark and analyze what's being tested.

Benchmark Definition

The benchmark defines three test cases: splice, flatMap, and reduce. Each test case has a similar structure:

A JavaScript function is defined to move an element from one index to another in an array.
The function takes two parameters: the original array, the old index of the element to be moved, and the new index where the element should be inserted.

Options Compared

The benchmark compares three different approaches for moving an element in an array:

Splice: Uses arr.splice(newIndex, 0, arr[oldIndex]) to insert the element at the new index.
flatMap: Uses arr.flatMap((item, index) => {...}) to create a new array with the element moved.
Reduce: Uses arr.reduce((acc, item, index) => {...}) to accumulate the elements of the original array and insert the moved element at the correct position.

Pros and Cons

Here's a brief summary of each approach:

Splice:
- Pros: Simple and efficient for small arrays.
- Cons: May not be suitable for large arrays due to its overhead in searching and inserting elements.
flatMap:
- Pros: Can handle large arrays efficiently, as it avoids the need to search for the element.
- Cons: Creates a new array, which may lead to memory allocation issues for very large datasets.
Reduce:
- Pros: Handles large arrays well and can be more efficient than splice for small to medium-sized arrays.
- Cons: Requires an accumulator variable, which can be slower than the other two approaches.

Library

There is no explicit library mentioned in the benchmark definition. However, flatMap is a method of the Array.prototype object in JavaScript, so it doesn't require any external libraries.

Special JS Feature or Syntax

None of the test cases use any special JavaScript features or syntax beyond standard ECMAScript 2022.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and analyze what's being tested.

**Benchmark Definition**

The benchmark defines three test cases: `splice`, `flatMap`, and `reduce`. Each test case has a similar structure:

1. A JavaScript function is defined to move an element from one index to another in an array.
2. The function takes two parameters: the original array, the old index of the element to be moved, and the new index where the element should be inserted.

**Options Compared**

The benchmark compares three different approaches for moving an element in an array:

1. **Splice**: Uses `arr.splice(newIndex, 0, arr[oldIndex])` to insert the element at the new index.
2. **flatMap**: Uses `arr.flatMap((item, index) => {...})` to create a new array with the element moved.
3. **Reduce**: Uses `arr.reduce((acc, item, index) => {...})` to accumulate the elements of the original array and insert the moved element at the correct position.

**Pros and Cons**

Here's a brief summary of each approach:

* **Splice**:
	+ Pros: Simple and efficient for small arrays.
	+ Cons: May not be suitable for large arrays due to its overhead in searching and inserting elements.
* **flatMap**:
	+ Pros: Can handle large arrays efficiently, as it avoids the need to search for the element.
	+ Cons: Creates a new array, which may lead to memory allocation issues for very large datasets.
* **Reduce**:
	+ Pros: Handles large arrays well and can be more efficient than `splice` for small to medium-sized arrays.
	+ Cons: Requires an accumulator variable, which can be slower than the other two approaches.

**Library**

There is no explicit library mentioned in the benchmark definition. However, `flatMap` is a method of the `Array.prototype` object in JavaScript, so it doesn't require any external libraries.

**Special JS Feature or Syntax**

None of the test cases use any special JavaScript features or syntax beyond standard ECMAScript 2022.

Related benchmarks:

Move an array element (version: 0)

Move an array element

Comparing performance of: splice vs flatMap vs reduce

Created: 2 years ago by: Guest

Jump to the latest result