Benchmark: Repetitive functions calls vs one Map

Script Preparation code:

window.createReceivedListData = (
    id,
    receivedAt,
    checklistName,
    vehicle,
    driverName,
) => {
    return { id, receivedAt, checklistName, vehicle, driverName };
};

window.createReceivedListDataFromData = (data) => data.map(
    ([id, receivedAt, checklistName, vehicle, driverName]) => ({ id, receivedAt, checklistName, vehicle, driverName })
);

Tests:

Repetitive
const receivedListRows = [ createReceivedListData( 'b3510752-6aa4-4a3e-9333-14630e5b6951', 1613524796305, 'Vistoria', 'HTB-3585 - Audi', 'João Silva' ), createReceivedListData( 'b3510752-6aa4-4a3e-9333-14630e5b6952', 1336612366305, 'Checkout', 'GBT-3570 - Mercedes-Benz', 'Adriana Amanda' ), createReceivedListData( 'b3510752-6aa4-4a3e-9333-14630e5b6953', 1223886653305, 'Armazenamento', 'PLA-1234 - Ford Focus', 'Kaique Enzo' ), createReceivedListData( 'b3510752-6aa4-4a3e-9333-14630e5b6954', 1355967564305, 'Carregamento', 'NES-3025 - Lotus', 'Felipe Benjamin' ), createReceivedListData( 'b3510752-6aa4-4a3e-9333-14630e5b6955', 1510728993305, 'Corrida', 'MXM-2683 - Nissan', 'Daniel Benício' ), createReceivedListData( 'b3510752-6aa4-4a3e-9333-14630e5b6956', 1749963088305, 'Manutenção', 'NEO-9860 - Bugre', 'Raimundo Diego' ), createReceivedListData( 'b3510752-6aa4-4a3e-9333-14630e5b6957', 1053001501305, 'Conserto', 'MZC-7819 - Citroen', 'Jorge Anthony' ), createReceivedListData( 'b3510752-6aa4-4a3e-9333-14630e5b6958', 1039177178305, 'Trabalho', 'PLA-1234 - Ford Focus', 'Marina Amanda' ), ];
Map
const receivedListRowsData = [ [ 'b3510752-6aa4-4a3e-9333-14630e5b6951', 1613524796305, 'Vistoria', 'HTB-3585 - Audi', 'João Silva' ], [ 'b3510752-6aa4-4a3e-9333-14630e5b6952', 1336612366305, 'Checkout', 'GBT-3570 - Mercedes-Benz', 'Adriana Amanda' ], [ 'b3510752-6aa4-4a3e-9333-14630e5b6953', 1223886653305, 'Armazenamento', 'PLA-1234 - Ford Focus', 'Kaique Enzo' ], [ 'b3510752-6aa4-4a3e-9333-14630e5b6954', 1355967564305, 'Carregamento', 'NES-3025 - Lotus', 'Felipe Benjamin' ], [ 'b3510752-6aa4-4a3e-9333-14630e5b6955', 1510728993305, 'Corrida', 'MXM-2683 - Nissan', 'Daniel Benício' ], [ 'b3510752-6aa4-4a3e-9333-14630e5b6956', 1749963088305, 'Manutenção', 'NEO-9860 - Bugre', 'Raimundo Diego' ], [ 'b3510752-6aa4-4a3e-9333-14630e5b6957', 1053001501305, 'Conserto', 'MZC-7819 - Citroen', 'Jorge Anthony' ], [ 'b3510752-6aa4-4a3e-9333-14630e5b6958', 1039177178305, 'Trabalho', 'PLA-1234 - Ford Focus', 'Marina Amanda' ], ]; const receivedListRowsFromData = createReceivedListDataFromData(receivedListRowsData)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Repetitive
Map

Fastest: N/A

Slowest: N/A

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

Browser/OS: Chrome 88 on Windows

View result in a separate tab

Test name	Executions per second
Repetitive	470487.5 Ops/sec
Map	2016285.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of measuring JavaScript performance.

**Benchmark Definition**

The benchmark is designed to compare two approaches: generating an array of objects by calling the same function for every line of the array (`Repetitive`) and by mapping on a matrix and returning the mutated array (`Map`).

**Options Compared**

In this benchmark, we have two options:

1. **Repetitive**: This approach involves calling the `createReceivedListData` function for each element in the `receivedListRows` array, creating a new object for each call.
2. **Map**: This approach uses the `map()` method to create a new array by applying the `createReceivedListDataFromData` function to each sub-array of the `receivedListRowsData` array.

**Pros and Cons**

1. **Repetitive**:
	* Pros: Simple, easy to understand, and might be more intuitive for developers familiar with loops.
	* Cons: Can lead to performance issues due to repeated function calls and object creation.
2. **Map**:
	* Pros: More efficient, as it avoids repeated function calls and object creation, making it suitable for large datasets.
	* Cons: Might require a better understanding of the `map()` method and its implications.

**Benchmark Results**

The latest benchmark results show that the `Map` approach outperforms the `Repetitive` approach:

| Test Name | ExecutionsPerSecond |
| --- | --- |
| Map | 2016285.625 |
| Repetitive | 470487.5 |

These results indicate that using the `map()` method can significantly improve performance when dealing with large datasets.

**Conclusion**

When it comes to generating arrays of objects in JavaScript, the `Map` approach is generally more efficient and suitable for large datasets. However, the choice ultimately depends on your specific use case, personal preference, and the trade-offs you're willing to make between simplicity and performance.

Related benchmarks:

Repetitive functions calls vs one Map (version: 2)

Comparing the performance of generating an array of objects from calling the same function for every line of the array or by mapping on a matrix the data and returning the mutated array

Comparing performance of: Repetitive vs Map

Created: 3 years ago by: Registered User

Jump to the latest result

Repetitive

Map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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