Filter

A Filter exists in many different forms across the different server-side templating languages, but at its core, it is simply a function which accepts data and returns modified data. In this case, when we talk about a Filter we're talking about a function which accepts an array of Component data (a Component List) and returns a modified array based on some conditions you specify. Take the following Filter and Component List:

function myFilter(arr) {
  return arr.filter(item => {
    return item.isAwesome;
  });
}


var myComponentList = [
  {
    title: 'My Component!',
    isAwesome: true
  },
  {
    title: 'My Second Component!',
    isAwesome: false
  }
];

var myFilteredArray = myFilter(myComponentList);

After passing the Component List through the Filter the value of myFilteredArray is:

[
  {
    title: 'My Component!',
    isAwesome: true
  }
]