Benchmark: Arrays vs Objects

Script Preparation code:

var testIds = [], storeArray = [], storeObject = {}, size = 300000, selectSize = size/100, i, defData = '12345678';

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

for (i=0; i<size; i++) {
  var id = 'id' + i;
  storeArray.push({
    id: id,
    n:  i,
    data: defData
  });
}

for (i=0; i<size; i++) {
  var id = 'id' + i;
  storeObject[id] = {
    id: id,
    n:  i,
    data: defData
  };
}

for (i=0;i<selectSize;i++) {
  var id = 'id' + getRandomInt(1, size);
  testIds.push(id);
}

console.log(testIds);

Tests:

Array (Array.find)
var x = 0; for (i=0;i<selectSize;i++) { var id = testIds[i]; var it = storeArray.find(function(el, idx, arr) { if (el.id == id) return true; return false; }); x += it.n; }
Object
var x = 0; for (i=0;i<selectSize;i++) { var id = testIds[i]; var it = storeObject[id]; x += it.n; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array (Array.find)
Object

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/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array (Array.find)	0.6 Ops/sec
Object	1893.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The benchmark is designed to compare two approaches: searching for an element in an array using `Array.prototype.find()` and searching for an element in an object using bracket notation (`storeObject[id]`).

**Script Preparation Code**

Before running the tests, the script generates a large dataset of arrays and objects. The arrays contain 300,000 elements with a specific structure (id, n, data), while the objects have the same properties but use string keys (id). This setup allows for a fair comparison between array-based searching and object-based searching.

**Html Preparation Code**

There is no HTML preparation code provided, which suggests that the benchmark is designed to run in a Node.js environment or a headless browser.

**Individual Test Cases**

There are two test cases:

1. **Array (Array.find)**: This test case uses `Array.prototype.find()` to search for an element in the array. The script iterates over the array, finds each element using `find()`, and sums up the values of the `n` property.
2. **Object**: This test case uses bracket notation (`storeObject[id]`) to search for an element in the object. The script iterates over the object, accesses each property using its key (id), and adds the value of the `n` property.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Array.find()**
	+ Pros:
		- Faster for large datasets due to optimized native implementation
		- More readable code, as it clearly conveys the intent to find a specific element
	+ Cons:
		- May not be as efficient for small datasets or simple searches
		- Can be slower than bracket notation for objects with many keys
* **Bracket Notation (Object)**

+ Pros:
		- Generally faster for small datasets and simple searches
		- Can be more efficient when dealing with objects that have a small number of keys
	+ Cons:
		- Less readable code, as it relies on manual property access
		- May not be suitable for larger datasets or complex searches

**Library Usage**

The benchmark uses the `Array.prototype.find()` method, which is a built-in JavaScript method. The `storeObject` variable uses bracket notation (`storeObject[id]`) to access properties.

**Special JS Feature or Syntax**

There are no special features or syntaxes used in this benchmark. However, it's worth noting that the use of `const` and `let` declarations (e.g., `var testIds = [], storeArray = [], ...`) is a modern JavaScript convention.

**Alternatives**

If you want to explore alternative approaches or libraries for searching arrays and objects, consider the following:

* For array searching:
	+ `Array.prototype.findIndex()` and `Array.prototype.findIndex()`: These methods are similar to `find()` but return -1 instead of undefined when no element is found.
	+ `lodash.find()` from the Lodash library: This method provides a robust implementation for finding elements in arrays.
* For object searching:
	+ Using `Object.keys()` and iterating over the keys to access properties
	+ Using `Array.prototype.indexOf()` or `Array.prototype.lastIndexOf()` to find an index of a property value

Keep in mind that these alternatives might have different performance characteristics, readability, and use cases compared to the original benchmark.

Related benchmarks:

Arrays vs Objects (version: 13)

Comparing performance of: Array (Array.find) vs Object

Created: 8 years ago by: Registered User

Jump to the latest result

Array (Array.find)

Object

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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