The Higher Order

#Higher Order Functions #Callbacks

Before diving into Higher Order Functions lets talk about funtions.

We can generalize a function and make it more reusable allowing data to be defined at the moment we run the function.

Instead of writing:

function sayHelloToAlice() {
  return 'Hello Alice!';
}
 
sayHelloToAlice();
// But… what if I want to say hello to Bob?

Create functions that we can make once and play it again and again with diferent values.

Write functions like this:

function sayHello(name) {
  return 'Hello ' + name + '!';
}
 
sayHello('Alice'); // Hello Alice!
sayHello('Bob'); // Hello Bob!
sayHello('Maria'); // Hello Maria!
 
// Same function, different data

But what if we can not only leave data to be defined but also part of the code functionality?

• Higher order functions come to rescue. 🏇🏼

Higher Order Functions

We call Higher order function a function that:

• Takes in a function or passes out a function.
• It is just a term to describe any function that does return or recive a function but there is nothing inherently different from any other function that does not.

How is this posible?

• Functions are just values. That means you can pass them as arguments to other functions, or return them from functions.

What is the main advantage of a Higher order function?

• We may leave some functionality to be defined by the time we run our function.

Imagine we have the function copyArrayAndUppercase.

function copyArrayAndUppercase(array) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(array[i].toUpperCase());
  }
  return output;
}
 
const words = ['hello', 'world'];
copyArrayAndUppercase(words); // ["HELLO", "WORLD"]

We can invoke copyArrayAndUppercase as many times we want with as many different arrays (data) we want BUT:

What if we want to copy an array and transform all words to lowercase? Or copy an array and add an exclamation mark to each word?

• We need to create a different function for each functionality, constantly repeating most of the code.

function copyArrayAndLowercase(array) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(array[i].toLowerCase());
  }
  return output;
}
 
function copyArrayAndAddExclamation(array) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(array[i] + '!');
  }
  return output;
}

• Unless... we leave part of the functionality to be defined in the moment we run the function.

To avoid code repetition we could write a more generic function that follows the Higher order function definition called copyArrayAndTransformEach and accept part of the functionality as a parameter.

When we send a function as a paramater we call it callback. So we could say that we are sending part of the functionality as a callback.

function copyArrayAndTransformEach(array, instruction) {
  const output = [];
  for (let i = 0; i < array.length; i++) {
    output.push(instruction(array[i]));
  }
  return output;
}
 
function toUppercase(text) {
  return text.toUpperCase();
}
 
function toLowercase(text) {
  return text.toLowerCase();
}
 
function addExclamation(text) {
  return text + '!';
}
 
const words = ['hello', 'world'];
 
copyArrayAndTransformEach(words, toUppercase);
copyArrayAndTransformEach(words, toLowercase);
copyArrayAndTransformEach(words, addExclamation);

Let's end this episode with a littel quiz.

Which one is our Higher Order Function? Which one is our Callback?