Benchmark: Filter objects in array by attribute

HTML Preparation code:

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.12.0/lodash.min.js"></script>
    </head>
    <body>
    </body>
</html>

Script Preparation code:

var products = [
  {
    name: "Foo",
    id: 1,
    color: "red",
    price: {
      beforeSale: 14.11,
      afterSale: 11.11,
      currency: "USD"
    }
  },
  {
    name: "Foo2",
    id: 2,
    color: "green",
    price: {
      beforeSale: 24.22,
      afterSale: 22.22,
      currency: "USD"
    }
  },
  {
    name: "Foo3",
    id: 3,
    color: "blue",
    price: {
      beforeSale: 44.33,
      afterSale: 33.33,
      currency: "USD"
    }
  },
  {
    name: "Foo4",
    id: 4,
    color: "red",
    price: {
      beforeSale: 54.44,
      afterSale: 44.44,
      currency: "USD"
    }
  },
  {
    name: "Bar",
    id: 5,
    color: "green",
    price: {
      beforeSale: 64.55,
      afterSale: 55.55,
      currency: "USD"
    }
  },
  {
    name: "Bar2",
    id: 6,
    color: "blue",
    price: {
      beforeSale: 74.66,
      afterSale: 66.66,
      currency: "USD"
    }
  },
  {
    name: "Bar3",
    id: 7,
    color: "red",
    price: {
      beforeSale: 84.77,
      afterSale: 77.77,
      currency: "USD"
    }
  },
  {
    name: "Bar4",
    id: 8,
    color: "green",
    price: {
      beforeSale: 94.88,
      afterSale: 88.88,
      currency: "USD"
    }
  },
  {
    name: "Baz",
    id: 9,
    color: "blue",
    price: {
      beforeSale: 104.99,
      afterSale: 99.99,
      currency: "USD"
    }
  }
];


// Lodash's filter()
function testLodashFilter(color) {
  return _.filter(products, function (product) {
    return product.color === color;
  });
}

// Native Array.prototype.filter()
function testFilter(color) {
  return products.filter(function (product) {
    return product.color === color;
  });
}

// For loop
function testFor(color) {
  var i;
  var results = [];
  
  for (i = 0; i < products.length; i++) {
    if (products[i].color === color) {
      results.push(products[i]);
    }
  }
  
  return results;
}

// While loop
function testWhile(color) {
  var i = 0;
  var results = [];
  
  while(i < products.length) {
    if (products[i].color === color) {
      results.push(products[i]);
    }
    
    i++;
  }
  
  return results;
}

Tests:

Lodash Filter
testLodashFilter("red");
Native filter
testFilter("red");
For Loop
testFor("red");
Whlie Loop
testWhile("red");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash Filter
Native filter
For Loop
Whlie Loop

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 dive into the provided benchmark and explore what's being tested, the different approaches compared, their pros and cons, and other considerations.

**Benchmark Definition**
The benchmark is designed to test which approach is the most efficient for filtering an array of objects based on an attribute (in this case, color). The benchmark creates a sample dataset `products` containing 10 objects with varying colors. It then defines four test cases:

1. **Lodash Filter**: Uses Lodash's `filter()` function to filter the products by color.
2. **Native Array.prototype.filter()**: Utilizes the native `filter()` method on the `Array.prototype` for filtering products by color.
3. **For Loop**: Employs a traditional For Loop approach to iterate through the products and filter them based on color.
4. **While Loop**: Uses a While Loop to achieve the same filtering as the For Loop.

**Options Compared**
The benchmark compares the performance of four different approaches:

* Lodash's `filter()` function
* Native `Array.prototype.filter()`
* Traditional For Loop
* While Loop

**Pros and Cons**

1. **Lodash Filter**:
	* Pros: concise, efficient, and well-maintained.
	* Cons: relies on an external library (Lodash), may introduce additional overhead for those who don't use it.
2. **Native Array.prototype.filter()**:
	* Pros: built-in, efficient, and widely supported.
	* Cons: might be slower than custom implementations due to overhead from the native method call.
3. **For Loop**:
	* Pros: simple, easy to understand, and flexible.
	* Cons: can be slow for large datasets due to the manual iteration.
4. **While Loop**:
	* Pros: similar performance characteristics to For Loop, with an added layer of abstraction (the While Loop itself).
	* Cons: also has the same limitations as the For Loop.

**Other Considerations**

* The benchmark uses a relatively small dataset (10 objects), which might not accurately represent the performance characteristics for larger datasets.
* The Chrome browser is used as the test environment, which may introduce some bias due to its popularity and specific implementation details.
* The benchmark does not account for potential caching or optimization effects that may occur in production environments.

**Interpretation of Latest Benchmark Result**
The latest benchmark result shows the relative performance of each approach on a single dataset. Lodash's `filter()` function appears to be the fastest, followed closely by the Native `Array.prototype.filter()`. The For Loop and While Loop are slower, likely due to the overhead from manual iteration.

Keep in mind that this benchmark is specific to the provided test case and may not generalize well to other scenarios or datasets. To gain a more comprehensive understanding of each approach's performance characteristics, additional benchmarks with varying dataset sizes and environments would be necessary.

Related benchmarks:

Filter objects in array by attribute (version: 0)

Testing the cheapest pattern for filtering an array of objects based on attribute.

Comparing performance of: Lodash Filter vs Native filter vs For Loop vs Whlie Loop

Created: 9 years ago by: Registered User

Jump to the latest result

Lodash Filter

Native filter

For Loop

Whlie Loop

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