Friday: Higher Order Functions Copy

Introduction

Function!! yes function, the same concept you learned two weeks ago.

A quick refresher, based on MDN definition A function in JavaScript is similar to a procedure β€”a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.

Also by this point you should know that functions in javascript can be declared :

  • Using function declaration
  • Functions can also be defined as expressions
//function declaration
function greet(){
  console.log("Hello World")
}

// function is declared inside the variable (anonymous function) 

const greet = function(){
   console.log("Hello World")
}
this will lead us to ask this question, if we can declare a function as a variable (using expressions); can we pass this function as a parameter or return it as a value in another function?!

This what you will learn using Higher order function πŸ‘¨πŸ»β€πŸ’»πŸ‘©πŸ»β€πŸ’»

Learning objectives

  • What a first class function is?
  • What a higher order function is?
  • Anonymous function, callback function
  • When to use higher order function , why?
  • Common array methods map, filter and reduce…

Study

  • First class function

Are functions that can be treated like any other variable. For example, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable.

MDN

  • What is a higher order function?

A higher-order function is a function that takes another function as a parameter and/Or returns a function.

Higher-order functions are multilevel functions. It can take another function as an input or return a function as an output. These features are likely to be found in modern code bases, so it’s important to understand them.

So we can say that First-class functions are JavaScript functions that can behave like variables. also they can be passed as parameters to other functions (higher-order functions).

While Higher-order functions are functions that return a function or take in a function as an a parameter.

  • When should I use higher order functions?
  • Higher-order functions are useful when you want to customize the behavior of a function or use that function to do the same thing over and over again.

  • They may sound like complicated jargon, but they are just regular functions that take functions as arguments and return functions as results.

  • JavaScript makes heavy use of higher-order functions. Commonly called callbacks in JavaScript.

Let’s understand this in code.

Let’s break down this example:

  • From the example the maping function is a higher order function.

  • Inputs: This is because it takes a callback function as a parameter and applies that function to every element in the array.

  • So once the function maping is called, it can be made reusable with other functions as arguments (in this example we called it with the function square).

Common array methods concerning a higher-order function map, filter and reduce

Javascript already implements many higher-order functions, so it is very helpful to understand the main functions and how to use them.

Map
  • A Map allows us to pass a function to be applied on each element of the array, so we call it a higher-order function (as in the previous example).

  • It returns a new array made up of the return values from the callback function.

Important !

  • As you can see in the example above, the map function does not modify the original array, but uses the original array to create a new array.
  • This is manipulated by the function passed to the map argument function.
Filter
  • Filter is another high-order function that takes as an argument a function which can filter out some array elements.

  • Functions passed as arguments can return false or true. This determines the items to exclude.

  • Also, filters do not affect the actual array.

    • The returned array is a new array with any elements for which the callback function returns true.

Reduce
  • The reduce function takes two arguments.
    • The first is a function containing two parameters (the accumulator and the current value)
    • and the second is the initial value (if empty, the reduce function takes the first element of the array as the initial value).
  • As the name suggests, the reduce function returns one value and one value only.

Let’s say we want to sum all the elements of an array to get the total value. In normal way you can do something like that.

let numbers  = [1,4,5,6,2,9];
let sum = 0;
for (let val of numbers){
   sum += val;
}
console.log(sum);

With Reduce this can be reduced to:

function sum (acc,val){
  return acc + val;
}

let numbers  = [1,4,5,6,2,9];
let answer = numbers.reduce(sum);
console.log(answer);


See also
Conclusion🚩
  • Learning higher-order functions can help you keep your code short when writing the same code repeatedly. It also improves code readability.πŸ₯·πŸ»
  • This will make the code Declarative rather than Imperative code (check the resources πŸ‘‡πŸ»πŸ‘‡πŸ»)

Leave a Reply