Benchmark: set.add vs array.push vs map.set

Script Preparation code:

var array = [];
var set = new Set();
var map = new Map();

var existingItem1 = {};
var existingItem2 = {};
var existingItem3 = {};
var newItem1 = {};
var newItem2 = {};
var newItem3 = {};

for (let i = 0, item; i < 100; i++) {
  item = {index: i};
  array.push(item);
  set.add(item);
  map.set(item, 0);
}

array.push(existingItem1, existingItem2, existingItem3);
set.add(existingItem1); set.add(existingItem2); set.add(existingItem3);
map.set(existingItem1, 0); map.set(existingItem2, 0); map.set(existingItem3, 0);

Tests:

conditional array.push
array.push(existingItem1); array.push(newItem1); array.push(existingItem2); array.push(newItem2); array.push(existingItem3); array.push(newItem3);
set.add
set.add(existingItem1); set.add(newItem1); set.add(existingItem2); set.add(newItem2); set.add(existingItem3); set.add(newItem3);
map.set overwrite
map.set(existingItem1, 0); map.set(newItem1, 0); map.set(existingItem2, 0); map.set(newItem2, 0); map.set(existingItem3, 0); map.set(newItem3, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
conditional array.push
set.add
map.set overwrite

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/127.0.0.0 Safari/537.36

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
conditional array.push	2104078.8 Ops/sec
set.add	2211196.0 Ops/sec
map.set overwrite	2245524.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different JavaScript operations is crucial for optimizing code and ensuring fast execution. Let's break down what's being tested in this benchmark.

**Benchmark Overview**

The benchmark compares three methods:

1. `array.push()`: adding an element to the end of an array
2. `set.add()`: adding an element to a Set data structure
3. `map.set()`: setting the value for a key in a Map data structure

**Test Cases**

There are three test cases:

1. **Conditional array.push**: This test case adds elements to an array with conditional statements, which can introduce overhead due to branching.
2. **set.add**: This test case simply adds elements to a Set without any conditions or loops.
3. **map.set overwrite**: This test case sets values for keys in a Map and then overwrites some of those values later.

**Options Compared**

The options being compared are:

* `array.push()`: adding an element directly to the end of an array
* `set.add()`: adding an element to a Set, which maintains uniqueness
* `map.set()`: setting a value for a key in a Map

**Pros and Cons**

Here's a brief summary of the pros and cons of each option:

1. **array.push()**:
	* Pros: Simple, straightforward operation.
	* Cons: May lead to performance issues if arrays grow rapidly due to the need to shift elements down to fill gaps.
2. **set.add()**:
	* Pros: Fast lookups, insertions, and deletions, with good cache locality.
	* Cons: May not be suitable for large datasets or high-throughput scenarios.
3. **map.set()**:
	* Pros: Efficient key-value storage and lookup, with good cache locality.
	* Cons: Requires a contiguous memory allocation for the Map's underlying array.

**Library Usage**

The `Set` and `Map` data structures are part of the JavaScript Standard Library. They provide efficient ways to store and manipulate collections of unique values or key-value pairs, respectively.

**Special JS Features/Syntax**

This benchmark does not explicitly use any special JavaScript features or syntax beyond standard ECMAScript 2020 (ES12) syntax.

**Other Alternatives**

For large datasets or high-throughput scenarios, alternative data structures like:

* `array.fill()`: filling an array with a repeating value
* `set.fromArray()` and `map.from()`: creating a Set or Map from an existing collection

may be more suitable. Additionally, optimized libraries like `fast-set` (for Sets) or `fast-map` (for Maps) may offer better performance.

**Benchmark Conclusion**

This benchmark measures the performance of different JavaScript operations for adding elements to arrays, Sets, and Maps. The results provide insights into the trade-offs between simplicity, memory usage, and performance for each data structure. By understanding these pros and cons, developers can make informed decisions about which approach to use in their own code.

Related benchmarks:

set.add vs array.push vs map.set (version: 0)

Comparing performance of: conditional array.push vs set.add vs map.set overwrite

Created: one year ago by: Registered User

Jump to the latest result

conditional array.push

set.add

map.set overwrite

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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