Benchmark: Find index of select option

HTML Preparation code:

<select>
    <option value="Strawberry">Strawberry</option>
    <option value="Blueberry">Blueberry</option>
    <option value="Peach">Peach</option>
    <option value="Pomegranate">Pomegranate</option>
    <option value="Grape">Grape</option>
    <option value="Banana">Banana</option>
    <option value="Cherry">Cherry</option>
    <option value="Pineapple">Pineapple</option>
    <option value="Pear">Pear</option>
    <option value="Plum">Plum</option>
    <option value="Muskmelon">Muskmelon</option>
    <option value="Avocado">Avocado</option>
    <option value="Apricot">Apricot</option>
    <option value="Mango">Mango</option>
    <option value="Apple">Apple</option>
    <option value="Papaya">Papaya</option>
    <option value="Lemon">Lemon</option>
    <option value="Coconut">Coconut</option>
    <option value="Jackfruit">Jackfruit</option>
    <option value="Nectarine">Nectarine</option>
  	<option value="Strawberry">Strawberry</option>
    <option value="Blueberry">Blueberry</option>
    <option value="Peach">Peach</option>
    <option value="Pomegranate">Pomegranate</option>
    <option value="Grape">Grape</option>
    <option value="Green Banana">Green Banana</option>
    <option value="Cherry">Cherry</option>
    <option value="Pineapple">Pineapple</option>
    <option value="Pear">Pear</option>
    <option value="Plum">Plum</option>
    <option value="Muskmelon">Muskmelon</option>
    <option value="Avocado">Avocado</option>
    <option value="Apricot">Apricot</option>
    <option value="Mango">Mango</option>
    <option value="Apple">Apple</option>
    <option value="Papaya">Papaya</option>
    <option value="Lemon">Lemon</option>
    <option value="Coconut">Coconut</option>
    <option value="Jackfruit">Jackfruit</option>
    <option value="Nectarine">Nectarine</option>
</select>

Tests:

For..Loop
const selectElement = document.querySelector('select'); let selectedIndex = -1; for (let i = 0; i < selectElement.options.length; i++) { if (selectElement.options[i].value === 'Green Banana') { selectedIndex = i; break; } }
FindIndex
const selectElement = document.querySelector('select'); const selectedIndex = [...selectElement.options].findIndex(o => o.value === 'Green Banana');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For..Loop
FindIndex

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.

**What is being tested:**

MeasureThat.net is testing the performance of two approaches to find the index of an option in a `select` element:

1. **For...Loop**: This approach uses a traditional `for` loop to iterate through each option in the `select` element and checks if the value matches `'Green Banana'`. If it does, the index is stored in the `selectedIndex` variable.
2. **FindIndex**: This approach uses the Array.prototype.findIndex() method to find the index of the first occurrence of an element with a specific value (`'Green Banana'`) in the array of options.

**Options compared:**

The two approaches are being compared to determine which one is faster for finding the index of an option in a `select` element.

**Pros and Cons:**

* **For...Loop**:
	+ Pros:
		- Easy to understand and implement.
		- Works well for small arrays.
	+ Cons:
		- Can be slow for large arrays due to the overhead of the loop.
		- Not as efficient as other methods like `findIndex`.
* **FindIndex**:
	+ Pros:
		- Fast and efficient for finding a single element in an array.
		- Does not require manual looping or indexing.
	+ Cons:
		- May not be suitable for all use cases, such as when the array is very large.
		- Can be slower than traditional looping methods like `for` loop if the array is very small.

**Library usage:**

In both test cases, no libraries are used. The `findIndex()` method is a built-in JavaScript method that searches for an element in an array and returns its index.

**Special JS features or syntax:**

There is no special JS feature or syntax being tested in these examples. They use standard JavaScript constructs like `for` loops, arrays, and the `querySelector()` method to manipulate the DOM.

**Other alternatives:**

If you were to implement this benchmark from scratch, other approaches could be:

* Using the Array.prototype.indexOf() method instead of findIndex()
* Using a library like jQuery to simplify the process
* Implementing a custom algorithm or data structure for faster lookup
* Using Web Workers or other parallel processing techniques to speed up the tests

Keep in mind that these alternatives may not provide significant performance gains, and the existing approaches using `findIndex()` and traditional looping should be sufficient for most use cases.

Related benchmarks:

Find index of select option (version: 0)

Find one option's index in select element

Comparing performance of: For..Loop vs FindIndex

Created: 5 years ago by: Guest

Jump to the latest result

For..Loop

FindIndex

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