Benchmark: Underscore each vs Native for

HTML Preparation code:

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

Script Preparation code:

  var data = [
  20,
    25,
    21,
    24,
    23,
    39,
    44,
    33,
    32,
    31,
    35,
    28,
    26,
    29,
    30,
    36,
    27,
    3,
    22,
    47,
    19,
    15,
    18,
    34,
    38,
    2,
    37,
    40,
    48,
    46,
    45,
    41,
    42,
    43,
    6,
    1,
    5,
    16,
    9,
    17,
    13,
    14,
    12,
    8,
    10,
    11,
    4,
    7,
  ];

Tests:

Underscore
_.each(data, (item, index) => { console.log(item); });
Native For loop
for (var i=0, total=data.length; i<total; i++) { console.log(data[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Underscore
Native For loop

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Underscore	10031.8 Ops/sec
Native For loop	12609.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and considered.

**Benchmark Definition**

The test case compares two approaches for iterating over an array: using the underscore.js library (`_`) with `each` method versus a native JavaScript `for` loop.

**Script Preparation Code**

The script prepares an array of numbers for testing:
```javascript
var data = [
  // ...
];
```
This array is not relevant to the benchmark itself, but rather serves as input for the test cases.

**Html Preparation Code**

The HTML preparation code includes a reference to the underscore.js library, which is used by the first test case (`Underscore`):
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore.js"></script>
```
**Individual Test Cases**

There are two test cases:

### Underscore

This test case uses the `each` method from underscore.js to iterate over the `data` array and log each item:
```javascript
_.each(data, (item, index) => {
  console.log(item);
});
```
The underscore.js library provides a convenient way to iterate over arrays without having to manually manage indices.

**Native For loop**

This test case uses a traditional JavaScript `for` loop to iterate over the `data` array and log each item:
```javascript
for (var i = 0, total = data.length; i < total; i++) {
  console.log(data[i]);
}
```
This approach requires more manual effort to manage indices and is generally considered less efficient than using a library like underscore.js.

**Comparison**

The benchmark compares the execution time of these two approaches on a test machine running Chrome 97:

* Underscore (using `each` method from underscore.js)
* Native For loop

The benchmark provides raw UAS (User Agent String) data, which indicates that the tests were run on a desktop Windows system using Chrome 97.

**Pros and Cons**

Pros of using underscore.js (`Underscore`):

* Easier to write efficient iteration code
* Provides a convenient way to iterate over arrays without manual index management

Cons:

* Additional library dependency required (underscore.js)
* Potential overhead due to the library's initialization and garbage collection

Pros of using Native For loop:

* No additional library dependency required
* Can be more efficient for very large datasets or performance-critical code

Cons:

* Requires more manual effort and management of indices
* May lead to less readable or maintainable code

**Considerations**

The benchmark assumes that the test machine is running a relatively modern browser (Chrome 97) with sufficient resources. The results should be applicable to most desktop environments, but may not generalize to mobile devices, older browsers, or low-resource systems.

Other alternatives for iterating over arrays in JavaScript include:

* `forEach` method: similar to underscore.js `each`, but part of the native JavaScript API
* `map`, `filter`, and other array methods: can be used to transform or filter arrays, but may not provide direct access to indices like `each` does.
* Custom iteration functions using callbacks or generators: these approaches require more manual effort and are generally less convenient than using a library like underscore.js.

Overall, the benchmark provides a useful comparison between two common iteration methods in JavaScript. The results can help users choose the most efficient approach for their specific use case.

Related benchmarks:

Underscore each vs Native for (version: 0)

Comparing performance of: Underscore vs Native For loop

Created: 4 years ago by: Guest

Jump to the latest result

Underscore

Native For loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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