Research HOF - mikehov/Dating-app GitHub Wiki

Higher Order Functions Research

Mike Hovenier | Tech-4

Higher Order Functions

Higher order functions are functions that operate on other functions by either taking them as arguments or returning them. The fact that JavaScript supports first-class functions makes it possible to create higher order functions. Function can be assigned to variables or pass into other function, higher order functions. Functions are values. Higher order functions are good for multiple reasons. Composition for example by taking one function and put it in another function. So you can make one big function if you want to.

Simple function:

function triple(x) {
  return x * 3
}

or

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

This almost the same except the first one is an named function and the other one an unnamed function.

Let's say you want a filter and filter out all the dogs, you can do that by typing something like this: Filter example:

const animals = [
  {
    name: 'Hansie',
    species: 'dog',
    cost: 45
  },
  {
    name: 'Joopie',
    species: 'dog',
    cost: 22
  },
  {
    name: 'Beppy',
    species: 'fish',
    cost: 10
  },
  {
    name: 'Sem',
    species: 'fish',
    cost: 10
  },
  {
    name: 'Lolita',
    species: 'dog',
    cost: 60
  }, 
  {
    name: 'Fluffybeans',
    species: 'pig',
    cost: 20
  },
  {
    name: 'BearFluf',
    species: 'pig',
    cost: 15
  },
  {
    name: 'Manke Neel',
    species: 'dog',
    cost: 1
  }
];

const dogsOnly = animals.filter(function (animal) {
    return animal.species === 'dog';
});

console.log(dogsOnly);

What filter will do is taking all the unwanted information out, just like an filter if you are online shopping and you only want to find t-shirts but not jeans or shoes. The console will print all the objects that contains dog in there species. By using the filter function you are writing less code by things allready exist. Cause what you also can do is write a for loop that does the same but it has more code. Higher order function will help you writing less code.

Besides Filter you also have things like map or reduce. Mapping is taking a part of the array and making it in to a new array. So for examples you want all the species of the animals you have. So you can return those.

Mapping example:

const animals = [
  ..all the objects..
]

const speciesAnimals = animals.map(function (animal) {
    return animal.species;
});
console.log(speciesAnimals);

So what mapping does its looking in to the array with the objects and returns back all the species it has of the object. You can of course to the same for the name or cost if you want to.

Like mentioned earlier, you also have reduce. Map creates a new array by transforming every element in an array, individually. Filter creates a new array by removing elements that don't belong. Reduce on the other hand, takes all of the elements in an array, and reduces them into a single value. So for example, something like this:

const animals = [
  ..all the objects..
]

function mapSpecies(input) {
  let species = [];
  input.map((i) => species.push(i.species));
  return species;
}

const reduceAnimals = mapSpecies(animals).reduce(function(allNames, name) {
  if (name in allNames) {
    allNames[name]++;
  } else {
    allNames[name] = 1;
  }
  return allNames;
}, {});

console.log(reduceAnimals);

So now reduceAnimals is one value. The console.log will show:

Object {
  dog: 4,
  fish: 2,
  pig: 2
}

How can I use Higher or Function in my project?

Higher order Functions are good to structure your code, so I can make something just one function with an few other functions in them. So for example the dislike and like functions and inside that dislike and like function I have them all separately. So I can adjust only the dislike function for example.

Sources

A Guide To The Reduce Method In Javascript​. (2019, October 3). Retrieved May 26, 2020, from https://www.freecodecamp.org/news/reduce-f47a7da511a9/

All Things JavaScript, LLC. (n.d.). Higher Order Functions: A JavaScript Strong Point. Retrieved May 25, 2020, from https://www.youtube.com/watch?v=O9lMynNdka4&t=337s

Array.prototype.reduce(). (2020, May 20). Retrieved May 27, 2020, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Fun Fun Function. (n.d.). Higher-order functions - Part 1 of Functional Programming in JavaScript. Retrieved May 25, 2020, from https://www.youtube.com/watch?v=BMUiFMZr7vk

Ruizendaal, R. D. (2020, May 18). RowinRuizendaal/project-tech. Retrieved May 29, 2020, from https://github.com/RowinRuizendaal/project-tech/wiki/looping-hof

Sengstacke, P. (2016, August 9). How to Use Map, Filter, & Reduce in JavaScript. Retrieved May 26, 2020, from https://code.tutsplus.com/tutorials/how-to-use-map-filter-reduce-in-javascript--cms-26209