Benchmark: array.at vs polyfill vs array.length

Script Preparation code:

const arr = new Array(512).fill(0).map(() => Math.round(Math.random() * 512));
const at = (arr, idx) => arr[(idx < 0 ? arr.length + idx : idx)];
for (let i = 0; i < arr.length; i++) arr[i] += 1; // access all elements first to allow browser engine optimization if any.
fn1();
fn2();
fn3();

function fn1() {
    arr.at(5);
    arr.at(2);
    arr.at(50);
    arr.at(20);
    arr.at(500);
    arr.at(200);
    arr.at(-1);
}

function fn2() {
    at(arr, 5);
    at(arr, 2);
    at(arr, 50);
    at(arr, 20);
    at(arr, 500);
    at(arr, 200);
    at(arr, -1);
}

function fn3() {
    arr[5];
    arr[2];
    arr[50];
    arr[20];
    arr[500];
    arr[200];
    arr[arr.length - 1];
}

Tests:

arr.at(idx)
fn1();fn1();fn1();fn1();fn1();fn1();fn1();fn1();fn1();fn1();fn1();
at(arr, idx)
fn2();fn2();fn2();fn2();fn2();fn2();fn2();fn2();fn2();fn2();fn2();
arr[idx]
fn3();fn3();fn3();fn3();fn3();fn3();fn3();fn3();fn3();fn3();fn3();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
arr.at(idx)
at(arr, idx)
arr[idx]

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

arr[idx]

26.6M/s

at(arr, idx)

26.0M/s

arr.at(idx)

642K/s

View exact numbers

Test name	Executions per second
✓ arr[idx]	26,553,486 Ops/sec
at(arr, idx)	26,017,568 Ops/sec
arr.at(idx)	641,519 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark you're examining compares three different methods for accessing array elements in JavaScript, specifically:

1. **Using the `Array.prototype.at()` method**.
2. **Using a custom polyfill function called `at()`**.
3. **Using the traditional array indexing method `arr[idx]`**.

### Options Compared:

1. **`arr.at(idx)`**:
    - **Pros**:
        - This method is a part of the ECMAScript 2022 specification (ES13). It allows accessing elements from the end of the array using negative indices, which can simplify code and enhance readability.
        - Compatibility with one-liners: `arr.at(-1)` easily retrieves the last element.
    - **Cons**:
        - Might not be available in older environments (but is well-supported in modern browsers).

2. **Custom `at(arr, idx)` Function**:
    - This function replicates the behavior of `Array.prototype.at()`, specifically designed to handle both positive and negative indices.
    - **Pros**:
        - Provides negative indexing capabilities similar to `arr.at()`.
        - This allows for backward compatibility in older JavaScript environments where the native `at()` method isn't available.
    - **Cons**:
        - Likely to be less optimized than the native method, as it is a user-defined function.
        - Additional overhead of function calls can potentially lead to slower execution time compared to native operations.

3. **Traditional Array Indexing `arr[idx]`**:
    - **Pros**:
        - Direct and straightforward way to access array elements.
        - Fast and well-optimized within JavaScript engines due to its longstanding presence in the language.
        - Consistent performance across all JavaScript environments.
    - **Cons**:
        - Does not support negative indexing; for example, one must calculate `arr[arr.length - 1]` to access the last element.
        - Less readable in contexts where negative indexing would improve clarity.

### Other Considerations:

- The benchmark is conducted in a controlled manner, where it first initializes an array of 512 random integers and then performs the access operations in sequence to mitigate any optimization issues related to how browsers handle arrays.
  
- The results show that direct indexing `arr[idx]` has the highest executions per second iteration rate, indicating it is the fastest method under typical conditions. The polyfill `at(arr, idx)` is nearly as fast, while the native `arr.at(idx)` demonstrates the slowest performance in this specific benchmark. This may vary across different browsers or updates as JavaScript engines evolve.

### Alternatives:

Apart from these three methods, developers can consider the following alternatives:

- **Typed Arrays**: Using typed arrays in scenarios where performance is critical, as they provide a way to work with binary data and generally have better performance for numerical operations.
- **Memoization Techniques**: For repeated access patterns, implementing caching strategies can reduce redundant access times for array elements.
- **Loops for Sequential Access**: When accessing elements in a specific order or with complex calculations, using structured loops may yield better readability and performance, depending on the context.

Understanding these options and their trade-offs can help developers make informed decisions about which method to use in their code, balancing performance, readability, and compatibility with the target environment.

array.at vs polyfill vs array.length (version: 2)

Comparing performance of: `arr.at(idx) vs at(arr, idx) vs arr[idx]`

Created: one year ago by: Registered User

Go to the latest result

arr.at(idx)

at(arr, idx)

arr[idx]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

array.at vs polyfill vs array.length (version: 2)

Comparing performance of: arr.at(idx) vs at(arr, idx) vs arr[idx]

Created: one year ago by: Registered User

Go to the latest result

arr.at(idx)

at(arr, idx)

arr[idx]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Related benchmarks

Comparing performance of: `arr.at(idx) vs at(arr, idx) vs arr[idx]`