Array filter
Tags: javascript, functional
Published: 2020-01-28 17:41:13

The ability to filter data to a subset of itself is an important thing to understand when you are a software engineer, data scientist or otherwise working with data in some form. In this article we will take a look at how we may create our own implementation of the native filter functionality that is available in some form in most common languages. In our case the language of choice will be JavaScript.

In most implementations the filter function will take a [predicate](https://en.wikipedia.org/wiki/Predicate_(mathematical_logic)) to test each item in the collection and if the predicate is true, that item will be added to the new filtered collection. As an example, in vanilla JavaScript we could do the following:

```javascript
const candidates = [{
  name: "James",
  age: 26
}, {
  name: "Dave",
  age: 21
}, {
  name: "Sally",
  age: 15
}, {
  name: "Marc"
}];

function candidateAgeFilterFn(candidate) {
  return candidate.age && candidate.age >= 16;
}

const eligableForDrivingTest = candidates.filter(candidateAgeFilterFn);
console.log(eligableForDrivingTest); // [ { name: 'James', age: 26 }, { name: 'Dave', age: 21 } ]
```

Our aim is to implement a custom `filter` function to replicate this behaviour.

## Tests

```javascript
describe('filter', () => {
  it('should apply the condition correctly', () => {
    const collection = [-1, 2, -3];
    const filterFn = item => item > 0;
    const actual = filter(collection, filterFn);
    const result = [2];
    expect(actual).toStrictEqual(result);
  });
});
```

Generally we just need to test that given a collection and a predicate, the subset is returned as expected. Just like [our article about array map](https://dev.to/jamesrweb/array-map-4en), filter is a generally simple implementation to achieve as we will see later in the next section of this article and thus this test is enough for now to use as a proof.

## Implementation

The native `filter` function has the following signature:

```javascript
let new_array = arr.filter(function callback(currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])
```

We will aim to reproduce this behaviour with the following implementation:

```javascript
/**
 * @function filter
 * @description A function to filter a collection via a filtering function
 * @param {Array} collection - The collection to filter
 * @param {Function} filterFn - When this function returns true, the item is added to the final output collection
 * @returns {Array} The filtered collection
 */
function filter(collection, filterFn) {
  const output = [];
  const clone = [...collection];
  for (let index = 0; index < clone.length; index++) {
    const item = clone[index];
    const condition = filterFn(item, index, clone);
    if (condition === true) {
      output.push(item);
    }
  }
  return output;
}
```

We instantiate two arrays in the function body, the first will be our `output` array and the second is a clone of the `collection` array. As with [our article about array map](https://dev.to/jamesrweb/array-map-4en) we clone the `collection` since we will pass this clone into the provided `filterFn` and if the user decides to alter the array reference, the initial `collection` will not have mutated, only the clone. Next we loop each item in the cloned collection and run the `filterFn`, being sure to pass in the `item`, `index` and `cloned` array to match the native implementation. Finally we check if the `filterFn` returns true and if so, we add the current item to the `output` array. Once every item has been looped over and filtered we return the `output`.

Using our example of the native implementation near the top of this article, we could do the following to achieve the same results:

```javascript
const candidates = [{
  name: "James",
  age: 26
}, {
  name: "Dave",
  age: 21
}, {
  name: "Sally",
  age: 15
}, {
  name: "Marc"
}];

function filter(collection, filterFn) {
  const output = [];
  const clone = [...collection];
  for (let index = 0; index < clone.length; index++) {
    const item = clone[index];
    const condition = filterFn(item, index, clone);
    if (condition === true) {
      output.push(item);
    }
  }
  return output;
}

function candidateAgeFilterFn(candidate) {
  return candidate.age && candidate.age >= 16;
}

const eligableForDrivingTest = filter(candidates, candidateAgeFilterFn);
console.log(eligableForDrivingTest); // [ { name: 'James', age: 26 }, { name: 'Dave', age: 21 } ]
```

## Conclusions

Hopefully this article gave you some insight into how the native `filter` function works in languages like JavaScript. PHP uses `array_filter(collection, filterFn)`, Python uses `filter(filterFn, collection)`, etc. You can see the similarities of these and so with your new understanding of the mechanics at play, go and experiment and see what you can make happen. Re-invent the wheel and gain a deeper understanding of your tools and it'll help you going forward with your craft.