Benchmark: ClassList test - MeasureThat.net

Script Preparation code:

var obj = {};

for (i = 1000; i > 0; i--) {
  if (i%2 == 0) {
  	obj[i] = 'String';
  } else {
    obj[i] = [ 'Array of String', 'Array of String' ];
  }
}

Tests:

forEach
function ClassList(collection={}) { const classNames = {}; const keys = Object.keys(collection); keys.forEach((key) => { const innerCollection = collection[key]; const collectionCheck = Object.prototype.toString.call(innerCollection); switch (collectionCheck) { case '[object Object]': { const innerKeys = Object.keys(innerCollection); if (innerKeys.length === 0) { classNames[key] = ''; break; } let classList = []; innerKeys.forEach((innerKey) => { if (!innerCollection[innerKey] || !innerCollection[innerKey].length) { return; } const innerCollectionCheck = Object.prototype.toString.call(innerCollection[innerKey]); switch (innerCollectionCheck) { case '[object Array]': classList.push(...innerCollection[innerKey]); break; case '[object String]': classList.push(innerCollection[innerKey]); break; } }); classNames[key] = classList.reduce((acc, cl) => (acc += cl + ' '), ''); break; } case '[object Array]': classNames[key] = innerCollection.reduce((acc, cl) => (acc += cl + ' '), ''); break; case '[object String]': classNames[key] = innerCollection; break; } }); return classNames; } ClassList( obj );
for .. of
function ClassList(collection={}) { const classNames = {}; const keys = Object.keys(collection); for (const key of keys) { if ( Object.prototype.hasOwnProperty.call(collection, key) ) { const innerCollection = collection[key]; const collectionCheck = Object.prototype.toString.call(innerCollection); switch (collectionCheck) { case '[object Object]': { const innerKeys = Object.keys(innerCollection); if (innerKeys.length === 0) { classNames[key] = ''; break; } let classList = []; innerKeysLoop: for (const innerKey of innerKeys) { if (!innerCollection[innerKey] || !innerCollection[innerKey].length) { continue innerKeysLoop; } const innerCollectionCheck = Object.prototype.toString.call(innerCollection[innerKey]); switch (innerCollectionCheck) { case '[object Array]': classList.push(...innerCollection[innerKey]); break; case '[object String]': classList.push(innerCollection[innerKey]); break; } } classNames[key] = classList.reduce((acc, cl) => (acc += cl + ' '), ''); break; } case '[object Array]': classNames[key] = innerCollection.reduce((acc, cl) => (acc += cl + ' '), ''); break; case '[object String]': classNames[key] = innerCollection; break; } } } return classNames; } ClassList( obj );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
for .. of

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark for the `ClassList` function, which is part of the ECMAScript standard. The benchmark tests how different approaches to iterating over objects and arrays affect performance.

**Benchmark Definition**

The benchmark definition is an anonymous function that takes an object as input. The function iterates over the object's keys using three different methods:

1. **forEach**: This method uses the `Object.keys()` method to get an array of the object's keys, which are then looped through using a traditional `for` loop.
2. **for .. of**: This method uses the `Object.keys()` method and loops through the resulting array using a `for...of` loop.
3. **Traditional for loop**: This method directly loops over the object's keys using a traditional `for` loop.

**Options Compared**

The benchmark compares three different approaches to iterating over objects and arrays:

* `forEach`
* `for .. of`
* Traditional `for` loop

**Pros and Cons**

1. **forEach**:
	* Pros: More concise and readable than traditional loops.
	* Cons: May incur additional overhead due to array iteration.
2. **for .. of**:
	* Pros: More concise and readable than traditional loops, with improved performance due to direct iteration over the array.
	* Cons: Limited support on older browsers or environments.
3. **Traditional for loop**:
	* Pros: Wide support across all browsers and environments, with minimal overhead.
	* Cons: More verbose and less readable than other approaches.

**Library and Special JS Features**

There is no explicit library mentioned in the benchmark definition. However, `Object.keys()` and `for...of` loops are built-in JavaScript features that provide a convenient way to iterate over objects and arrays.

**Other Considerations**

The benchmark uses Safari 13 as the test browser, which may not be representative of other browsers or environments. Additionally, the benchmark only tests the performance of iterating over objects and arrays, without considering other factors like memory allocation or garbage collection.

**Alternatives**

There are alternative approaches to iterating over objects and arrays in JavaScript, such as:

* Using `Array.prototype.forEach()` or `for...of` loops with `Array.from()` or `Object.values()`
* Utilizing libraries like Lodash or Ramda for functional programming
* Leveraging modern JavaScript features like `flatMap()` or `map()` to simplify iteration

These alternatives may offer better performance, readability, or maintainability in certain scenarios, but may also come with trade-offs in terms of browser support, compatibility, or additional dependencies.

Related benchmarks:

ClassList test (version: 0)

Comparing performance of: forEach vs for .. of

Created: 5 years ago by: Guest

Jump to the latest result

forEach

for .. of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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