Benchmark: casa - for...of vs Array.from vs .forEach

Script Preparation code:

var searchParams = new URLSearchParams(new Array(100).fill({
    key: 'foo',
    value: 'bar'
}).map(({
    key,
    value
}) => [key, value].join("=")).join("&"))

Tests:

Array.from
const queryParameters = Array.from(searchParams) .filter(([key, value]) => key && value) .map(([key, value]) => ({ key, value }));
forEach
const queryParameters = []; searchParams.forEach((value, key) => { if (key && value) { queryParameters.push({ key, value }); } });
for...of
const queryParameters = []; for (const [key, value] of searchParams.entries()) { if (key && value) { queryParameters.push({ key, value }); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
forEach
for...of

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 dive into the provided benchmark.

**Benchmark Overview**

The benchmark compares the performance of three ways to extract key-value pairs from an array-like object: `Array.from`, `forEach`, and `for...of`. The test cases use a simulated URLSearchParams object, which represents query parameters in a URL.

**Options Compared**

1. **`Array.from()`**: Creates a new array from the given iterable (in this case, the searchParams object). It uses the spread operator to extract key-value pairs.
2. **`forEach()`**: Iterates over the array-like object using the `forEach()` method, which executes a callback function for each iteration. In this test, it pushes extracted key-value pairs into a new array.
3. **`for...of`**: Uses a loop with a `for...of` statement to iterate over the entries of the array-like object. It extracts key-value pairs directly and pushes them into a new array.

**Pros and Cons**

*   **`Array.from()`**:
    *   Pros: Creates a new, predictable array, which can be beneficial for data processing or analysis.
    *   Cons: Requires an additional operation to create the array, which may incur overhead in performance-critical code.
*   **`forEach()`**:
    *   Pros: Simple and widely supported, as it's a common method for iterating over arrays.
    *   Cons: Pushes elements into a new array, creating unnecessary memory allocations, which can impact performance.
*   **`for...of`**:
    *   Pros: Directly extracts key-value pairs without intermediate operations, making it suitable for performance-critical code.
    *   Cons: Limited support in older browsers and environments.

**Library and Syntax**

The `URLSearchParams` object is used to simulate query parameters. It's a standard API in modern browsers that allows creating and manipulating URL search parameters.

The test cases don't use any special JavaScript features or syntax beyond the mentioned methods.

**Alternatives**

If you need to optimize data extraction from array-like objects, consider using other approaches:

*   **`reduce()`**: Can be used to extract key-value pairs by accumulating them into a single object.
*   **`map()`**: Can be used to transform each element of an array without mutating the original data.
*   **Native `Object.entries()` and `Object.fromEntries()` methods**: For creating objects from key-value pairs.

Keep in mind that these alternatives might have different performance characteristics depending on your specific use case.

Related benchmarks:

casa - for...of vs Array.from vs .forEach (version: 0)

Comparing performance of: Array.from vs forEach vs for...of

Created: 5 years ago by: Guest

Jump to the latest result

Array.from

forEach

for...of

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