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>

​x
 
<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;
}

 
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 loopfunction 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 loopfunction 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");
testLodashFilter("red");
Native filter
testFilter("red");
testFilter("red");
For Loop
testFor("red");
testFor("red");
Whlie Loop
testWhile("red");
testWhile("red");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Browser/OS: Chrome 71 on Mac OS X 10.14.0

View result in a separate tab

Test name	Executions per second
Lodash Filter	1605911.6 Ops/sec
Native filter	4183944.5 Ops/sec
For Loop	524993.2 Ops/sec
Whlie Loop	538727.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

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:

Lodash Filter: Uses Lodash's filter() function to filter the products by color.
Native Array.prototype.filter(): Utilizes the native filter() method on the Array.prototype for filtering products by color.
For Loop: Employs a traditional For Loop approach to iterate through the products and filter them based on color.
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

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.
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.
For Loop:
- Pros: simple, easy to understand, and flexible.
- Cons: can be slow for large datasets due to the manual iteration.
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.

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.

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: 8 years ago by: Registered User

Jump to the latest result

Lodash Filter

Native filter

For Loop

Whlie Loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):