Benchmark: Object value comparison vs array of object value comparison with different loops v1

Script Preparation code:

var items = Array.from(Array(1000), (_, x) => ({
    key: x,
    value1: Math.random() * 1000,
    value2: Math.random() * 1000
}));

var objContainer = {};
var arrContainer = [];

for (let i = 100; i >= 0; i--) {
    const index = Math.floor(Math.random() * 1000);
    const item = items[index];
    objContainer[item.key] = item;
    arrContainer.push(item)
}

​x
 
var items = Array.from(Array(1000), (_, x) => ({    key: x,    value1: Math.random() * 1000,    value2: Math.random() * 1000}));​var objContainer = {};var arrContainer = [];​for (let i = 100; i >= 0; i--) {    const index = Math.floor(Math.random() * 1000);    const item = items[index];    objContainer[item.key] = item;    arrContainer.push(item)}

Tests:

Object, for-in

var result = [];
for (var k in objContainer) {
	if (objContainer[k].value1 >= 0 && objContainer[k].value1 <= 499 && objContainer[k].value2 >= 500 && objContainer[k].value2 <= 999) {
      result.push(k);
    }
}

 
var result = [];for (var k in objContainer) {    if (objContainer[k].value1 >= 0 && objContainer[k].value1 <= 499 && objContainer[k].value2 >= 500 && objContainer[k].value2 <= 999) {      result.push(k);    }}

Array, for-of

var result = [];
for (var item of arrContainer) {
	if (item.value1 >= 0 && item.value1 <= 499 && item.value2 >= 500 && item.value2 <= 999) {
      result.push(item.key);
    }
}

 
var result = [];for (var item of arrContainer) {    if (item.value1 >= 0 && item.value1 <= 499 && item.value2 >= 500 && item.value2 <= 999) {      result.push(item.key);    }}

Object, for

var result = [];
var keys = Object.keys(objContainer);
for (var i = 0; i < keys.length; i++) {
	if (objContainer[keys[i]].value1 >= 0 && objContainer[keys[i]].value1 <= 499 && objContainer[keys[i]].value2 >= 500 && objContainer[keys[i]].value2 <= 999) {
      result.push(keys[i]);
    }
}

 
var result = [];var keys = Object.keys(objContainer);for (var i = 0; i < keys.length; i++) {    if (objContainer[keys[i]].value1 >= 0 && objContainer[keys[i]].value1 <= 499 && objContainer[keys[i]].value2 >= 500 && objContainer[keys[i]].value2 <= 999) {      result.push(keys[i]);    }}

Array, for

var result = [];
for (var i = 0; i < arrContainer.length; i++) {
	if (arrContainer[i].value1 >= 0 && arrContainer[i].value1 <= 499 && arrContainer[i].value2 >= 500 && arrContainer[i].value2 <= 999) {
      result.push(arrContainer[i].key);
    }
}

 
var result = [];for (var i = 0; i < arrContainer.length; i++) {    if (arrContainer[i].value1 >= 0 && arrContainer[i].value1 <= 499 && arrContainer[i].value2 >= 500 && arrContainer[i].value2 <= 999) {      result.push(arrContainer[i].key);    }}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Object, for-in
Array, for-of
Object, for
Array, for

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 108 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object, for-in	65288.6 Ops/sec
Array, for-of	4189983.0 Ops/sec
Object, for	63273.3 Ops/sec
Array, for	61496.4 Ops/sec

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

Let's break down the provided benchmark and explain what is being tested.

Benchmark Definition

The benchmark tests the speed of three different approaches to compare object values:

Object, for-in: Using the for...in loop to iterate over the object's properties (keys) and checking if a property value falls within a certain range.
Array, for-of: Using the for...of loop to iterate over an array of objects and extracting the key from each object using the key property.
Object, for: Using a traditional for loop to iterate over an array of keys and checking if each key's corresponding object value falls within the specified range.
Array, for: Using a traditional for loop to iterate over an array of objects and extracting the key from each object using the key property.

Comparison

The benchmark measures the execution speed of these four approaches on both object and array data structures. The results are presented in terms of "ExecutionsPerSecond", which indicates how many iterations (i.e., comparisons) can be performed within a second by each browser.

Options Compared

Here's a brief summary of each option:

Object, for-in: Iterates over object properties using for...in, which has the advantage of being concise but may also incur performance overhead due to property lookup.
Array, for-of: Uses a more modern and expressive loop syntax (for...of) to iterate over an array of objects. This approach is generally faster than traditional loops because it avoids unnecessary object creation and property access.
Object, for: Iterates over an array of keys using a traditional for loop, which can be less readable but may also perform better due to potential optimizations.
Array, for: Uses a traditional for loop to iterate over an array of objects, similar to the object iteration approach.

