Enlightenment on Higher-Order Functions (components)

[pankajpatel]

After going through #16; I got into confusion with Higher-Order Functions.

Are Pure Functions and Higher-Order alike? Or they differ?

And Higher-order Components are created by Higher-order functions?

[nelsonic]

@pankajpatel great question! thank you for asking it
(and for learning with us remotely from Germany!) 🌍 ❤️ ✅

Probably the best people to answer this are @rjmk, @FilWisher, @jrans, @andrewMacmurray, @Shouston3, @jsms90, @bradreeder, @SimonLab, @Jwhiles who have more fresh insight into Functional Programming than I do... but I can try and give you a basic answer...

Pure Functions

Are functions that have "no side effects", meaning they don't change anything they aren't supposed to, they just do what they are told; for a given input they always have the same output.

This is "impure" because it "mutates" i.e. changes the counter which is outside of the function and not passed in as an argument:

// this is an "impure" function that "mutates" state
var counter = 0;
function increment () {
  return ++counter;
}
console.log(increment()); // 1
console.log(increment()); // 2
console.log(increment()); // 3

see: https://repl.it/FIot/1

whereas

// this is an "pure" function which "transforms" data that you input as an argument
// and thus given the same input *always* has the same output
var counter = 0;
function increment (my_counter) {
  return my_counter + 1;
}
// because counter is not being "mutated" the output of the pure function is always the same
console.log(increment(counter)); // 1
console.log(increment(counter)); // 1
console.log(increment(counter)); // 1
// you can "feed" the output of one pure function into another to get the same result:
console.log(increment(increment(increment(counter)))); // 3

see: https://repl.it/FIpV

Pure functions doe not mutate a "global" state and predictable and thus easy to test.

Higher Order Functions

Higher order functions are functions that "consume" other functions and "apply" them to other arguments you pass in ... this is useful for "composition", i.e. building a "pipeline" of function calls to compose more sophisticated functionality.
It's easier with an example

// perform an action twice
function twice (func, value) {
  return func(func(value));
}

// func can be any simple (preferably pure) function:
function func (value) {
  return value + 3;
}

console.log(twice(func, 1)); // 7
console.log(twice(func, 7)); // 13

see: https://repl.it/FIps/1
here the func is the "callback" function and twice is the "higher order" function takes what ever function func you give it and returns it once it's "applied" with the other argument in this case an integer value.

Which can be re-written in "ES6" using "arrow functions":

const twice = (func, value) => func(func(value));

const func = value => value + 3;

console.log(twice(func, 1)); // 7
console.log(twice(func, 7)); // 13

I probably haven't explained this very well, maybe one of the others can do a bettererer job. 🤔

Further reading:

• General reading: https://en.wikipedia.org/wiki/Higher-order_function
• Pure functions: https://en.wikipedia.org/wiki/Pure_function
• Higher Order Functions in JavaScript: http://eloquentjavascript.net/05_higher_order.html
• Higher-order functions - Part 1 of Functional Programming in JavaScript: https://youtu.be/BMUiFMZr7vk

React Component Context

React Components follow the same principal they should not "Mutate State" which you store in the Redux Store. The Redux "reducer" should pass in the state and an "action" such that for a given input state and action the output is always the same.
Your basic react components should be "pure" and you should thus expect the same output for any given state and input.
You can then compose these components into more sophisticated components...
see: https://facebook.github.io/react/docs/higher-order-components.html

P.S if you are learning Redux you might want to consider: https://github.com/dwyl/learn-elm/ 😉

[pankajpatel]

nice explanation @nelsonic; this explains many terms.
learning remotely is also fun. hope to meet in near future.