One Function to rule them all
And in its body, call them
Introducing map()
Before:
multByFive(), collectValues();
After:
map()
Overview
four basic steps
1. Loop through collection
2. transform values (Map)
3. Collect results in array
4. Return array to user
Looks like a winning formula!
Let's turn it into a higher order function.
map
map takes two arguments: a collection and a callback. It invokes the callback on each value in the collection, transforming each value. It then returns an array containing each of the new values.
Definition
map
var map = function(collection, callback){
var results = [];
each(collection, function(element){
results.push(callback(element));
});
return results;
};Why are we invoking the callback on each value?
Let's take a look.
Example
Our functions
var multByFive = function(number){
return number * 5
};
var map = function(collection, callback){
var results = [];
each(collection, function(element){
results.push(callback(element));
});
return results;
};Invoked
Our functions
var listOfNumbers= [1, 2, 3, 4];
var multByFive = function(number){
return number * 5
};
var fives = map(listOfNumbers, multByFive);
console.log(fives);
// [5, 10, 15, 20];Why does this matter
Now, we don’t have to rewrite the each functionality over and over and over again like we did with multby or collectValues
We can just use our `map` function and pass in the functionality as a callback!
var person = {name: “Albrey”, hungry: true}
var collectValues = function(value){
return value;
};
var personValues = map(person, collectValues);
console.log(personValues) // what will we get?invoked
var person = {name: “Albrey”, hungry: true}
var collectValues = function(value){
return value;
};
var personValues = map(person, collectValues);
console.log(personValues)
// ["Albrey", true];Let's pass our new `collectValues` function to transform as a callback.
Can we pass anonymous functions to map?
Yes, and it's highly recommended.
HOF Inception
Taking our use of higher order functions once step further
HOF Inception
var multByFive = function(number){
return number * 5
};
var map = function(collection, callback){
var result = [];
each(collection, function(element){
result.push(callback(element));
});
return results;
};Earlier example...
HOF Inception
var multByFive = function(number){
return number * 5
};
var numbers = [1, 2, 3, 4, 5];
var fives = map(numbers, multByFive);
console.log(fives);
// [5, 10, 15, 20, 25];Invoked
HOF Inception
Conversion to anonymous function
var numbers = [1, 2, 3, 4, 5];
var fives = map(numbers, function(number){
return number * 5;
});
console.log(fives);
// [5, 10, 15, 20, 25];Pass our anonymous into function into map
HOF Inception
var numbers = [1, 2, 3, 4, 5];
var fives = map(numbers, function(number){
return number * 5;
});
console.log(fives);
// [5, 10, 15, 20, 25];We have a problem...
We can only use this instance of transform once.
As software engineers, we want to be able to use this instance as many times as we want.
HOF Inception
var numbers = [1, 2, 3, 4, 5];
var fives = map(numbers, function(number){
return number * 5;
});
console.log(fives);
// [5, 10, 15, 20, 25];Wrappers Delight
var numbers = [1, 2, 3, 4, 5];
map(numbers, function(number){
return number * 5;
});var numbers = [1, 2, 3, 4, 5];
var mult5 = function(collection){
map(collection, function(number){
return number * 5;
});
};var numbers = [1, 2, 3, 4, 5];
var mult5 = function(collection){
return map(collection, function(number){
return number * 5;
});
};var numbers = [1, 2, 3, 4, 5];
var mult5 = function(collection){
return map(collection, function(number){
return number * 5;
});
};
var fives = mult5(numbers)
console.log(fives)
// [5, 10, 15, 20, 25]; Get rid of the variable storage.
Wrap our transform in a new function.
Return our new array to the user
Let's see it in action.
Let's make this reusable.
Let's make this instance reusable
HOF Inception
Wait, there's more?
var numbers = [1, 2, 3, 4, 5];
var mult5 = function(collection){
return map(collection, function(number){
return number * 5;
});
};
var fives = mult5(numbers)
console.log(fives)
// [5, 10, 15, 20, 25]; This function works great if we're multiplying by 5
What if we want to multiply by anything?
HOF Inception
"Flexibility is key." - Brendan Eich
var numbers = [1, 2, 3, 4, 5];
var mult5 = function(collection){
return map(collection, function(number){
return number * 5;
});
};
var fives = mult5(numbers)
console.log(fives)
// [5, 10, 15, 20, 25]; var numbers = [1, 2, 3, 4, 5];
var mult5 = function(collection, inputNumber){
return map(collection, function(number){
return number * 5;
});
};
var fives = mult5(numbers)
console.log(fives)
// [5, 10, 15, 20, 25]; var numbers = [1, 2, 3, 4, 5];
var mult5 = function(collection, inputNumber){
return map(collection, function(number){
return number * inputNumber;
});
};
var fives = mult5(numbers)
console.log(fives)
// [5, 10, 15, 20, 25]; var numbers = [1, 2, 3, 4, 5];
var multiplyByWhatever = function(collection, inputNumber){
return map(collection, function(number){
return number * inputNumber;
});
};
var fives = multiplyByWhatever(numbers, 5);
console.log(fives)
// [5, 10, 15, 20, 25]; First, let's add an 'inputNumber' parameter to our function definition.
Second, let's multiply each number by our 'inputNumber' instead of by 5
Lastly, we're going to rename our mult5 to something better: multiplyByWhatever
We can now pass in 5 as an input number
HOF Inception
"Flexibility is key." - Brendan Eich
var numbers = [1, 2, 3, 4, 5];
var fives = multiplyByWhatever(numbers, 5);
console.log(fives)
// [5, 10, 15, 20, 25];
var tens = multiplyByWhatever(numbers, 10);
console.log(tens)
// [10, 20, 30, 40, 50];
var pies = multiplyByWhatever(numbers, Math.PI);
console.log(pies)
// you're going to have to figure this outWe now have the flexibility to multiply by whatever we want.
Map & Higher Order Function Inception
By telegraphprep
Map & Higher Order Function Inception
How to create a function that will allow us to multByTwo, squareByTwo, or collectValues on the fly!
