Benchmark: toLowerCase() Sorting

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

function makeid(length) {
    let result = '';
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const charactersLength = characters.length;
    let counter = 0;
    while (counter < length) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
      counter += 1;
    }

    return result;
}

var arr = [];
for(var i = 0; i < 100000; i++){
  arr.push({value:makeid(5)});
}

Tests:

Convert During Sort
arr.sort((l, r) => { const a = l.value.toLowerCase(); const b = r.value.toLowerCase(); if (a < b) { return -1; } else if (b > a) { return 1; } else { return 0; } });
Map Before Sort
arr.map(x => x.value.toLowerCase()).sort((a,b) => { if (a < b) { return -1; } else if (b > a) { return 1; } else { return 0; } });
lodash sortBy()
_.sortBy(arr, (x) => x.value.toLowerCase());
localeCompare()
arr.sort((a, b) => a.value.localeCompare(b.value));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Convert During Sort
Map Before Sort
lodash sortBy()
localeCompare()

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**Overview**

The test is designed to measure the performance of different approaches for sorting an array of objects, where each object has a `value` property that needs to be converted to lowercase during the sorting process.

**Benchmark Definition JSON**

The benchmark definition contains four test cases:

1. "toLowerCase() Sorting": This test case creates an array of 100,000 objects with random strings as values and sorts them using the `sort()` method with a custom comparison function that converts both values to lowercase.
2. "Map Before Sort": Similar to the first test case, but instead of sorting the array directly, it maps each object to its value converted to lowercase first, then sorts the resulting array.
3. "lodash sortBy()": This test case uses the `lodash` library's `sortBy()` function to sort the array of objects.
4. "localeCompare()": This test case uses the `localeCompare()` method to compare the values of two strings, which is equivalent to converting them to lowercase and then comparing.

**Library**

The benchmark uses the `lodash` library, which is a popular utility library for JavaScript that provides a wide range of functions for tasks like array manipulation, string processing, and more. In this case, the `sortBy()` function is used to sort the array of objects.

**Special JS Feature/Syntax**

None of the test cases use any special JavaScript features or syntax.

**Options Compared**

The benchmark compares four different approaches:

1. Using `toLowerCase()` method directly in the comparison function.
2. Mapping each object to its value converted to lowercase before sorting.
3. Using the `lodash` library's `sortBy()` function.
4. Using the `localeCompare()` method.

**Pros and Cons of Each Approach**

Here's a brief summary:

1. **Using `toLowerCase()` method directly**: This approach is simple and straightforward, but it may not be as efficient as other approaches since it involves two string conversions (one for each value).
2. **Mapping Before Sort**: This approach has the advantage of doing all string conversions upfront, which can improve performance. However, it requires an extra iteration over the array.
3. **lodash sortBy()**: This approach uses a optimized sorting algorithm from the `lodash` library, which is likely to be faster than the other approaches. However, it introduces an additional dependency on the `lodash` library.
4. **localeCompare()**: This approach uses a built-in method that performs string comparisons in a way that's similar to converting strings to lowercase and then comparing. It's likely to be faster than the other approaches since it's implemented in native code.

**Other Considerations**

* The benchmark is run on Chrome 115, which may not be representative of all browsers or environments.
* The array size is relatively small (100,000 objects), which may affect the performance differences between the approaches.
* The `makeid()` function used to generate random strings may introduce some noise in the results.

Overall, the benchmark provides a good overview of the performance differences between different approaches for sorting an array of objects with lowercase values.

Latest run results:

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

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

Browser/OS: Chrome 115 on Windows

View result in a separate tab

Test name	Executions per second
Convert During Sort	267.2 Ops/sec
Map Before Sort	217.0 Ops/sec
lodash sortBy()	115.3 Ops/sec
localeCompare()	283.2 Ops/sec

Related benchmarks:

toLowerCase() Sorting (version: 0)

Comparing performance of: Convert During Sort vs Map Before Sort vs lodash sortBy() vs localeCompare()

Created: one year ago by: Guest

Jump to the latest result

Convert During Sort

Map Before Sort

lodash sortBy()

localeCompare()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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