Pros and Cons

Here's a brief analysis of each approach:

Object, for-in:
- Pros: Concise, easy to read.
- Cons: May incur performance overhead due to property lookup.
Array, for-of:
- Pros: More modern, expressive syntax; generally faster than traditional loops.
- Cons: Requires support for for...of loop syntax in the browser engine.
Object, for:
- Pros: May perform better due to potential optimizations.
- Cons: Less readable, more verbose.
Array, for:
- Pros: More traditional and familiar syntax; potentially optimized performance.
- Cons: Less expressive or modern than other approaches.

Other Considerations

Browser Support: The benchmark only tests the four specified loops on Chrome 108, which may not be representative of all browsers or their versions.
JavaScript Version: No information is provided about the JavaScript version used in the benchmark, which might impact loop syntax and performance.
Data Generation: The benchmark uses a random array generation approach, which can lead to varying execution times depending on the data distribution.

Alternatives

If you're interested in exploring other approaches or optimizations for object comparison, consider:

Using Map data structures instead of objects or arrays, as they provide more efficient key-value lookups.
Leveraging browser-specific optimization techniques, such as using WeakMap or Map.prototype.has() to avoid unnecessary property checks.
Investigating third-party libraries or frameworks that specialize in performance-critical JavaScript optimizations.

Keep in mind that these alternatives might require additional setup and code modifications to work within your specific use case.

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark tests the speed of three different approaches to compare object values:

1. **Object, for-in**: Using the `for...in` loop to iterate over the object's properties (keys) and checking if a property value falls within a certain range.
2. **Array, for-of**: Using the `for...of` loop to iterate over an array of objects and extracting the key from each object using the `key` property.
3. **Object, for**: Using a traditional `for` loop to iterate over an array of keys and checking if each key's corresponding object value falls within the specified range.
4. **Array, for**: Using a traditional `for` loop to iterate over an array of objects and extracting the key from each object using the `key` property.

**Comparison**

**Options Compared**

Here's a brief summary of each option:

1. **Object, for-in**: Iterates over object properties using `for...in`, which has the advantage of being concise but may also incur performance overhead due to property lookup.
2. **Array, for-of**: Uses a more modern and expressive loop syntax (`for...of`) to iterate over an array of objects. This approach is generally faster than traditional loops because it avoids unnecessary object creation and property access.
3. **Object, for**: Iterates over an array of keys using a traditional `for` loop, which can be less readable but may also perform better due to potential optimizations.
4. **Array, for**: Uses a traditional `for` loop to iterate over an array of objects, similar to the object iteration approach.

**Pros and Cons**

Here's a brief analysis of each approach:

1. **Object, for-in**:
	* Pros: Concise, easy to read.
	* Cons: May incur performance overhead due to property lookup.
2. **Array, for-of**:
	* Pros: More modern, expressive syntax; generally faster than traditional loops.
	* Cons: Requires support for `for...of` loop syntax in the browser engine.
3. **Object, for**:
	* Pros: May perform better due to potential optimizations.
	* Cons: Less readable, more verbose.
4. **Array, for**:
	* Pros: More traditional and familiar syntax; potentially optimized performance.
	* Cons: Less expressive or modern than other approaches.

**Other Considerations**

1. **Browser Support**: The benchmark only tests the four specified loops on Chrome 108, which may not be representative of all browsers or their versions.
2. **JavaScript Version**: No information is provided about the JavaScript version used in the benchmark, which might impact loop syntax and performance.
3. **Data Generation**: The benchmark uses a random array generation approach, which can lead to varying execution times depending on the data distribution.

**Alternatives**

If you're interested in exploring other approaches or optimizations for object comparison, consider:

1. Using `Map` data structures instead of objects or arrays, as they provide more efficient key-value lookups.
2. Leveraging browser-specific optimization techniques, such as using `WeakMap` or `Map.prototype.has()` to avoid unnecessary property checks.
3. Investigating third-party libraries or frameworks that specialize in performance-critical JavaScript optimizations.

Keep in mind that these alternatives might require additional setup and code modifications to work within your specific use case.

Related benchmarks:

Object value comparison vs array of object value comparison with different loops v1 (version: 1)

Test speed of object value comparison vs array of object value comparison with for-in, for-of, and for loops

Comparing performance of: Object, for-in vs Array, for-of vs Object, for vs Array, for

Created: 2 years ago by: Registered User

Jump to the latest result