Benchmark: Array loop vs foreach vs map station

Script Preparation code:

   var arr = [];
    for (var i = 0; i < 1000; i++) {
      arr[i] = { dataValues: {
            "code": "GB!BA" + i,
            "crsCode": null,
            "nlcCode": null,
            "type": "Station",
            "name": "Barrow+Bus",
            "mainStation": "NO",
            "countryCode": "GB",
            "timeZone": "Europe/London",
            "latitude": null,
            "longitude": null,
            "stateProvinceCode": null,
            "itineraryStation": "OUTPUT_ONLY",
            "fareStation": "OUTPUT_ONLY",
            "status": null,
            "chilternStation": null,
            "preferredStation": null,
            "createdAt": "2017-10-05T16:22:16.000Z",
            "updatedAt": "2018-06-25T10:28:01.000Z",
            "suppliers": "[{\"memberStations\": [],\"groupStations\": [],\"source\": \"ATOC\",\"type\": \"ALIAS\",\"codeType\": null,\"typeName\": null,\"alias\": \"Barrow+Bus\"}]",
            "smartCardSupport": false
        }};
    }
  
    function someFn(model) {
      const interfce = {
            code: model.dataValues.code,
            crsCode: model.dataValues.crsCode,
            nlcCode: model.dataValues.nlcCode,
            type: model.dataValues.type,
            name: model.dataValues.name,
            mainStation: model.dataValues.mainStation,
            iataCode: model.dataValues.iataCode,
            countryCode: model.dataValues.countryCode,
            timeZone: model.dataValues.timeZone,
            latitude: model.dataValues.latitude,
            longitude: model.dataValues.longitude,
            city: model.dataValues.city,
            stateProvinceCode: model.dataValues.stateProvinceCode,
            itineraryStation: model.dataValues.itineraryStation,
            fareStation: model.dataValues.fareStation,
            status: model.dataValues.status,
            chilternStation: model.dataValues.chilternStation,
            preferredStation: model.dataValues.preferredStation,
            createdAt: model.dataValues.createdAt,
            updatedAt: model.dataValues.updatedAt,
            suppliers: model.dataValues.suppliers ? JSON.parse(model.dataValues.suppliers) : null,
            smartCardSupport: model.dataValues.smartCardSupport
        };

        return interfce;
    }

Tests:

foreach
var newArray = []; arr.forEach(function (item){ var interface = someFn(item); newArray.push(interface); })
for
var newArray = []; for (var i = 0, len = arr.length; i < len; i++) { var interface = someFn(arr[i]); newArray.push(interface); }
map
var newArray = arr.map(item => someFn(item));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for
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 break down the provided JSON and explain what is being tested.

**Benchmark Definition**

The benchmark definition represents a JavaScript function that creates an array of objects using different methods: `forEach`, `for` loop, and `map`. The purpose of this benchmark is to compare the performance of these three approaches when iterating over an array and creating a new array with transformed data.

**Options Compared**

1. **`forEach`**: This method iterates over the elements of an array using a callback function. In this case, it calls `someFn` for each element in the array and pushes the result to a new array.
2. **`for` loop**: This is a traditional looping construct that iterates over the elements of an array using a variable index. In this case, it also calls `someFn` for each element in the array and pushes the result to a new array.
3. **`map`**: This method returns a new array with the results of applying a provided function on every element in this array.

**Pros and Cons**

* **`forEach`**:
	+ Pros: concise, easy to read, and maintainable.
	+ Cons: can be slower due to the additional overhead of iterating over the elements using a callback function.
* **`for` loop**:
	+ Pros: familiar and efficient for those who are used to traditional looping constructs.
	+ Cons: can be verbose and less readable than `forEach`.
* **`map`**:
	+ Pros: concise, easy to read, and maintainable. It's also a modern JavaScript feature that's widely supported.
	+ Cons: may not be as efficient as `for` loop or `forEach` due to the overhead of creating new arrays.

**Library and Special JS Features**

There is no specific library being used in this benchmark. However, it does use some advanced JavaScript features:

* **`map`**: This method is a modern JavaScript feature that's widely supported.
* **`arrow functions`**: The `map` function uses arrow functions (`item => someFn(item)`) which are concise and easier to read.

**Other Considerations**

The benchmark measures the performance of these three approaches by executing each test case multiple times (the exact number is not specified) and reporting the average execution time per second. This allows for a more accurate comparison of the performance of each approach.

If you're interested in running this benchmark, you can use the provided JSON as input to MeasureThat.net, which will execute the tests on various browsers and devices to provide an estimate of their relative performance.

Related benchmarks:

Array loop vs foreach vs map station (version: 0)

Comparing performance of: foreach vs for vs map

Created: 6 years ago by: Guest

Jump to the latest result

foreach

for

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