Benchmark: Array vs Object vs Map access given strings indices (2)

Script Preparation code:

var data = [
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "11",
    "12",
    "13",
    "14",
    "15",
    "16",
    "17",
    "18",
    "19",
    "20",
    "21",
    "22",
    "23",
    "24",
    "25",
    "26",
    "27",
    "28",
    "29"
]

Tests:

Map
var map = new Map(data.map((v, i) => [String(i), v])); let count = 0 for (let i=0; i<data.length; i++) { count += parseInt(map.get(String(i))) }
array 1
var array = data; let count = 0 for (let i=0; i<data.length; i++) { count += parseInt(array[parseInt(String(i))]) }
object 1
var object = Object.assign({}, data) let count = 0 for (let c=0; c<1000; c++) { for (let i=0; i<data.length; i++) { count += object[String(i)] } }
object 2
var object = {...data} let count = 0 for (let c=0; c<1000; c++) { for (let i=0; i<data.length; i++) { count += object[String(i)] } }
array 2
var array = data; let count = 0 for (let i=0; i<data.length; i++) { count += parseInt(array[String(i)]) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map
array 1
object 1
object 2
array 2

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Windows

View result in a separate tab

Test name	Executions per second
Map	75123.9 Ops/sec
array 1	89354.9 Ops/sec
object 1	186.2 Ops/sec
object 2	186.3 Ops/sec
array 2	121036.6 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared options, pros and cons of those approaches, and other considerations.

**Benchmark Overview**

The benchmark measures the performance of three different data structures (arrays, objects, and Maps) when accessing elements using string indices. The test case "array vs Object vs Map access given strings indices (2)" is repeated four times for each data structure, with varying numbers of iterations (1000).

**Test Cases**

1. **Array**: `var array = data; let count = 0; for (let i=0; i<data.length; i++) { count += parseInt(array[parseInt(String(i))]); }`
	* This test case uses the direct indexing syntax (`array[i]`) to access elements in the array.
2. **Object**: `var object = Object.assign({}, data); let count = 0; for (let c=0; c<1000; c++) { for (let i=0; i<data.length; i++) { count += object[String(i)]; } }`
	* This test case uses the `Object.assign()` method to create a new object from the array, and then accesses elements using the dot notation (`object[i]`).
3. **Map**: `var map = new Map(data.map((v, i) => [String(i), v])); let count = 0; for (let i=0; i<data.length; i++) { count += parseInt(map.get(String(i))); }`
	* This test case uses the `Map` constructor to create a new Map from the array, where each element is associated with its index as a string key. Then, it accesses elements using the `get()` method (`map[String(i)]`).

**Comparison and Pros/Cons**

The three data structures are compared in terms of performance when accessing elements using string indices.

* **Array**: Direct indexing syntax is fast because it's implemented in native code. However, it requires careful handling of edge cases (e.g., null or undefined values).
* **Object**: Using `Object.assign()` to create an object from the array can be slower due to the overhead of creating a new object and iterating over the array. However, the dot notation (`object[i]`) is often faster than direct indexing because it's implemented in JavaScript engine.
* **Map**: The `Map` constructor creates a new Map with string keys, which can be slower than arrays or objects. However, the `get()` method is optimized for fast lookups.

**Other Considerations**

* The test case uses a fixed array of 30 elements, which may not represent the performance characteristics of larger datasets.
* The number of iterations (1000) may not be sufficient to detect performance differences between the data structures.
* The benchmark only measures execution time and does not consider other factors like memory usage or garbage collection overhead.

**Alternatives**

Other alternatives for accessing elements using string indices include:

* **Array.prototype.at()**: A newer method introduced in ECMAScript 2019, which provides a safe way to access array elements by index.
* **Object.keys() / Object.values()**: Methods that return an array of object keys or values, respectively, which can be used for iterating over objects.
* **WeakMap**: A type of Map that allows for fast lookups using string keys, but is designed for use cases where the key object is not intended to survive the lifetime of the map.

Related benchmarks:

Array vs Object vs Map access given strings indices (2) (version: 1)

Comparing performance of: Map vs array 1 vs object 1 vs object 2 vs array 2

Created: 2 years ago by: Registered User

Jump to the latest result

Map

array 1

object 1

object 2

array 2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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