Benchmark: Underscore _.sortBy() vs Vanilla .sort() vs Vanilla CUSTOM sort method

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>

Script Preparation code:

window.users = [
  { name: 'Ваня', level: '3' },
  { name: 'Саша', level: '1' },
  { name: 'Маша', level: '2' },
  { name: 'Ника', level: '3' },
  { name: 'Вера', level: '1' },
  { name: 'Саша', level: '2' },
  { name: 'Ваня', level: '2' }
];

window.sortBy = (key) => {
  return (a, b) => (a[key] > b[key]) ? 1 : ((b[key] > a[key]) ? -1 : 0);
};

function insertionSort(array, fieldName) {
  let { length } = array, items = [];
  let i, j, current;
  while (length--) {
    items[length] = array[length];
  }

  for (i = 1; i < length; i++) {
    current = items[i];
    j = i;
    while (j > 0 && getItem(items[j - 1], fieldName) > getItem(current, fieldName)) {
      items[j] = items[j - 1];
      j--;
    }
    items[j] = current;
  }
  return items;
}

function getItem(item, fieldName) {
  if (fieldName) {
    item = item[fieldName]
  }
  return item;
}

Tests:

Underscore sortBy()
_.sortBy(users, 'name')
Vanilla sort()
users.sort(sortBy("name"));
Vanilla CUSTOM sort method
insertionSort(users, "name");

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Vanilla CUSTOM sort method

8.6M/s

Vanilla sort()

3.5M/s

Underscore sortBy()

1.3M/s

Fastest: Vanilla CUSTOM sort method (6.9x faster)

View exact numbers

✓ Vanilla CUSTOM sort method: 8,612,023 ops/sec
• Vanilla sort(): 3,467,831 ops/sec
• Underscore sortBy(): 1,250,564 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Underscore sortBy()
Vanilla sort()
Vanilla CUSTOM sort method

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0

Browser/OS: Firefox 132 on Windows

View result in a separate tab

Vanilla CUSTOM sort method

11.5M/s

Vanilla sort()

8.1M/s

Underscore sortBy()

2.4M/s

View exact numbers

Test name	Executions per second
✓ Vanilla CUSTOM sort method	11,515,022 Ops/sec
Vanilla sort()	8,108,240 Ops/sec
Underscore sortBy()	2,397,556 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark compares three approaches to sorting an array of objects: Underscore.js `.sortBy()`, Vanilla JavaScript `.sort()` with a custom implementation, and Vanilla JavaScript `.sort()` without a custom implementation. The test case uses an array of user objects with "name" as the field to sort by.

**Underscore.js `.sortBy()`**

`.sortBy()` is a utility function provided by Underscore.js that takes two arguments: `array` (the input array) and `key` (the field to sort by). It returns a new sorted array. In this benchmark, `.sortBy()` is used with the "name" field.

**Vanilla JavaScript `.sort()`**

The vanilla JavaScript `.sort()` method sorts the elements of an array in place and returns the sorted array. The sorting algorithm used is stable, meaning that equal elements remain in their original order. However, it's not adaptive, which means it doesn't take advantage of existing order to improve performance.

In this benchmark, `.sort()` is used with a custom implementation (see below) and without it.

**Vanilla JavaScript `.sort()` with Custom Implementation**

This approach uses the `insertionSort` function, which implements a simple sorting algorithm using insertion sort. Insertion sort works by iterating through the array one element at a time, inserting each element into its proper position within the previously sorted portion of the array.

**Options Compared**

The benchmark compares three options:

1. Underscore.js `.sortBy()`
2. Vanilla JavaScript `.sort()` with custom implementation (using `insertionSort`)
3. Vanilla JavaScript `.sort()` without custom implementation

**Pros and Cons**

* **Underscore.js `.sortBy()`**: Pros:
	+ Convenient and concise way to sort arrays
	+ Built-in implementation in Underscore.js
	Cons:
	+ May not be as efficient as manual sorting for very large datasets
	+ Requires an external library (Underscore.js)
* **Vanilla JavaScript `.sort()` with Custom Implementation**: Pros:
	+ Can be optimized for specific use cases and datasets
	+ No external dependencies
Cons:
	+ More verbose and error-prone compared to `.sortBy()`
	+ May not be as efficient as manual sorting algorithms like quicksort or mergesort
* **Vanilla JavaScript `.sort()` without Custom Implementation**: Pros:
	+ Fastest and most widely supported option
	+ Built-in implementation in the browser's JavaScript engine
Cons:
	+ Less flexible and customizable than other options

**Other Considerations**

When choosing a sorting algorithm, consider factors such as:

* Dataset size: Larger datasets may benefit from more efficient algorithms like quicksort or mergesort.
* Dataset structure: Arrays with many duplicate elements may benefit from sorting algorithms that can take advantage of this structure, like insertion sort.
* Performance requirements: If high performance is critical, consider using a custom implementation or optimizing the algorithm used by `.sort()`.

**Alternatives**

Other JavaScript libraries and implementations that provide sorting functionality include:

* Lodash (a utility library with a `sortBy` function)
* Array.prototype.sort() in other libraries, such as jQuery
* Custom sorting algorithms like quicksort or mergesort

Keep in mind that these alternatives may have different trade-offs in terms of performance, flexibility, and ease of use.

Underscore _.sortBy() vs Vanilla .sort() vs Vanilla CUSTOM sort method (version: 3) Benchmark.js

Comparing performance of: `Underscore sortBy() vs Vanilla sort() vs Vanilla CUSTOM sort method`

Created: 7 years ago by: Registered User

Go to the latest result

Underscore sortBy()

Vanilla sort()

Vanilla CUSTOM sort method

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Underscore _.sortBy() vs Vanilla .sort() vs Vanilla CUSTOM sort method (version: 3) Benchmark.js

Comparing performance of: Underscore sortBy() vs Vanilla sort() vs Vanilla CUSTOM sort method

Created: 7 years ago by: Registered User

Go to the latest result

Underscore sortBy()

Vanilla sort()

Vanilla CUSTOM sort method

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Underscore sortBy() vs Vanilla sort() vs Vanilla CUSTOM sort method`