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.
Top comments (0)