Benchmark: es6(forEach, map, filter) vs lodash(map) 성능 비교

HTML Preparation code:

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

Script Preparation code:

var array = [];
for (var i = 0; i < 5000; i++) {
   	if (i % 2 === 0) {
     	array.push({
  			user: 'Mohit',
  			age: 26,
  			active: true,
  			user2: 'Mohit',
  			age2: 26,
  			active2: true,
  			user3: 'Mohit',
  			age3: 26,
  			active3: true,
		});
    } else {
      	array.push({
  			user: 'Rohit',
			age: 25,
			active: false,
			user2: 'Rohit',
			age2: 25,
			active2: false,
			user3: 'Rohit',
			age3: 25,
			active3: false,
		}); 
    }
}
var template = [];

Tests:

ES6 forEach
array.forEach(v => { if (v.user === 'Mohit') { template.push(v); } });
ES6 filter 후 map
template = array.filter(v => v.user === 'Mohit').map(v => v);
ES6 filter
template = array.filter(v => v.user === 'Mohit');
ES6 map
template = array.map(v => v.user === 'Mohit');
lodash filter
template = _.filter(array, { user: 'Mohit' });
lodash map
template = _.map(array, v => v.user === 'Mohit');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ES6 forEach
ES6 filter 후 map
ES6 filter
ES6 map
lodash filter
lodash map

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark compares the performance of different approaches to filter and map an array in JavaScript. The test case uses a large array (5000 elements) with two types of objects: one type has a specific key-value pair ("user: 'Mohit'"), and the other type has a different key-value pair ("user: 'Rohit'"). The benchmark aims to determine which approach is faster.

**Options Compared**

The benchmark compares six different approaches:

1. **ES6 `forEach`**: Iterates over the array using `forEach`, checks each element for the desired property, and pushes it to a new template array.
2. **ES6 `filter` + `map`**: Filters the original array to remove unwanted elements, and then maps the remaining elements to create a new array with the desired properties.
3. **ES6 `filter`**: Filters the original array to remove unwanted elements without mapping them.
4. **ES6 `map`**: Maps the entire original array to create a new array with the desired properties.
5. **Lodash `filter`**: Uses the Lodash library to filter the original array.
6. **Lodash `map`**: Uses the Lodash library to map the original array.

**Pros and Cons**

Here's a brief analysis of each approach:

* **ES6 `forEach`**: This approach can be inefficient because it iterates over the entire array, checks each element, and pushes it to a new template array. It's not suitable for large datasets.
* **ES6 `filter` + `map`**: This approach filters out unwanted elements first, which reduces the number of iterations required. Then, it maps the remaining elements to create a new array with the desired properties. This approach is more efficient than iterating over the entire array.
* **ES6 `filter`**: This approach filters out unwanted elements without mapping them. It's not as efficient as using `map` afterwards, but it can be faster in some cases if the filtering criteria are specific enough to reduce the number of iterations.
* **ES6 `map`**: Mapping the entire array can be slow because it creates a new array with all elements, even those that don't match the desired properties. This approach is less efficient than using `filter` and then `map`.
* **Lodash `filter`**: Using an external library like Lodash can add overhead due to the additional function call and memory allocation.
* **Lodash `map`**: Similar to the previous point, using an external library can add unnecessary overhead.

**Library Usage**

The benchmark uses the Lodash library for its `filter` and `map` functions. The library provides a convenient way to perform common array operations, but it also adds an extra layer of complexity due to the additional function call and memory allocation.

**Special JS Features/Syntax**

The benchmark uses JavaScript's `forEach` and `map` methods, which are built-in features in modern JavaScript environments. No special syntax or features are required for this benchmark.

In conclusion, the ES6 `filter` + `map` approach is likely to be the fastest way to achieve the desired result, followed by the ES6 `filter` approach if a specific filtering criteria can reduce the number of iterations. The Lodash library can add unnecessary overhead due to its additional function call and memory allocation.

Related benchmarks:

es6(forEach, map, filter) vs lodash(map) 성능 비교 (version: 21)

Comparing performance of: ES6 forEach vs ES6 filter 후 map vs ES6 filter vs ES6 map vs lodash filter vs lodash map

Created: 3 years ago by: Registered User

Jump to the latest result

ES6 forEach

ES6 filter 후 map

ES6 filter

ES6 map

lodash filter

lodash map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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