Benchmark: array map vs _.map

HTML Preparation code:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.core.js"></script>

Tests:

array map
var a = ['hello', 'a', 'bc']; var b = a.map(item => item.length);
_.map
var a = ['hello', 'a', 'bc']; var b = _.map(a, item => item.length);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array map
_.map

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

Browser/OS: Chrome 125 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
array map	98979440.0 Ops/sec
_.map	14701186.0 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 benchmark and explain what's being tested, compared, and considered.

**Benchmark Definition**

The website "MeasureThat.net" provides a JSON-based definition of the benchmark. In this case:

* The `Name` field indicates that the benchmark is comparing the performance of two approaches for mapping over an array.
* The `Description` explains that it's a comparison between the new ES6 spread operator (`...`) and the traditional `concat()` method.

The provided `Script Preparation Code` is empty, which means that no JavaScript code needs to be executed before running the benchmark.

**Html Preparation Code**

The HTML preparation code includes a script tag that loads the Lodash library (version 4.17.5). Lodash is a utility library that provides functions for working with arrays, objects, and other data structures. In this case, it's used by the `_map()` function in the benchmark.

**Individual Test Cases**

There are two test cases:

1. `array map`:
	* The JavaScript code creates an array `a` with three elements: `'hello'`, `'a'`, and `'bc'`.
	* It then uses the `map()` method to create a new array `b` by mapping each element of `a` to its length.
2. `_.map`:
	* The same JavaScript code as above is used, but it uses the Lodash `_map()` function instead of the native `map()` method.

The `_map()` function in Lodash takes an additional argument to specify a custom mapping function. In this case, the mapping function simply returns the length of each element.

**Comparison**

The benchmark compares the performance of the two approaches:

* The new ES6 spread operator (`...`) is not used in either test case.
* The traditional `concat()` method is not used in the first test case (`array map`).
* The `_map()` function from Lodash is used in both test cases.

**Pros and Cons**

Here are some pros and cons of each approach:

* **ES6 spread operator**: It's a concise way to create a new array by spreading an existing array. However, it can be slower than traditional methods like `concat()` because of the overhead of creating a new array.
* **`.map()` method**: It's a built-in method that creates a new array by mapping over an existing array. It's generally faster and more efficient than using `concat()`.
* **Lodash `_map()` function**: It provides a flexible way to map over an array with a custom mapping function. However, it adds overhead due to the Lodash library.

**Other Considerations**

When comparing these approaches, consider the following:

* Code readability: The spread operator can make code more concise, but it may also reduce readability for those unfamiliar with its use.
* Performance: As mentioned earlier, the spread operator can be slower than traditional methods. However, this difference may only be noticeable in performance-critical code.

**Alternative Approaches**

If you want to compare other approaches, consider the following:

* **Array.prototype.forEach()**: Instead of creating a new array using `map()` or the spread operator, use `forEach()` to iterate over the array.
* **Array.prototype.reduce()**: Use `reduce()` to create a new array by accumulating values from an existing array.
* **Manual iteration**: Write custom loop code to iterate over the array and create a new array.

Keep in mind that these alternatives may not be as concise or readable as the original approaches, but they can provide different trade-offs in terms of performance and readability.

Related benchmarks:

array map vs _.map (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: array map vs _.map

Created: 8 years ago by: Registered User

Jump to the latest result

array map

_.map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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