Introducing map()
Before:
multByFive(), collectValues();
After:
map()
Looks like a winning formula!
Let's turn it into a higher order function.
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.
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.
var multByFive = function(number){
return number * 5
};
var map = function(collection, callback){
var results = [];
each(collection, function(element){
results.push(callback(element));
});
return results;
};
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];
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?
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.
Yes, and it's highly recommended.
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...
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
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
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.
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
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?
"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
"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 out
We now have the flexibility to multiply by whatever we want.