Benchmark: Array timing - MeasureThat.net

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

const array = [];
const indexes = [];
const l = 999;
const iterations = 9999;


for (let i = 0; i < length; ++i) {
	array.push(Math.random());
}

for (let i = 0; i < iterations; ++i) {
	indexes.push(Math.floor(Math.random() * l));
}

Tests:

Array.at(i)
let total = 0; for(let i = 0; i < iterations; ++i) { const index = indexes[i]; total += array.at(index); } console.log(total);
Array[i]
let total = 0; for(let i = 0; i < iterations; ++i) { const index = indexes[i]; total += array[index]; } console.log(total);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.at(i)
Array[i]

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.at(i)	24890.7 Ops/sec
Array[i]	25241.7 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 10 months ago):

LLMs can make mistakes. Check important info.

This benchmark focuses on measuring the performance of two different methods for accessing elements in a JavaScript array: using the `Array.at(i)` method and using the traditional index access syntax `array[i]`.

### Options Compared
1. **`Array.at(i)`**: This is a relatively newer method introduced in ECMAScript 2022 (ES2022). It allows for accessing elements by their index in a flexible way, especially useful for negative indexing (accessing elements from the end of the array).
   
2. **`array[i]`**: This is the traditional method of accessing array elements in JavaScript. It has been used since the inception of JavaScript and is widely recognized and utilized by developers.

### Pros and Cons
#### `Array.at(i)`
- **Pros**:
  - More readable in certain contexts, especially when considering negative indices.
  - Provides a clear intent of accessing an array without ambiguity.
  
- **Cons**:
  - As a newer method, it may not be as familiar to some developers or supported in older environments.
  - Performance may vary across different JavaScript engines; it's not guaranteed to be faster than existing methods.

#### `array[i]`
- **Pros**:
  - Well-known and proven in terms of performance, especially in most JavaScript engines.
  - Supported across all JavaScript versions; no compatibility issues.
  
- **Cons**:
  - In some scenarios, especially with negative indices, it can be less readable or lack clarity compared to `Array.at(i)`.

### Other Considerations
- The benchmark uses a loop to run a specified number of iterations (9999) to average out timings between method calls, ensuring that the results are not skewed by any single execution.
- The preparation code generates an array `array` with 999 random numbers and an `indexes` array that holds randomly generated indices for accessing these numbers. This simulates real-world scenarios where array access patterns might be random.

### Benchmark Results
In the results provided:
- `Array[i]` had an execution rate of approximately 25,241 operations per second, while `Array.at(i)` reached about 24,890 operations per second.
- The results show that accessing array elements with the traditional method (`array[i]`) slightly outperforms `Array.at(i)` in this benchmark context on the tested environment.

### Alternatives
- Another alternative for accessing elements in an array could be using higher-order functions like `Array.forEach`, `Array.map`, or using a looping structure with `for...of` for cases where you want to manipulate each item instead of merely accessing it. However, these approaches may not always be as efficient for large data sets if only element access is required, as they introduce additional overhead.

### Summary
The benchmark conducted provides insight into the performance implications of different syntaxes for array element access in JavaScript. While both methods are valid and have their own advantages, this test gives a practical perspective for developers deciding between modern approaches and traditional ones in their applications. The results may guide performance-critical applications regarding which syntax to prefer under specific conditions.

Related benchmarks:

Array timing (version: 1)

Comparing performance of: Array.at(i) vs Array[i]

Created: 10 months ago by: Guest

Jump to the latest result

Array.at(i)

Array[i]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 10 months ago):