Day 9 of #100DaysOfCode!

Today's progress

Today I worked on more functional programming. I learned to work with the filter() and reduce() methods. For the purpose of today. I will focus more on filter().

What I learned

The word filter in simple terms means to remove unwanted parts from something. As it implies, the filter() method extracts elements from an array that passes the test executed by the function and returns a new array with the values added.

Say we have this array of colors and we want to return all of the elements in the array where the color's word length is equal to or larger than 6. Well, we can solve that by using the filter() method.

let colors = ['blue', 'red', 'orange', 'yellow', 'green', 'black', 'white', 'purple']

let passTest = colors
                   .filter(word => word.length >= 6)

console.log(passTest)
//output: ["orange", "yellow", "purple"]

In the above example. We use the filter() method on colors array and with our function pass in an element, which in this case is word and return the word that coerces to true, to keep the element.

When we console.log(passTest), you'll see the words that passed the function's test. ["orange", "yellow", "purple"]

Searching inside an array based on a criteria.

Let's take it one step further...

Using the array colors from above. Instead of word length, let's search for the word that has the letters low and return that word. We can continue to utilize filter() to solve this problem.

let colors = ['blue', 'red', 'orange', 'yellow', 'green', 'black', 'white', 'purple']

function search(arr, query){
    return arr.filter(function(str){
        return str.indexOf(query) !== -1
    })
}

console.log(search(colors, "low"))
//output: ["yellow"]

Let's go ahead and break down this code.

First, we created a function that takes two parameters first parameter being the arr, the second being the query (a string).

On the second line of code...

return arr.filter(function(str){
})

We will return the filtered string from the array but first we must pass in the element str which the inner return statement will use.

return str.indexOf(query) !== -1

In this return statement we are iterating over each element in the array and using the indexOf method to return the index of the given query and compares it. If true, it will return the element's word.

console.log(search(colors, "low")) to test it.

Filling in the gaps

The complete parameters for filter() is as follows:

array.filter(function callbackFn(element, index, array))

the callbackFn function is the argument that test each element in the array. If true keep the element. If false do not keep. If no elements pass the test, there will be an empty array.

Both index and array are optional.

Simply put

The filter() method is a great tool for filtering out elements from an array that passes a test (provided as a function). It then returns those values into a new array and thus does not mutate the original array.