Benchmark: filter vs for..of vs for (i = 0..) vs preallocate

Script Preparation code:

function filterUsingFilter(numbers) {
  return numbers.filter((num) => num < 9);
}

function filterUsingForLoop(numbers) {
  const lessThan9 = [];
  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] < 9) {
      lessThan9.push(numbers[i]);
    }
  }
  return lessThan9;
}

function filterUsingForOfLoop(numbers) {
  const lessThan9 = [];
  for (const num of numbers) {
    if (num < 9) {
      lessThan9.push(num);
    }
  }
  return lessThan9;
}

function filterUsingForOfLoopPreallocate(numbers) {
  const lessThan9 = new Array(numbers.length);
  let index = 0;
  for (const num of numbers) {
    if (num < 9) {
      lessThan9[index++] = num;
    }
  }
  return lessThan9;
}

function filterUsingForIndexLoopPreallocate(numbers) {
  const lessThan9 = new Array(numbers.length);
  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] < 9) {
      lessThan9[i] = numbers[i];
    }
  }
  return lessThan9;
}

function filterUsingForOfLoopPreallocateWithEstimatedSize(numbers) {
  const lessThan9 = new Array(Math.floor(numbers.length / 2));
  let index = 0;
  for (const num of numbers) {
    if (num < 9) {
      lessThan9[index++] = num;
      if (index === lessThan9.length) {
        lessThan9.push(0);
      }
    }
  }
  return lessThan9;
}

function generateRandomArray(size) {
  const randomArray = new Array(size);
  for (let i = 0; i < size; i++) {
    randomArray[i] = Math.floor(Math.random() * 20); // Random integers between 0 and 19
  }
  return randomArray;
}

const randomArrays = [1,2,3,4].map((i) => generateRandomArray(100 ** i));

function bench(f) {
  for (let arr of randomArrays) {
    f(arr);
  }
}

Tests:

filterUsingFilter
bench(filterUsingFilter)
filterUsingForLoop
bench(filterUsingForLoop)
filterUsingForOfLoop
bench(filterUsingForOfLoop)
filterUsingForOfLoopPreallocate
bench(filterUsingForOfLoopPreallocate)
filterUsingForIndexLoopPreallocate
bench(filterUsingForIndexLoopPreallocate)
filterUsingForOfLoopPreallocateWithEstimatedSize
bench(filterUsingForOfLoopPreallocateWithEstimatedSize)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filterUsingFilter
filterUsingForLoop
filterUsingForOfLoop
filterUsingForOfLoopPreallocate
filterUsingForIndexLoopPreallocate
filterUsingForOfLoopPreallocateWithEstimatedSize

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.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark tests four different approaches to filter an array of integers where each integer is less than 9:

1. `filterUsingFilter`
2. `filterUsingForLoop`
3. `filterUsingForOfLoop`
4. `filterUsingForOfLoopPreallocate` (with and without estimated size)

**What's being tested**

Each test case runs the provided JavaScript function in a loop using an array of random sizes generated by `generateRandomArray(size)`. The goal is to measure the execution speed of each approach.

**Options Compared**

Here are the four options compared:

1. **`filterUsingFilter`**: Uses the native `Array.prototype.filter()` method.
2. **`filterUsingForLoop`**: Uses a traditional `for` loop with an index variable to iterate through the array.
3. **`filterUsingForOfLoop`**: Uses the new `for...of` loop syntax to iterate through the array.
4. **`filterUsingForOfLoopPreallocate`** (with and without estimated size): Uses a preallocated array of a fixed size, with optional estimation of the array length.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **`filterUsingFilter`**:
	* Pros: Native method, efficient, easy to read.
	* Cons: May not be as readable or intuitive as other approaches for developers without experience with native methods.
2. **`filterUsingForLoop`**:
	* Pros: Flexible, can be used for any type of iteration.
	* Cons: Less readable and more error-prone than other approaches due to the index variable.
3. **`filterUsingForOfLoop`**:
	* Pros: Modern syntax, easy to read, efficient.
	* Cons: May not work as expected in older browsers or environments that don't support `for...of`.
4. **`filterUsingForOfLoopPreallocate`** (with and without estimated size):
	* Pros: Can improve performance by reducing array resizing, especially for large arrays.
	* Cons:
		+ Without estimation, the preallocated array may not be sufficient for all input sizes.
		+ With estimation, there's a risk of overestimating or underestimating the required array size.

**Benchmark Results**

The provided benchmark results show the execution speed (in executions per second) for each test case across multiple browsers and devices. The top-performing approach is `filterUsingForOfLoop`, followed closely by `filterUsingFilter`. The other approaches are slower, likely due to their respective limitations.

In summary, this benchmark tests four different approaches to filtering an array of integers, comparing their performance, readability, and potential trade-offs.

Related benchmarks:

filter vs for..of vs for (i = 0..) vs preallocate (version: 2)

Comparing performance of: filterUsingFilter vs filterUsingForLoop vs filterUsingForOfLoop vs filterUsingForOfLoopPreallocate vs filterUsingForIndexLoopPreallocate vs filterUsingForOfLoopPreallocateWithEstimatedSize

Created: 2 years ago by: Registered User

Jump to the latest result

filterUsingFilter

filterUsingForLoop

filterUsingForOfLoop

filterUsingForOfLoopPreallocate

filterUsingForIndexLoopPreallocate

filterUsingForOfLoopPreallocateWithEstimatedSize

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