Benchmark: Direct Array Access vs. New Local Constant Variable in A Loop

Script Preparation code:

var arr = [
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
    { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" }, { "key": "value" },
]

var newarr1 = []
var newarr2 = []

Tests:

Direct Array Access
for (var i = 0; i < arr.length; i++) { newarr1.push(arr[i]) }
Local Variable Access
for (var i = 0; i < arr.length; i++) { const el = arr[i] newarr2.push(el) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Direct Array Access
Local Variable Access

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0

Browser/OS: Firefox 121 on Windows

View result in a separate tab

Test name	Executions per second
Direct Array Access	311247.3 Ops/sec
Local Variable Access	294887.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its components.

**Benchmark Definition**

The benchmark compares two approaches to access elements in an array:

1. **Direct Array Access**: The code uses the `arr` array directly, without introducing any intermediate variables. In this case, `i` is the index variable, and `arr[i]` accesses the element at index `i`.
2. **Local Variable Access**: This approach introduces a new local variable `el` to hold the current element being processed. The code then uses `newarr2.push(el)` to push the element onto the `newarr2` array.

**Options Being Compared**

The benchmark is comparing the performance of two options:

1. **Direct Array Access (DAA)**: This approach accesses elements in the `arr` array directly, without introducing any intermediate variables.
2. **Local Variable Access (LVA)**: This approach introduces a new local variable `el` to hold the current element being processed.

**Pros and Cons of Each Approach**

* **Direct Array Access (DAA) Pros**:
	+ Less memory overhead, as no additional array is created.
	+ May be faster, since accessing elements directly can be more cache-friendly.
* **Direct Array Access (DAA) Cons**:
	+ More complex code, which may lead to typos or errors.
	+ May not be as readable, especially for developers unfamiliar with the approach.
* **Local Variable Access (LVA) Pros**:
	+ Easier to read and maintain, since a clear intermediate variable is introduced.
	+ May improve code clarity, making it easier to understand the intent behind the code.
* **Local Variable Access (LVA) Cons**:
	+ More memory overhead, since an additional array is created.
	+ May be slower, due to the overhead of creating and pushing elements onto a new array.

**Library and Special JS Features**

There are no libraries mentioned in this benchmark. However, it's worth noting that JavaScript engines like Firefox 121 use various optimizations and features, such as:

* Just-In-Time (JIT) compilation
* Ahead-Of-Time (AOT) compilation
* Garbage collection
* WebAssembly support

These features can affect the performance of the benchmark results.

**Test Case Special JS Feature**

There is no special JavaScript feature or syntax used in this benchmark. The code uses standard JavaScript features, such as:

* Loops (`for` loops)
* Array indexing (`arr[i]`)
* Array manipulation (`push()`)

Overall, this benchmark provides a simple and straightforward comparison between two approaches to accessing elements in an array. It's a useful tool for developers looking to optimize their code and understand the trade-offs between different approaches.

Related benchmarks:

Direct Array Access vs. New Local Constant Variable in A Loop (version: 0)

Comparing performance of: Direct Array Access vs Local Variable Access

Created: 5 years ago by: Guest

Jump to the latest result

Direct Array Access

Local Variable Access

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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