Benchmark: Array.from vs Array.map vs native for loop

Script Preparation code:

const dataList = new Array(1000).fill({
    name: 'foo'
});

function fromArray() {
    return Array.from(dataList, ({
        name
    }) => name);
}

function mapArray() {
    return dataList.map(({
        name
    }) => name);
}

function forLoop() {
    const newList = [];
    for (const item of dataList) {
        newList.push(item);
    }
    return newList;
}

Tests:

fromArray()
fromArray()
mapArray()
mapArray()
forLoop()
forLoop()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
fromArray()
mapArray()
forLoop()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
fromArray()	54009.9 Ops/sec
mapArray()	330865.1 Ops/sec
forLoop()	379076.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark tests three approaches to iterate over an array: `Array.from()`, `Array.map()`, and a native `for` loop. The script preparation code defines a sample dataset `dataList` with 1000 elements, each containing a `name` property.

**Options Compared**

1. **`Array.from()`**: This method creates a new array from an existing iterable (in this case, the `dataList`). It uses the spread operator (`=>`) to define a mapping function that extracts the `name` property from each element.
2. **`Array.map()`**: This method applies a specified function to each element of an array and returns a new array with the results. In this case, it's used to extract the `name` property from each element using the same mapping function as `Array.from()`.
3. **Native `for` loop**: A traditional `for` loop that iterates over the elements of the array, pushing each element onto a new array (`newList`) and returning the final result.

**Pros and Cons**

*   **Efficiency**: Native `for` loops are typically the fastest approach, as they avoid the overhead of creating new arrays and using methods like `map()` and `from()`.
    *   Pros: Faster execution times
    *   Cons: More verbose and less concise than other approaches
*   **Conciseness**: `Array.from()` and `Array.map()` provide a more compact way to perform the iteration, making the code easier to read and write.
    *   Pros: Easier to understand and maintain
    *   Cons: May be slower due to overhead from creating new arrays
*   **Flexibility**: Both `Array.from()` and `Array.map()` offer flexibility in terms of customizing the mapping function. However, this comes at a slight performance cost.

**Library Usage**

None of the approaches explicitly use any libraries or external dependencies. The test focuses on comparing the inherent performance characteristics of these three methods.

**Special JS Feature/Syntax (None)**

There's no special JavaScript feature or syntax used in this benchmark. It solely relies on standard language constructs for comparison.

**Alternatives**

Other alternatives to compare iteration approaches might include:

*   Using a `forEach()` loop instead of native `for` loops
*   Employing a more specialized library like `lodash`
*   Utilizing parallel processing techniques or multithreading

Related benchmarks:

Array.from vs Array.map vs native for loop (version: 0)

Comparing performance of: fromArray() vs mapArray() vs forLoop()

Created: 5 years ago by: Registered User

Jump to the latest result

fromArray()

mapArray()

forLoop()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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