Benchmark: Map vs Find to change one el in array of objects

Script Preparation code:

function getRandomElement(id) {
  return {
    id,
    a: Math.random(),
    b: Math.random(),
    c: Math.random(),
  }
}

function getArray(length) {
  const result = [];
  for (let i = 0; i < length; i++) {
    result.push(getRandomElement(i))
  }
  
  return result;
}

array_small = getArray(10000);
array_large = getArray(1000000);

Tests:

Find small array
const found = array_small.find(function(element) { return element.id == 9999; }); found.a = 9999;
Map small array
const array = array_small.map(function(element) { if (element.id == 9999) { element.a = 9999; } return element; });
Find large array
const found = array_large.find(function(element) { return element.id == 999999; }); found.a = 999999;
Map large array
const array = array_large.map(function(element) { if (element.id == 999999) { element.a = 999999; } return element; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Find small array
Map small array
Find large array
Map large array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 136 on Windows

View result in a separate tab

Test name	Executions per second
Find small array	127508.1 Ops/sec
Map small array	33615.1 Ops/sec
Find large array	186.5 Ops/sec
Map large array	130.5 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 definition and test cases to understand what is being tested.

**Benchmark Definition**

The benchmark definition provides two different approaches for finding or mapping an element in an array of objects:

1. `find()`: This method returns the first element that satisfies the provided condition (in this case, finding an object with a specific `id`).
2. `map()`: This method creates a new array with the results of applying the provided function to each element in the original array.

**Options Compared**

The benchmark is comparing the performance of these two approaches for both small and large arrays.

**Pros and Cons of Each Approach:**

1. **Find():**
	* Pros:
		+ Returns the first matching element, which can be useful if you only need one result.
		+ Can be more efficient for small datasets since it stops iterating as soon as a match is found.
	* Cons:
		+ May not find all matches if there are multiple elements that satisfy the condition.
		+ Requires an additional comparison to check the result of `find()` to ensure it's the desired element.
2. **Map():**
	* Pros:
		+ Returns a new array with all matching elements, which can be useful if you need all results.
		+ Can transform each element in the original array while creating the new array.
	* Cons:
		+ Creates an additional array, which can consume more memory and resources.
		+ Requires iterating over the entire dataset to find all matches.

**Other Considerations:**

1. **Library:** The `find()` method uses the built-in Array.prototype.find() function, which is a part of the ECMAScript standard.
2. **Special JS Feature/Syntax:** There are no special features or syntax used in this benchmark beyond the basic JavaScript functions and data structures.

**Alternatives:**

If you need to find or map elements in an array, consider using other methods:

1. `filter()`: Returns a new array with all elements that satisfy the condition.
2. `forEach()`: Executes a function for each element in the array without returning a new array.
3. `reduce()`: Accumulates values in an array while applying a function to each element.

Keep in mind that these alternatives may have different performance characteristics, memory usage, and use cases depending on your specific requirements.

As a software engineer, it's essential to consider the trade-offs between different approaches and choose the one that best suits your needs. In this case, the benchmark highlights the importance of considering performance and memory usage when selecting an algorithm for finding or mapping elements in an array.

Related benchmarks:

Map vs Find to change one el in array of objects (version: 0)

Comparing performance of: Find small array vs Map small array vs Find large array vs Map large array

Created: one year ago by: Registered User

Jump to the latest result

Find small array

Map small array

Find large array

Map large array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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