The Logic Behind filter()

When using filter, it's easy to focus on the operations inside the method and miss what exactly is happening under the hood. There are 3 distinct things happening in a typical filter() call. Let's break it down for an example array.

const arr = [2,4,6,8,10]

const newArr = arr.filter((elem)=>{
    <logic goes here>
    return  someBool
    }

Let's focus on this segment specifically

arr.filter((elem)=>{
    <logic goes here>
    return  someBool
}

Starting from the beginning, the filter iterates over each element of the array, in order. Regardless of what logic is being done, this step is vital because of the primary goal of filter: to generate a new array. At each step of the process, filter's only priority is determining if the current element will go into the array or not. Writing this as a separate function would look like this:

    const newArr = []
    function filter(element){
        if(true){
            newArr.push[element]
        }
    }

Unlike map(), which also uses an input array to generate a new array, the logic inside of filter has no effect on the elements themselves. It is only interested in adding the element, as it is, to the new array.

So what's the point of the logic inside of the filter()? In our example, the element itself isn't even used, it's only relevant when it's pushed into the newArr. It may seem unintuitive, but the logical flow is very simple.

Take element into memory - > check logic for bool value -> push element to new array or toss it out

If we were to hard code our boolean value, we would get a copy of the original array (if our bool is set to true), or an empty array (if our bool is set to false). So how does that help us when we want to actually filter something in the real world? The simple answer is to ignore everything about filter() except this: write a condition against the element that will only return true or false.

arr = [2, 4, 6, 8, 10]
const newArr = arr.filter((elem)=>{
    if(elem > 5){
        return true}
    else if (elem <=5){
        return false}
})
//expected value of newArr: [6, 8, 10]

However, there is another property of filter() that can make this logical flow simpler: undefined returns are considered falsy in filters. This means that your logic only has to check for conditions that will resolve as true, reducing the lines you need to write. The filter above can be significantly shortened with this in mind.

arr = [2, 4, 6, 8, 10]
const newArr = arr.filter((elem)=> elem > 5)
//expected value of newArr: [6, 8, 10]

This is the syntax you'll see most often in the wild, and without the understanding above, can be quite confusing. But now that we've broken down what exactly filter does, and how exactly it manages to do it, the shortened syntax should be very clear and readable.