!DOC Type html>
<html>
<head>
<title> Functional Programming and using underscore.js</title>
<body>
<script src = "https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script>
//Take this script and copy and paste into your text editor/compliler or browser console to see how functional programming works. And how you can use the underscore.js library to perfrom functional programming.
//We will look at Functional Programming and why uit makes Java Script such a powerful language.
//Lets 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 will simply multiply each item in the original array by a factor 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 it will return a true or false if the 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 consle.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. You can download or use the link to the library to include them in your code. Now lets do the same mapping we performed above using underscore.js.
var arr7 = _.map(arr1,function(item){return item * 3});
console.log(arr7);
// Or to filter out an array you can use the underscore.js filter to say you want to filter out all items that are divisible by 2.
var arr8 = _.filter([2,3,4,5,6,7],function(item){return item %2===0});
console.log(arr8);
//This is functional programming and how to use the underscore.js library to perform these methods.
</script>
</body
</html>
1 Like
Here is my review of the post on Functional Programming. I have gone through this post and have included a little more explanation on each example. I have also perform the functional programming two different ways. One is the method where you define a function when you call the “mapForEach” function and then a second method where you simply call the function that has been defined in the previous line of coding. This consolidates the code so that you can create a new array using one line of code instead of two or three.
<!DOC Type html>
<html>
<head>
<title> Functional Programming</title>
<body>
<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("This is our original array that is the basis for all processes", + " " , 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 fact or 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("Multipling the original array by a factor of two for each item in the array we get: " + " var arr2 = []; for(var i = 0; i < arr1.length; i++ ){arr2.push(arr1[i] * 2);} " ,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 create 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 also 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;
}
console.log("Now we create a mapForEach Function that will perform any operation that we want on our original array by using a function that we create. The parameters of our function will be our original array and the function that performs the operation on the array: " + " function mapForEach (arr, fn){var newArr = []; for(var i =0; i < arr.length; i++){newArr.push(fn(arr[i]))}; return newArr;} ")
// Now lets try this by using our mapForEach function to create 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
//As before we perform a console.log to print our result. And you can see 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("We will now perform the same operation and get the same result using functional programming: " + " var arr3 = mapForEach(arr1, function(item) {return item * 2; " ,arr3);
// Now let do this another way by creating a function that will multiply the item by two(2) and then use that function in the mapForEach function using just one line of code to perform the same operation.
var multiply2 = function(item){
return item*2
}
var arr33 = mapForEach(arr1,multiply2);
console.log("This time we will consolidate our code by creating a function multiply2 that we use in our mapForEach function so that we only need one line of code:" + " var multiply2 = function(item){return item*2} and then we can use this new function in our mapForEach Function using one line of code: " + " var arr33 = mapForEach(arr1, multiply2);" ,arr33);
//Now lets take another example where instead of multiplying our item by two(2) we 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 if item > 2.
var arr4 = mapForEach(arr1,function(item){
return item > 2;
});console.log(“Now lets take another example where instead of multiplying our item by two(2) we 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 if item > 2:” + " var arr4 = mapForEach(arr1,function(item){return item > 2;});" , arr4)
//Now again we can do the same thing and create a new function to be used in the mapForEaach function so that we only need one line to run the MapForEach function.
var isgreater2 = function(item){ return item > 2 } var arr44 = mapForEach(arr1,isgreater2); console.log("Now again we can do the same thing and create a new function to be used in the mapForEaach function that will check it advance if item > 2: " + " var isgreater2 = function(item){return item > 2} So that now we only need one line of code to run the MapForEach function: var arr44 = mapForEach(arr1,isgreater2);" ,arr44);//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. However, since the onrigal MapforEach function only allows for one parameter for the function we will need to bind the limiter parameter to make it constant. That way when we call the function only item is the only parameter of the function.
var arr55 = mapForEach(arr1, function(limiter,item){ return item > limiter }.bind(this,1)) console.log("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. However, since the onrigal MapforEach function only allows for one parameter for the function we will need to bind the limiter parameter to make it constant. That way when we call the function item is the only parameter of the function and the limiter we can bind to a value of one(1): var arr55 = mapForEach(arr1, function(limiter,item){return item > limiter}.bind(this,1))" , arr55);//Again we will now create a function that can be used in the mapForEach function so that we can again use one line to perform the operation.
var checkPastLimit = function(limiter,item){
return item > limiter;}
//Now we 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 using our .bind function to bind the limiter value to one(1). Again we console.log
var arr5 =mapForEach(arr1,checkPastLimit.bind(this,1));
console.log("Again we will now create a function that can be used in the mapForEach function so that we can again use one line of code to perform the operation: var checkPastLimit = function(limiter,item){return item > limiter;}" + " Now we can use this new function in our mapForEach function to provide a limiter before calling the mapForEach function but now all on one line of code. I can also bind the limit by using our .bind function to bind the limiter value to equal one(1): var arr5 =mapForEach (arr1,checkPastLimit.bind(this,1)); " , 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 as one(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(" 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 to be a constant: var checkPastLimitSimplified = function(limiter){return function(limiter,item){return item > limiter;}.bind(this,limiter);}; Now we can then define a new variable array and mapForEach using an array and a function as parameters, and this function will have only one parameter to denote the value of the limiter as one(1): var arr6 = mapForEach(arr1,checkPastLimitSimplified(1)); We then again console.log the new variable array and get the same boolean values as before." , arr6);
</body
1 Like