Vanilla Javascript is many things. One thing it is not, is simple. With all the complexities of data manipulation in javascript it can often feel like wading through a swamp . Passing a single piece of information like a rugby ball can become a real chore. This is where higher-order functions can take care of some of the stress.
FILTER( )
Okay, let’s say you’ve got an array of your friends.
let friends = [{name: 'David Bowie', status: 'Very Cool'}, {name: 'Prince', status: 'Very Cool'}, {name: 'Steve Urkel', status: 'Did I do thaaaat?'}]
Oh gross. What is Urkel doing here? We only want to hang out with our cool friends. Luckily, filter will help make a new room where our Very Cool friends can hang out. But Urkel is still our friend so we don’t want to…… MURDER him.
let friends = [{name: 'David Bowie', status: 'Very Cool'}, {name: 'Prince', status: 'Very Cool'}, {name: 'Steve Urkel', status: 'Did I do thaaaat?'}]
let coolFriends = people.filter(person => person.status === 'Very Cool')
// coolFriends = [{name: 'David Bowie', status: 'Very Cool'}, {name: "Prince", status: "Very Cool"}]
// friends = [{name: 'David Bowie', status: 'Very Cool'}, {name: 'Prince', status: 'Very Cool'}, {name: 'Steve Urkel', status: 'Did I do thaaaat?'}]
MAP( )
Let’s say you’ve got an array filled with Data and you need to feed each object in it through a function. Like so:
let array = [419, 68, 665]
function addOne(num){
num + 1
}
Boy do those numbers look lame. Map can help us! With map we can feed in the array and perform our addOne() function on each item in the array. But WHAT HAPPENS TO OUR ORIGINAL ARRAY?! AAAAAHHH!
Don’t worry! Map is going to feed us a new array built from the items we ran our function on leaving our original lame number array completely intact!
let array = [419, 68, 665]
function addOne(num){
num + 1
}
let thoseAreSomeCoolAssNumbers = array.map(num => addOne(num)}
// [420. 69, 666]
Reduce( )
Okay. So now that we know how to Filter and Map over our data, let’s think about how we can combine items in our array.
let array = [420, 69, 666]
Let’s take the array we mapped to make our very nice numbers. Surely these 3 very nice numbers add up to something glorious and life changing. But I don’t have a calculator and I’m very bad at math. First we’ll need to write a callback function that tells our reduce() function what we want to do to our numbers.
let numbers = [420, 69, 666]
let reducer = (a, b) => a + b
// Here we're using a functional expression to store our reducer function in a variable to feed into our reduce() function
let coolestNumber = array.reduce(reducer)
//coolestNumber = 1155
Well….. that was anticlimactic. But one thing to note is that unlike filter() and map() we’re not getting back a new array. We’re getting back an integer, the sum of all of our very cool numbers.
Alrighty. You don’t believe me that these are all really handy? Challenge excepted. I hope you’re ready for what’s coming to you.
Don’t say I didn’t warn you!
let array = ["N", "1", "e", "v", "$", "e", "r", " ", "g", "o", "@", "@", "n", "n", "a", " ", "g", "8", "9", "0", "i", "1", "v", "e", " ", "y", "o", ":", "u", " ", "u", "p", ",", " ", "n", "e", "5", "v", "7", "e", "r", " ", "g", "o", "n", "n", "a", " ", "l", "e", "t", " ", "y", "#", "o", "u", " ", "$", "&", "d", "*", "o", "w", "(", "n", ",", " ", "n", "e", "v", "@", "e", "r", " ", "g", "!", "!", "!", "!", "o", "n", "n", "a", " ", "t", "^", "u", "+", "r", "n", " ", "a", "r", "@", "o", "u", "&", "n", "d", " ", "a", "+", "^", "n", "%", "d", " ", "d", "|", "&", "4", "@", "e", "0", "=", "s", "%", "e", "5", "r", "!", "*", "t", " ", "$", "!", "y", "?", "+", "/", "o", ";", "#", "u"]
let reducer = (a, b) => a + b
let filteredMappedReducedArray = array.filter(function(char){
return /[A-Za-z\s,]/g.test(char)}).map(char => char.toUpperCase()).reduce(reducer)
// See the result below!
“NEVER GONNA GIVE YOU UP, NEVER GONNA LET YOU DOWN, NEVER GONNA TURN AROUND AND DESERT YOU”
What's the Ward? 
Leave a comment