Benchmark: Array.sort vs Array.map

Script Preparation code:

const shuffleArray = array => {
    const arr = [...array];
    for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        const temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}

var testArr = Array.from({
    length: 5000
}, () => Math.floor(Math.random() * 4000));
var scrambled = shuffleArray(testArr);

Tests:

Array.sort + Array.findIndex
scrambled.sort((a,b) => testArr.findIndex(t => t === a) - testArr.findIndex(t => t === b));
Array.map + Array.find
testArr.map((t) => scrambled.find(s => s === t));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.sort + Array.findIndex
Array.map + Array.find

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/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Array.map + Array.find

303/s

Array.sort + Array.findIndex

223/s

View exact numbers

Test name	Executions per second
✓ Array.map + Array.find	303 Ops/sec
Array.sort + Array.findIndex	223 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the provided benchmark.

**Benchmark Definition JSON**

The benchmark is designed to compare two approaches: using `Array.sort` with `Array.findIndex`, and using `Array.map` with `Array.find`. The benchmark aims to sort an array according to the sort order of another array.

**Approach 1: Array.sort + Array.findIndex**

This approach uses `Array.sort()` method to sort the first array (`scrambled`) based on the indices of elements in a second array (`testArr`). The `Array.findIndex()` method is used to find the index of an element in `testArr`.

Pros:

* This approach can be efficient if the sorting order is deterministic and the arrays are large, as it leverages the optimized implementation of `Array.sort()`.
* It avoids the overhead of creating a new array with mapped values.

Cons:

* The use of `Array.findIndex()` introduces additional overhead due to the search operation.
* If the sorting order is not well-behaved (e.g., if there are duplicate indices), this approach may produce incorrect results.

**Approach 2: Array.map + Array.find**

This approach uses `Array.map()` method to create a new array with transformed values, where each element is found in `testArr` using the `Array.find()` method. The callback function takes an element from `scrambled` as input and returns the corresponding index in `testArr`.

Pros:

* This approach avoids the use of `Array.findIndex()`, reducing search overhead.
* It provides a more explicit mapping between elements in the two arrays.

Cons:

* Creating a new array with transformed values can be memory-intensive for large inputs.
* The callback function may introduce additional overhead due to the search operation.

**Library: shuffleArray**

The `shuffleArray` function is used to scramble the elements of `testArr`. This library is likely implemented using a Fisher-Yates shuffle algorithm, which is an efficient and unbiased shuffling method. The purpose of this library is to create a randomized version of `testArr` for the benchmark.

**Special JS Feature: None**

Neither of the approaches relies on any special JavaScript features or syntax that would impact the understanding of the explanation.

**Other Alternatives**

Some alternative approaches could be:

* Using a different sorting algorithm, such as `Array.prototype.sort()` with a custom comparison function.
* Implementing the mapping logic using a different data structure, such as an object or a Set.
* Adding additional operations between the sorting and mapping steps, such as filtering or reducing.

Keep in mind that these alternatives may not provide a direct comparison to the original approaches, and their performance characteristics may differ.

Array.sort vs Array.map (version: 0)

Sort array according to sort order of other array

Comparing performance of: `Array.sort + Array.findIndex vs Array.map + Array.find`

Created: 4 years ago by: Registered User

Go to the latest result

Array.sort + Array.findIndex

Array.map + Array.find

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.sort vs Array.map (version: 0)

Sort array according to sort order of other array

Comparing performance of: Array.sort + Array.findIndex vs Array.map + Array.find

Created: 4 years ago by: Registered User

Go to the latest result

Array.sort + Array.findIndex

Array.map + Array.find

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Comparing performance of: `Array.sort + Array.findIndex vs Array.map + Array.find`