Higher Order Functions in JS

higher_order_functions.js

// functions are values

// here is a function in its natural habitat:

function triple(x) {
  return x * 3 ;
}

// what this does is create an anonimous function and assign it a value

var triple = function(x) {
  return x * 3 ;
}

// calling it :
var waffle = triple ;

waffle(30); // returns 90

// higher order functions :
// good for composition , can take one and put it into another
// compose many small functions into bigger one

// basic :
// array function filter :

var animals = [
  {name: "Fluffy", species: "rabbit"},
  {name: "Caro", species: "dog"},
  {name: "Dari", species: "dog"},
  {name: "Hank", species: "fish"},
  {name: "David", species: "cat"}
]

// filter out dogs using for loop :

var dogs = [];
for (var i = 0; i < animals.length; i++) {
  if (animals[i].species === 'dog') {
    dogs.push(animals[i]);
  }
}

// rewritten using filter

var dogs = animals.filter(finction(animal){
  return animal.species === 'dog';
});

// this is a callback function - host function calls back to them
// filter loops thru each item in array
// each item is passed to callback function
// callback function returns either true or false
// new, filtered array is returned, voila !

// proof :
var isDog = fucntion(animal) {
  return animal.species === 'dogs';
}

//side note : reject is available in underscore (google it) or similar libraries


//////// MAP ////////

var animals = [
  {name: "Fluffy", species: "rabbit"},
  {name: "Caro", species: "dog"},
  {name: "Dari", species: "dog"},
  {name: "Hank", species: "fish"},
  {name: "David", species: "cat"}
]
//the long way //
var names = []
for (var i = 0; i < animails.length; i++) {
  names.push(animals[i].name)
}

var names = animals.map(function(animal){
  return animal.name;
});

//use map to create completely new objects

var animal_description = animals.map(function(animal){
  return animal.name + 'is a' + animal.species
});

 // rewritten using arrow functions

 var names = animals.map((animal) => animal.name);

 /////////// REDUCE //////////////////////

 var orders = [
   {amount : 250},
   {amount : 400},
   {amount : 100},
   {amount : 325}
 ];

 //// the long way for loop

 var totalAmount = 0 ;
 for (var i = 0; i < orders.length; i++) {
   totalAmount += orders[i].amount;
 }

 // using reduce

 var totalAmount = orders.reduce(function(sum, order){
   return sum + order.amount
 }, 0);

// arrow

var totalAmount = orders.reduce((sum, order) => sum + order.amount, 0);