Benchmark: find() vs for...of vs for-loop multi variable with switches

HTML Preparation code:

<div id='test'></div>

Tests:

for-loop
var arr = ['hello', 'a', 'b', 'c', 'f', 123]; let val, a, b, c; for(i=0; i<arr.length; i++){ var value = arr[i]; if (value === 'f') { val = value; } if (value === 'a') { a = value } if (value === 'b') { b = value } if (value === 'c') { c = value } }
for..of
var arr = ['hello', 'a', 'b', 'c', 'f', 123]; let val, a, b, c; for (var value of arr) { if (value === 'f') { val = value; } if (value === 'a') { a = value } if (value === 'b') { b = value } if (value === 'c') { c = value } }
Array.find()
var arr = ['hello', 'a', 'b', 'c', 'f', 123]; let val = arr.find(node => node.id === 'f'); let a = arr.find(node => node.id === 'a'); let b = arr.find(node => node.id === 'b'); let c = arr.find(node => node.id === 'c');
for-loop with switch
var arr = ['hello', 'a', 'b', 'c', 'f', 123]; let val, a, b, c; for(i=0; i<arr.length; i++){ var value = arr[i]; switch(value) { case 'f': val = value; case 'a': a = value; case 'b': b = value; case 'c': c = value; } }
for..of with switch
var arr = ['hello', 'a', 'b', 'c', 'f', 123]; let val, a, b, c; for (var value of arr) { switch(value) { case 'f': val = value; case 'a': a = value; case 'b': b = value; case 'c': c = value; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for-loop
for..of
Array.find()
for-loop with switch
for..of with switch

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.

Measuring the performance of different JavaScript iteration methods can be complex, but I'll break it down into understandable parts.

**Iteration Methods Comparison**

The benchmark tests four different approaches to iterate over an array:

1. **For loop (`for-loop`)**: This is a traditional approach using a `for` loop with an incrementing index.
2. **For...of loop (`for..of`)**: A more modern approach introduced in ECMAScript 2015 (ES6), which uses the `for...of` syntax to iterate over arrays and other iterable objects.
3. **Array.find() method (`Array.find()`)**: A search method that returns the first element in an array that satisfies a provided testing function.
4. **For loop with switch statement (`for-loop with switch`)**: Combining the traditional `for` loop with a `switch` statement to check multiple conditions.

**Pros and Cons of Each Approach**

1. **For loop**: Pros - Simple, easy to understand. Cons - Can be slower due to the overhead of incrementing an index.
2. **For...of loop**: Pros - More concise, modern syntax. Cons - May not work as expected with some older browsers or environments that don't support `for...of`.
3. **Array.find() method**: Pros - Easy to read and maintain, fast in most cases. Cons - Returns the first element that matches, so if there are multiple matching elements, only one will be returned.
4. **For loop with switch statement**: Pros - Allows checking multiple conditions simultaneously. Cons - Can be slower due to the overhead of the `switch` statement, and it may not work as expected with some older browsers or environments.

**Library Used: None**

The benchmark doesn't use any external libraries beyond the standard JavaScript library.

**Special JS Features/Syntax: For...of Loop (ES6)**

The `for...of` loop is a new syntax introduced in ECMAScript 2015 (ES6). It provides a more concise way to iterate over arrays and other iterable objects. The syntax `for (var value of arr)` creates a variable `value` that takes on the value of each element in the array on each iteration.

**Other Alternatives**

In addition to these four approaches, there are other ways to iterate over arrays in JavaScript, such as:

* Using `forEach()` method
* Using `map()`, `filter()`, and `reduce()` methods
* Using loops with conditional statements (e.g., `if`/`else`)

Keep in mind that each of these alternatives has its own trade-offs in terms of performance, readability, and maintainability.

Related benchmarks:

find() vs for...of vs for-loop multi variable with switches (version: 0)

Testing the difference between native loops and find() with setting multiple variables

Comparing performance of: for-loop vs for..of vs Array.find() vs for-loop with switch vs for..of with switch

Created: 4 years ago by: Guest

Jump to the latest result

for-loop

for..of

Array.find()

for-loop with switch

for..of with switch

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):