Filter vs Map order vs Reduce

JavaScript performance comparison

Test case created by LaurynasGr

Preparation code

<script>
const items = [
  {
    "name": "Name 1",
    "image": "Image 1",
    "href": "Href 1",
    "now": "5.00",
    "was": "10.00",
    "saving": "5.00",
    "spot": 0
  },
  {
    "name": "Name 2",
    "image": "Image 2",
    "href": "Href 2",
    "now": "9.99",
    "was": "9.99",
    "saving": false,
    "spot": 1
  },
  {
    "name": "Name 3",
    "image": "Image 3",
    "href": "Href 3",
    "now": "9.99",
    "was": "9.99",
    "saving": false,
    "spot": 2
  },
  {
    "name": "Name 4",
    "image": "Image 4",
    "href": "Href 4",
    "now": "9.99",
    "was": "30.00",
    "saving": "20.00",
    "spot": 3
  },
  `<div class="image">
    <a href="Href 5">
      <img src="Image 5" alt="Name 5"/>
    </a>
  </div>`,
  `<div class="image">
    <a href="Href 6">
      <img src="Image 6" alt="Name 6"/>
    </a>
  </div>`,
];
</script>
    

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Filter + Map v1
items.filter(item => item && item.href).map(item => item.href);
pending…
Filter + Map v2
items.filter(item => item !== undefined && item.href !== undefined).map(item => item.href);
pending…
Map + Filter v1
items.map(item => item.href).filter(item => item);
pending…
Map + Filter v2
items.map(item => item.href).filter(item => item !== undefined);
pending…
Reduce v1
items.reduce((reduced, item) => {
  if (item && item.href) reduced.push(item.href);
  return reduced;
}, []);
pending…
Reduce v2
items.reduce((reduced, item) => {
  if (item !== undefined && item.href !== undefined) reduced.push(item.href);
  return reduced;
}, []);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments