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);

​x
 
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;
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;
});

 
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;
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;
});

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 11 months 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
Find small array	73252.1 Ops/sec
Map small array	33151.6 Ops/sec
Find large array	164.9 Ops/sec
Map large array	133.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

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:

find(): This method returns the first element that satisfies the provided condition (in this case, finding an object with a specific id).
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:

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.
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:

Library: The find() method uses the built-in Array.prototype.find() function, which is a part of the ECMAScript standard.
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:

filter(): Returns a new array with all elements that satisfy the condition.
forEach(): Executes a function for each element in the array without returning a new array.
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.

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.

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: 11 months ago by: Registered User

Jump to the latest result

Find small array