Benchmark: lodash map vs native map (v2)

HTML Preparation code:

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

Script Preparation code:

var data = Array(1000000).fill({ a: 'a', b: 1 });

Tests:

lodash
_.map(data, ({a, b}) => `${a}_${b}`)
native
data.map(({a, b}) => `${a}_${b}`)

Historical Performance Data aggregated from 172 community runs

Desktop Results:

Chrome 141 runs

lodash

24/s

native

22/s

View exact numbers

✓ lodash: 24 ops/sec
• native: 22 ops/sec

Firefox 11 runs

native

35/s

lodash

35/s

View exact numbers

✓ native: 35 ops/sec
• lodash: 35 ops/sec

Safari 5 runs

lodash

166/s

native

162/s

View exact numbers

✓ lodash: 166 ops/sec
• native: 162 ops/sec

Mobile Results:

Chrome 8 runs

lodash

11/s

native

10/s

Fastest: lodash (1.1x faster)

View exact numbers

✓ lodash: 11 ops/sec
• native: 10 ops/sec

Safari 7 runs

lodash

94/s

native

84/s

Fastest: lodash (1.1x faster)

View exact numbers

✓ lodash: 94 ops/sec
• native: 84 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
lodash
native

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

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

Browser/OS: Chrome 141 on Windows

View result in a separate tab

lodash

35/s

native

28/s

View exact numbers

Test name	Executions per second
✓ lodash	35 Ops/sec
native	28 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

MeasureThat.net provides two JavaScript microbenchmarks that compare the performance of two approaches:

1. **Lodash (`.map` function)**: Lodash is a popular JavaScript utility library that extends the functionality of the standard JavaScript language.
2. **Native (`.map` function)**: The native `.map` function is a built-in method in JavaScript that applies a transformation to each element in an array.

**Benchmark Preparation Code**

The script preparation code creates an array `data` with 1 million elements, each containing two properties: `a` and `b`.

**Html Preparation Code**

The HTML preparation code includes the CDN link for Lodash version 4.17.5, which is used by the benchmark to load its library.

**Individual Test Cases**

There are two individual test cases:

### Lodash

* **Benchmark Definition**: `_._map(data, ({a, b}) => `${a}_${b}`)`
	+ This code uses the `_.map` function from Lodash to apply a transformation to each element in the `data` array. The transformation is to concatenate the values of `a` and `b` using an underscore (`_`) as a separator.
* **Test Name**: "lodash"

### Native

* **Benchmark Definition**: `data.map(({a, b}) => `${a}_${b}`)`
	+ This code uses the native `.map` function to apply a transformation to each element in the `data` array. The transformation is the same as in the Lodash case: concatenating the values of `a` and `b` using an underscore (`_`) as a separator.
* **Test Name**: "native"

**Comparison**

The benchmark compares the execution performance of both approaches on a large dataset (1 million elements). The raw UA string, browser, device platform, operating system, executions per second, and test name are recorded for each test case.

**Pros and Cons**

* **Lodash (.map function)**:
	+ Pros: Easy to use, concise code, and can be used in a variety of situations where the standard `.map` function is not sufficient.
	+ Cons: Adds overhead due to the inclusion of the Lodash library, which may not be necessary for simple transformations.
* **Native (.map function)**:
	+ Pros: Built-in method, no external dependencies, and faster execution performance since it's optimized by the browser.
	+ Cons: Requires a basic understanding of JavaScript and its built-in methods.

**Other Considerations**

When working with large datasets or complex transformations, consider using libraries like Lodash to simplify code and improve maintainability. However, for simple cases where you need to apply a basic transformation, using the native `.map` function may be faster and more efficient.

If you're interested in exploring alternative approaches, some other options include:

* Using `Array.prototype.reduce()` instead of `.map()`
* Using a library like `array-clone()` or `lodash.clone()` for deep cloning arrays
* Implementing your own transformation using a custom array method

In summary, this benchmark compares the performance of two common JavaScript approaches: Lodash's `.map` function and the native `.map` function. The results show that the native approach is faster, but the choice ultimately depends on the specific use case and personal preference.

lodash map vs native map (v2) (version: 0)

Comparing performance of: `lodash vs native`

Created: 5 years ago by: Guest

Go to the latest result

lodash

native

Historical Performance Data aggregated from 172 community runs

Desktop Results:

Chrome 141 runs

Firefox 11 runs

Safari 5 runs

Mobile Results:

Chrome 8 runs

Safari 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

lodash map vs native map (v2) (version: 0)

Comparing performance of: lodash vs native

Created: 5 years ago by: Guest

Go to the latest result

lodash

native

Historical Performance Data aggregated from 172 community runs

Desktop Results:

Chrome 141 runs

Firefox 11 runs

Safari 5 runs

Mobile Results:

Chrome 8 runs

Safari 7 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: `lodash vs native`