<!DOC Type html>
<html>
<head>
<title> Functional Programming</title>
<body>
<script src = "https://code.jquery.com/jquery-latest.min.js"></script>
<script scr = "underscore.js"></script>
<script> scr = "app.js"></script>
<script>
//Take this script and copy and paste into your text editor/compliler or browser console to see how functional programming works.
//Here we will look at Functional Programming and what makes Java Script such a powerful language.
//Let stsrt with declaring an array and then simply performing a console.log and printing the array.
var arr1 = [1,2,3];
console.log(arr1);
//Next we will create a new array and use the push function to add to the array but before adding we will change each element/item in the array by performing a functional operation on the array. In this example we simply will multiply each item in the original array by a factgor of two(2).
//We then console.log and print the new array. In our new Array each item in the array is twice the original.
var arr2 = [];
for(var i = 0; i < arr1.length; i++ ){
arr2.push(arr1[i] * 2);
}
console.log(arr2);
//We will now perform this same operation using functional programming.
//We will create a new function called "mapForEach" using two parameters when we call the function, an array and a function. The function will then crete a newArray as before and then push elements into the array after performing a function on each item of the original array. So when we call this new function we provide as parameters an array and we provide a function to perform on each item of that array. And finally we return a "new Array" when complete.
function mapForEach (arr, fn){
var newArr = [];
for(var i =0; i < arr.length; i++){
newArr.push(
fn(arr[i])
)
};
return newArr;
}
// Lets try this by using our mapForEach function to crete a new variable array.
//Our item is "arr[i] " for each item in the for loop and our function is to multiply the item by 2
//And as before we perform a console.log to print our result and we get the same array as before but this time we are using functional programming.
var arr3 = mapForEach(arr1, function(item){
return item * 2;
})
console.log(arr3);
//Now lets take another example where instead of multiplying our item by two(2) we can change it to evaluating or testing if item number > 2 for each loop and when we do a console.log we will convert to a boolean and will return a true or false if item > 2.
var arr4 = mapForEach(arr1,function(item){
return item > 2;
});
console.log(arr4);
//To continue this functional programming I can create another function that will check if item number is < or > some value we will call a limiter. The function parameters will be the limiter, and the item.
var checkPastLimit = function(limiter, item){
return item > limiter;
}
//Now I can use this new function in my "mapForEach" function to provide a limiter before calling the mapForEach function but now all in one line. I can also bind the limit by iusing our .bind function to bind the limiter value to one(1). Again we caonsle.log
var arr5 =mapForEach(arr1,checkPastLimit.bind(this,1));
console.log(arr5);
//Now if we wanted find a way to call our function using only one parameter how would we do it? Lets look at this second method of obtaining the same result as above.
//Here we have a variable equal to a function with one parameter, the limiter, that will return a function with two parameters limiter, and item, and it will check to see if item > limiter and will then bind limiter to "this" on the global execution stack.
//Now we can then define a new variable array and mapForEach using an array and a function as parameters, and the function having only one parameter to denote the value of the limiter(1). We then again console.log the new variable array and get the same boolean values as before.
var checkPastLimitSimplified = function(limiter){
return function(limiter,item){
return item > limiter;
}.bind(this,limiter);
};
var arr6 = mapForEach(arr1,checkPastLimitSimplified(1));
console.log(arr6);
//Underscore.js is another advanced library that you can use to do funtional programming and make things much easier. I have included the underscore.js library in the script at the top. Another library that you can use that came after underscore.js but is considered much faster is lodash.com. You can download the library and then include them in your code. Now lets do the same mapping we performed above using underscorel.js.
var arr7 = _.map(arr1,function(item){return item * 3});
console.log(arr7);
var arr8 = _.filter([2,3,4,5,6,7],function(item){return item %2===0});
console.log(arr8);
</script>
