Benchmark: Underscore vs native

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore.js"></script>

Script Preparation code:

  var data = _.range(10000).map(function(i) {
    return {
      counter: i
    }
  });
  
  function isOdd(num) {
    return num % 2 === 1;
  }
  
  function square(num) {
    return num * num;
  }
  
  function lessThanThreeDigits(num) {
    return num.toString().length < 3;
  }

Tests:

Underscore
var result = _.chain(data) .map(item => item.counter) .filter(isOdd) .map(square) .filter(lessThanThreeDigits) .value();
Native
var result = data.map(item => item.counter) .filter(isOdd) .map(square) .filter(lessThanThreeDigits)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Underscore
Native

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark is designed to compare the performance of two approaches: using the Underscore.js library and writing native JavaScript code.

**Benchmark Definition JSON**

The `Script Preparation Code` section defines a set of functions used in the benchmark:

* `data`: an array of 10,000 objects with a single property `counter`.
* `isOdd`, `square`, and `lessThanThreeDigits`: three simple functions that perform basic operations.

The `Html Preparation Code` includes a script tag that loads the Underscore.js library version 1.9.0.

**Individual Test Cases**

There are two test cases:

1. **Underscore**: The benchmark definition uses the Underscore.js library to chain together the following transformations:
	* Map each object in `data` to its `counter` property.
	* Filter out objects where `isOdd(counter)` returns false.
	* Map each remaining object's `counter` value to its square.
	* Filter out objects with more than two digits in their `counter` value.
	* Finally, retrieve the resulting array as a single value using `value()`.
2. **Native**: The benchmark definition writes native JavaScript code that performs the same transformations as the Underscore version:
	* Map each object in `data` to its `counter` property.
	* Filter out objects where `isOdd(counter)` returns false.
	* Map each remaining object's `counter` value to its square.
	* Filter out objects with more than two digits in their `counter` value.

**Library: Underscore.js**

Underscore.js is a popular JavaScript utility library that provides a functional programming style for building efficient and concise code. The `chain()` method is used to create a pipeline of transformations, which are applied sequentially to the input data. In this benchmark, Underscore's `map()`, `filter()`, and `value()` methods are used to perform the required operations.

**Special JS Feature: Arrow Functions**

The benchmark definition uses arrow functions (`=>`) in both test cases. Arrow functions provide a concise way to define small, anonymous functions without creating a new scope or function prototype. In this case, they are used to simplify the code and reduce verbosity.

**Pros and Cons of Each Approach**

* **Underscore.js (Pipeline)**:
	+ Pros:
		- Provides a concise and readable way to chain transformations.
		- Allows for easy reuse of common operations.
	+ Cons:
		- Introduces additional overhead due to the library's functionality.
		- May be slower than native code for simple transformations.
* **Native JavaScript (Pipeline)**:
	+ Pros:
		- Avoids library overhead and can be faster for simple transformations.
		- Provides direct access to built-in functions.
	+ Cons:
		- Requires more verbose code, which may lead to errors or confusion.
		- Less reusable than Underscore's pipeline.

**Considerations**

When choosing between Underscore.js and native JavaScript, consider the following factors:

* Code readability and maintainability: If you need to reuse common operations or prioritize readability, Underscore.js might be a better choice.
* Performance: For simple transformations, native JavaScript can be faster. However, if you're dealing with complex pipelines or performance-critical code, Underscore.js might provide a necessary abstraction layer.

**Alternatives**

Other alternatives for building efficient and concise JavaScript code include:

* Lodash (a larger library that extends Underscore's functionality)
* Ramda (a functional programming library with a different API)
* Vanilla JavaScript libraries (e.g., jQuery, which provides a more verbose but still readable way to manipulate DOM elements)

Latest run results:

Run details: (Test run date: 18 days ago)

User agent: Mozilla/5.0 (Android 11; Mobile; rv:131.0) Gecko/131.0 Firefox/131.0

Browser/OS: Firefox Mobile 131 on Android

View result in a separate tab

Test name	Executions per second
Underscore	496.2 Ops/sec
Native	599.3 Ops/sec

Related benchmarks:

Underscore vs native (version: 4)

Comparing performance of: Underscore vs Native

Created: 5 years ago by: Registered User

Jump to the latest result

Underscore

Native

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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