Higher Order Functions -or- Callback Functions

Higher Order Functions -or- Callback Functions

  • Functions that ACCEPT other functions as “Parameter ===  Call-Back-Function”.
  • Enhance the behavior of other functions.

Higher Order Functions Accept Call-Back-Function as parameter.

First let me start with a example of a call back, that shows why this was used for the connection to the API.

In JavaScript Function are: “Firs Class Objects” and you can pass: “Functions” into “Functions” as arguments.

Simple Example:

Simple Example to choose add or Multiply:

Before we dig into the Built-In Functions, lest study the Fat Arrow Function:

 

Specifying parameters:

Specifying a body:

Example of both:

 

for more information read the full article: LINK   –    LINK2

Wes Bos Explanation: LINK

Example using Traditional syntax and Arrow syntax:

Traditional Syntax:

Arrow Syntax:

 

Built-In Functions:

You can create your own functions, but there are few that some one already create for us, they are very useful and here is a list of those with examples, for a complete list see: LINK

01- arr.forEach();

Exactly like a For, but you no need to take the counter to access each element in the array

The callback receives three arguments:

  1. The current element value
  2. The current element index
  3. The array being traversed

02 – arr.filter();

this higher-order function returns a new subarray with every element from the original array that passes on the test provided by callback, i.e., if callback returns true for a particular element, then this element gets included in the subarray to be returned.

The callback receives three arguments:

  • The current element value
  • The current element index
  • The array being traversed

This is how it works:

1 – callback is applied to the 1st element of the original array, and if the result is true, then this element gets included in the new array to be returned.
2 – callback is applied to the 2nd element of the original array, and if the result is true, then this element gets included in the new array to be returned.
3 – And so on… until the last element of the array is processed, then the new array is returned as the result of fi

03- arr.map();

this returns a new array with the results of callback applied to every element from the original array, in the same order.

  • The callback receives three arguments:
  • The current element value
  • The current element index

The array being traversedThis is how it works:

1- callback is applied to the 1st element of the original array, and the result is stored as the 1st element of the new array to be returned.
2- callback is now applied to the 2nd element of the original array, and the result is stored as the 2nd element of the new array to be returned.
3- And so on… until the last element of the array is processed, then the new array is returned as the result of map.

Next we will modify again the program by mapping the calculation of civilians in a separated step, right after filter. This way, map will result in a new array containing the number of civilians, in the same order of the starships elements right after filter. Now, forEach can be called over the civilian numbers, simply to sum up the civilians total.

04- arr.reduce();

this higher-order function reduces an array into a single value, as explained in Understand Javascript Array Reduce in 1 Minute[7]. It first applies callback against initialValue and then consecutively on each value of the array, from left to right.

The callback receives four arguments:

  • The previous value
  • The current value
  • The current index
  • The array being traversed

This is how it works:

1- callback is applied to initialValue, which comes as the 2nd argument (the current value).
2- callback is now applied to the 1st element of the array (which comes as the 2nd argument, the current value), and the result of the previous step comes as the 1st argument, the previous value).
3- callback is now applied to the 2st element of the array (which comes as the 2nd argument, the current value), and the result of the previous step comes as the 1st argument, the previous value).
4- And so on… until the last element of the array is processed, and this final result is then returned as the result of reduce.

05- arr.some();

this higher-order function returns true if there is any element in the array that passes on the test provided by callback, and false otherwise.

The callback receives three arguments:

  • The current element value
  • The current element index
  • The array being traversed

This is how it works:

1- callback is applied to the 1st element of the array, and if the result is true, then somereturns true.
2- Otherwise, callback is applied to the 2nd element of the array, and again if the result is true, then some returns true.
3- And so on… until the last element of the array is processed, if true was never returned then some returns false.

06- arr.every();

This higher-order function returns true if every element in the array passes on the test provided by callback, and false otherwise.

The callback receives three arguments:

  • The current element value
  • The current element index
  • The array being traversed

This is how it works:

1- callback is applied to the 1st element of the array, and if the result is false, then every returns false.
2- Otherwise, callback is applied to the 2nd element of the array, and again if the result is false, then every returns false.
3- And so on… until the last element of the every is processed, if false was never returned then every returns true.

07- arr.finIndex();

this will provide the index of the first element in which the test is “True”, and ignore all the rest, but if none is true it will return ” -1 “:

The callback receives three arguments:

  • The current element value
  • The current element index
  • The array being traversed

This is how it works:

1- callback is applied to the 1st element of the original array, and if the result is true, then this element is returned as the result of find/findIndex.
2- Otherwise, callback is applied to the 2nd element of the original array, and again if the result is true, then this element is returned as the result of find/findIndex.
3- And so on… until the last element of the array is processed, if true was never returned then find returns undefined / findIndex returns -1.

07- arr.YOUR-OWN();

Here is where you can create your own function to fit your specific and unique needs.

x



Copyright 2017. All rights reserved.

Posted February 16, 2017 by Edmundo in category "JS