Run results for: Filter objects in array by attribute

Run details:

User agent: Mozilla/5.0 (Android 5.1.1; Mobile; rv:49.0) Gecko/49.0 Firefox/49.0

Browser: Firefox Mobile 49

Operating system: Android 5.1.1

Device Platform: Other

Date tested: 8 years ago

Test name	Executions per second
Lodash Filter	737965.6 Ops/sec
Native filter	3301675.8 Ops/sec
For Loop	3104177.2 Ops/sec
Whlie Loop	3161800.8 Ops/sec

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");

Run results for: Filter objects in array by attribute

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

Lodash Filter

Native filter

For Loop

Whlie Loop