Benchmark: loop through an array

Script Preparation code:

var arr = [];
for (let i = 0; i < 1000; ++i) {
  arr[i] = i;
}

function doSomething(value) {
  return Math.pow(value, 3) * 7;
}

Tests:

foreach with callBack
arr.forEach(item => { doSomething(item); });
foreach
arr.forEach(doSomething);
for with keeping length
const length = arr.length; for (let i = 0; i < length; i++) { doSomething(arr[i]); }
for
for (let i = 0; i < arr.length; i++) { doSomething(arr[i]); }
for / of
for (const value of arr) { doSomething(value); }
for / in
for (const value in arr) { doSomething(value); }
map
arr.map(doSomething);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach with callBack
foreach
for with keeping length
for
for / of
for / in
map

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 80 on Windows

View result in a separate tab

Test name	Executions per second
foreach with callBack	168653.4 Ops/sec
foreach	233674.7 Ops/sec
for with keeping length	121821.5 Ops/sec
for	91857.0 Ops/sec
for / of	98421.0 Ops/sec
for / in	11097.7 Ops/sec
map	65844.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks to compare the performance of different approaches. The provided JSON represents a benchmark definition, which includes:

* **Script Preparation Code**: A JavaScript code snippet that prepares the data for the benchmark. In this case, it creates an array `arr` with 1000 elements using a loop.
* **Html Preparation Code**: An empty string, indicating that no HTML preparation is required.

The individual test cases are defined in another JSON array, which includes:

* Each test case has a unique name and a corresponding "Benchmark Definition" code snippet. The benchmarks define different ways to iterate over the `arr` array and apply the `doSomething` function.
	+ Some common approaches are:
		- Using `forEach` with a callback function (`foreach with callBack`)
		- Using `forEach` without a callback function (`foreach`)
		- Using a traditional loop with keeping track of the length (`for with keeping length`)
		- Using a `for...of` loop (`for / of`)
		- Using a `for...in` loop (`for / in`)
		- Using the `map` method (`map`)
* Each test case also includes metadata such as browser, device platform, operating system, and executions per second.

**Comparison Options**

The benchmark compares different approaches to iterating over an array and applying a function. The pros and cons of each approach are:

* **forEach with callback**: This is the most common way to iterate over arrays in JavaScript. It's concise and easy to read, but it can be slower than other approaches due to the overhead of the callback function.
	+ Pros: Easy to understand, concise code
	+ Cons: Potential performance impact due to callbacks
* **forEach without callback**: This approach is similar to `forEach with callback`, but without the need for a callback function. It's slightly faster than `forEach with callback`.
	+ Pros: Faster than `forEach with callback`
	+ Cons: Less readable code, requires explicit indexing
* **for with keeping length**: This approach uses a traditional loop to iterate over the array, and keeps track of the length to avoid unnecessary iterations.
	+ Pros: Can be faster due to reduced overhead, more control over iteration
	+ Cons: More verbose code, potential performance impact if not implemented correctly
* **for...of**: This is a modern JavaScript feature that allows iterating over arrays using a simple syntax. It's concise and easy to read, but may have performance implications due to the way it handles iterators.
	+ Pros: Concise, easy to read
	+ Cons: Potential performance impact due to iterator management
* **for...in**: This approach uses a traditional loop to iterate over the array properties, which can lead to unexpected behavior if not used correctly. It's generally less recommended than other approaches.
	+ Pros: None notable
	+ Cons: Potential for unexpected behavior, less readable code
* **map**: This method creates a new array by applying a function to each element of the original array. It's concise and easy to read, but can be slower due to the creation of a new array.
	+ Pros: Concise, easy to read
	+ Cons: Potential performance impact due to array creation

**Library and Special Features**

There are no libraries explicitly mentioned in the benchmark definition or test cases. However, some features may be implied:

* The use of `forEach` and other array methods suggests that the browser supports modern JavaScript features.
* The presence of `for...of` and `for...in` loops implies that the browser supports these modern loop syntaxes.

**Other Considerations**

When interpreting the benchmark results, consider the following factors:

* **Device platform**: The results are taken from a desktop environment. It's unclear how well the benchmarks will perform on mobile devices or other platforms.
* **Browser version**: The benchmark is run in Firefox 80. Other browsers may exhibit different performance characteristics.
* **Array size**: The array `arr` has 1000 elements, which can impact performance due to memory allocation and garbage collection.

Keep these factors in mind when interpreting the benchmark results and choosing an approach for your own projects.

Related benchmarks:

loop through an array (version: 0)

Comparing performance of: foreach with callBack vs foreach vs for with keeping length vs for vs for / of vs for / in vs map

Created: 4 years ago by: Registered User

Jump to the latest result

foreach with callBack

foreach

for with keeping length

for

for / of

for / in

map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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