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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 5 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	1605912.0 Ops/sec
Native filter	4183945.0 Ops/sec
For Loop	524993.3 Ops/sec
Whlie Loop	538727.2 Ops/sec

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