Day 9 of #100DaysOfCode!

Tags: javascript, 100daysofcode, beginners, codenewbie
Published: 2021-06-26 01:07:44

<h2>Today's progress</h2>
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()`.

<h2>What I learned</h2>
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.

```javascript
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.

```javascript
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...

```javascript
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.

```javascript
 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.

<h2>Filling in the gaps</h2>
The complete parameters for `filter()` is as follows:
```javascript
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.

<h2>Simply put</h2>

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.