Benchmark: map x lodash concat

HTML Preparation code:

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

Script Preparation code:

var users = [
  { 'user': 'joey',  'age': 32 },
  { 'user': 'ross',    'age': 41 },
  { 'user': 'chandler', 'age': 39 }
]

let arr = []

Tests:

map
// Native arr = users.map(x => { return { oi: x.user} })
_.concat
users.forEach(x => { arr = _.concat(arr, {oi: x.user}) })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
_.concat

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition:**

The benchmark definition is comparing two approaches to concatenate arrays in JavaScript:

1. **Native approach:** `arr = users.map(x => ({ oi: x.user }))`
2. **Lodash approach:** `users.forEach(x => { arr = _.concat(arr, {oi: x.user}) })`

**What's being tested:**

The benchmark is measuring the performance of these two approaches in creating a new array (`arr`) by concatenating objects with a specific property (`oi`).

**Pros and Cons of each approach:**

1. **Native approach (`.map()` method):**
	* Pros:
		+ Native code, which can be optimized for better performance.
		+ Creates a new array with the desired shape and data.
	* Cons:
		+ Requires iterating over the original array, which can lead to additional overhead.
2. **Lodash approach (`.concat()` method):**
	* Pros:
		+ Uses an existing library, which may have optimized implementations for common operations.
		+ More concise code, making it easier to read and maintain.
	* Cons:
		+ External dependency on Lodash, which can introduce overhead due to loading the library.

**Library used:**

The benchmark is using Lodash (version 4.17.11) for its `concat()` method. Lodash is a popular JavaScript utility library that provides various functions for common tasks, including array manipulation.

**Special JS feature/syntax:**

There are no special JavaScript features or syntax being tested in this benchmark. However, it's worth noting that the use of template literals (`x => { ... }`) and object destructuring (`{ oi: x.user }`) is a relatively modern feature introduced in ECMAScript 2015 (ES6).

**Other alternatives:**

If you were to implement this benchmark yourself, here are some alternative approaches to consider:

* Using `Array.prototype.reduce()` instead of `.map()`.
* Utilizing `push()` method with array concatenation.
* Leveraging modern JavaScript features like arrow functions and destructuring.

Keep in mind that these alternatives might have different performance characteristics or trade-offs compared to the native approach.

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 90 on Windows

View result in a separate tab

Test name	Executions per second
map	2663079.2 Ops/sec
_.concat	1364.9 Ops/sec

Related benchmarks:

map x lodash concat (version: 0)

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

Comparing performance of: map vs _.concat

Created: 3 years ago by: Guest

Jump to the latest result

map

_.concat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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