Benchmark: getElementsByClassName, For i, For of, For each, Some, Every, Map 2

Script Preparation code:

var newBody = document.createElement("div");


for (let i; i < 1000; i++) {
	var divAdded = document.createElement("div");
	divAdded.classList.add("ggclass");
	newBody.appendChild(divAdded);
}

Tests:

for i
var case1 = document.getElementsByClassName("ggclass"); for (var i = 0; i < case1.length; i++) { // 반복할 내용 console.log(case1[i]); }
for of
var case1 = document.getElementsByClassName("ggclass"); for (var element of case1) { // 반복할 내용 console.log(element); }
forEach
var case1 = document.getElementsByClassName("ggclass"); Array.from(case1).forEach(function (element) { // 반복할 내용 console.log(element); });
some
var case1 = document.getElementsByClassName("ggclass"); Array.from(case1).some(function (element) { console.log(element); return false; });
every
var case1 = document.getElementsByClassName("ggclass"); var allSatisfy = Array.from(case1).every(function (element) { console.log(element); return true; // 조건을 만족하면 true, 아니면 false });
map
var case1 = document.getElementsByClassName("ggclass"); var newArray = Array.from(case1).map(function (element) { console.log(element); return 변환된값; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for i
for of
forEach
some
every
map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Windows

View result in a separate tab

Test name	Executions per second
for i	2893168.8 Ops/sec
for of	2605952.8 Ops/sec
forEach	2232875.0 Ops/sec
some	2284526.0 Ops/sec
every	2260087.0 Ops/sec
map	1971515.2 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The provided benchmark tests six different approaches for iterating over an array of elements in JavaScript:

1. Traditional `for` loop (`for i`)
2. For-of loop (`for of`)
3. `Array.prototype.forEach()` method
4. `Array.prototype.some()` method
5. `Array.prototype.every()` method
6. `Array.prototype.map()` method

Each benchmark tests how efficiently each approach can execute a simple loop that iterates over the array, logging each element to the console.

**Options being compared**

The benchmarks compare the performance of these six approaches:

* Traditional `for` loop (`for i`)
* For-of loop (`for of`)
* `Array.prototype.forEach()` method
* `Array.prototype.some()` method
* `Array.prototype.every()` method
* `Array.prototype.map()` method

**Pros and cons of each approach**

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

1. **Traditional `for` loop (`for i`)**:
	* Pros: Low overhead, simple to implement.
	* Cons: Can be slow for large arrays due to the need to increment the loop variable manually.
2. **For-of loop (`for of`)**:
	* Pros: More concise and expressive than traditional `for` loops, less prone to off-by-one errors.
	* Cons: May have higher overhead due to the use of a new iterator object.
3. **`Array.prototype.forEach()` method**:
	* Pros: Convenient and widely supported, easy to read and understand.
	* Cons: May not be as efficient as traditional `for` loops or for-of loops for very large arrays.
4. **`Array.prototype.some()` method**:
	* Pros: Can stop iterating as soon as a condition is met, which can be beneficial in some cases.
	* Cons: May have higher overhead due to the use of a callback function.
5. **`Array.prototype.every()` method**:
	* Pros: Similar to `some()`, but with an additional constraint that requires all elements to satisfy the condition.
	* Cons: May have similar overhead as `some()`.
6. **`Array.prototype.map()` method**:
	* Pros: Convenient for transforming arrays, can be useful in certain scenarios.
	* Cons: May have higher overhead due to the use of a new array and callback function.

**Special considerations**

Some JavaScript features are not being tested here:

* ES6 classes
* Promises
* Async/await

These features may require more complex test cases to demonstrate their performance benefits.

**Other alternatives**

While these six approaches are commonly used, other alternatives exist:

* `Array.prototype.reduce()` method for reducing arrays to a single value.
* `Array.prototype.filter()` method for filtering arrays.
* Custom loops using `push` and incrementing an index variable manually (not tested here).

These alternatives may offer performance benefits in certain cases, but often come with additional overhead or complexity.

Keep in mind that the choice of iteration approach depends on the specific use case and personal preference. MeasureThat.net provides a convenient way to benchmark these approaches and make informed decisions about which one to use.

Related benchmarks:

getElementsByClassName, For i, For of, For each, Some, Every, Map 2 (version: 1)

getElementsByClassName, For i, For of, For each, Some, Every, Map

Comparing performance of: for i vs for of vs forEach vs some vs every vs map

Created: 2 years ago by: Registered User

Jump to the latest result

for i

for of

forEach

some

every

map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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