## DEV Community

Christian Falucho

Posted on

# 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.