Joseph  Norton

Joseph Norton

1564457967

What are Higher-Order Functions in JavaScript?

Have you heard your peers talk about Higher-Order functions in JavaScript? Don’t worry if you are lost in the conversation and are unsure about what it is. In this post, we will learn about Higher-Order functions, and why they are useful.

Let’s get the definition out of the way:

A function that accepts and/or returns another function is called a higher-order function.
It’s higher-order because instead of strings, numbers, or booleans, it goes higher to operate on functions.

A Higher-Order function is a function that receives a function as an input argument or returns a function as output. This is a concept that was born out of functional programming. This maybe an alien concepts for those who are more used to the Object Oriented Programming world. JavaScript, is a language that has started to use a lot of the functional programming concepts lately. Higher-Order functions is one of them.

Why Higher Order Functions?

Before we get started to learn something, we need to understand why that is important. You maybe curious, what purpose do higher-order functions serve?

Simple and Elegant Code

Higher-Order functions allow you to write simple and clean code. It allows you to write smaller functions, that do only on thing. This kind of composition results in simple, readable code.

Fewer Bugs

With simple and elegant code you end up with fewer bugs. Trust me on this one.

Easy to Test and Debug

With functions that do only one thing, you end up with code that is easy to test. Testable code, results in fewer bugs. Therefore debugging these simple functional units is also easy.

Built-in Higher Order Functions in JavaScript

JavaScript comes with some built-in higher-order functions. You may already be using them, without realising that they are higher-order functions. Let’s take a look at some of them, to understand how they work.

Array.prototype.map

The map*() *method creates a new array with the results of calling a provided function on every element in the calling array. What this means is map() calls a provided callback function once for each element in an array, in order, and constructs a new array from the results.

The callback accepts three arguments:

  • value of the element
  • index of the element
  • array object

You may have used the *map() *function before. It qualifies as a higher-order function, because it takes in a *callback *function as an input argument.

var numbers = [1, 4, 9];

var doubles = numbers.map(function(num) {

  return num * 2;

});

 

// doubles is now [2, 8, 18]

// numbers is still [1, 4, 9]

In the example above, we have an array of numbers and creating a new array using the *map(). *The *map() *takes a function as an argument. The argument num within the function will automatically be assigned from each element of the array as map() loops through the original array.

Array.prototype.filter

The *filter() *method is another example of an in-built higher-order function. It creates a new array with all the elements that pass the test provided by a callback function. It also takes in a function as an argument, hence making it a higher-order function. The callback function passed to the *filter() *method accepts three arguments:

  • value of the element
  • index of the element
  • array object

Array elements which do not pass the callback test are simply skipped, and are not included in the new array.

Let’s take a look at an example that shows filter() in action.

function isAboveMyRange(value) {
  return value >= 25;
}
var filtered = [12, 5, 8, 130, 44].filter(isAboveMyRange);
// filtered is [130, 44]

The example is used to find values greater than 25 and filter the array. The values that don’t pass this test, will not be a part of the filtered array. The* filter()* function takes the isAboveMyRange function as an input parameter.

Array.prototype.reduce

Another built-in higher-order function in JavaScript is the reduce() method. It executes the callback function on each member of the calling array, and results in a single output value. The *reduce() *method takes in two input parameters:

  • The reducer *callback *function (making this method a higher-order function)
  • Optional initial value
arr.reduce(callback[, initialValue])

The reducer function (callback) accepts four parameters:

  • accumulator
  • currentValue
  • currentIndex
  • sourceArray

If an *initialValue *is provided, then the accumulator will be equal to the *initialValue, *and the currentValue will be equal to the first element in the array. Suppose no initialValue is provided, then the accumulator will be equal to the first element in the array and the *currentValue *will be equal to the second element in the array. Let’s try to understand this better with a simple example.

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// sum is 6

In this example, we have passed an initialValue of zero, this is assigned to the *accumulator *in the beginning. Every time the reduce() function is called on each value in the array, the accumulator keeps the result of previous operation returned from the function, and the currentValue is set to the current value of the array. In the end the result is stored in the sum variable.

You can write your own higher-order functions

We saw some examples of in-built higher-order functions that come with JavaScript. But that’s not all. You can always create your own higher-order functions based on your needs.

Conclusion

In this article, we learned what higher-order functions are and we also learned some in-built higher-order functions in JavaScript. You may have already been writing higher-order functions or using them, without realising their significance.

Higher-order functions are just like regular functions, but they can accept a function as an argument and/or return a function as an output.

#javascript #web-development

What is GEEK

Buddha Community

What are Higher-Order Functions in JavaScript?

Higher-Order Functions Beginners Should Be Familiar With.

Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them.

There are a lot more higher order functions than what will be covered in this article, but these are good ones to get you up and running as a beginner. These standard array methods are forEach() , filter() , map() and sort() .

  1. **forEach( ): **This is used when you want to operate on or interact with any element inside of an array. Basically works like the_ for loop._

N.B- I’d be using examples to illustrate each method so you can get a clearer picture, and also just printing to the console to keep the examples as simple and basic as possible.

Example: Lets say in an array of a group or friends, and we want to loop through that array and print to the console each element of that array.

Using a for loop ;

const friends = ['Toyin', 'Olumide', 'Fola', 'Tola'];

for ( let i=0; i < friends.length ; i++) {
  cosole.log (friends[i])
};

The action same as above can be achieved using theforEach() method as seen below;

const friends =  ['Toyin', 'Olumide', 'Fola', 'Tola'];

friends.forEach(function(name) {
  console.log(name)
};

What the forEach() method simply does is to take in a function as an argument and loop through each item in the array without using iteration[i].

This is really awesome when the ES6 arrow functions are used, our code is reduced to a single line that is clean and maintainable. As seen below:

const friends =  ['Toyin', 'Olumide', 'Fola', 'Tola'];

friends.forEach(name => console.log (name));

2. **_filter( ) : _**Just like the name implies, it is used to filter out elements of an array that do not meet the conditions set in the callback function passed as an argument. The callback function passed to the filter() method accepts 3 parameters: elementindex, and array , but most times only the element parameter is used.

**Example : **In an array showing a group of friends and their ages, lets say we want to print to the console the friends that can drink assuming the age limit for drinking is 18. Using a for loop without high order functions;

const friends = [
  {name : 'Toyin', age: 24},
  {name : 'Olumide', age: 14},
  {name : 'Fola', age: 12},
  {name : 'David', age: 42}
];
for ( let i=0 ; i<friends.length ; i++) {
   if (friends[i].age > 18) {
    console.log(`${friends[i].name} can drink`);
 }
};

Now using the filter() method :

const friends = [
  {name : 'Toyin', age: 24},
  {name : 'Olumide', age: 14},
  {name : 'Fola', age: 12},
  {name : 'David', age: 42}
];
friends.filter (function (friend) {
  if (friend.age > 18){
   return true;
 } 
});

#functional-programming #beginners-guide #javascript #higher-order-function #es5-vs-es6 #function

Tia  Gottlieb

Tia Gottlieb

1595831640

Functional Programming: Higher Order Functions

A Better Take on JavaScript’s Higher Order Functions.

Image for post

Functional Programming is awesome! It makes programming fun.

Learning to program “functionally” is going to make you a fantastic programmer and you will feel secure with the quality of your work.

Image for post

You will be able to write your programs with fewer bugs and in less time because you will be able to re-use your code.

Within this paradigm, we will focus on one of the most important concepts in functional programming, and that is Higher-Order Functions.


So let’s get started!

In JavaScript, and in many functional programming languages, functions are values.

Let’s take a simple function for example:

function double(x) {
  return x * 2
}

What is super cool about JavaScript is that we can take this function and make it into an anonymous function to pass it around and re-use it by declaring a variable.

let double = function(x) {
    return x * 2
 }

let pancake = double 
pancake(40) // 80

We declared a variable _double _and assigned it to the anonymous function. Then we declared another variable, pancake, and assign it to the same function. Just like strings and numbers, functions too can be assigned to variables.

So, in functional programming, functions are values and they can be assigned to variables and they can also be passed into other functions.

Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions. — see Eloquent JavaScript

In other words, as pertaining to our example, higher-order functions can be understood as functions being passed into other functions to do awesome things!!!

Sure, that makes sense, right? But what are these good for?

Composition.

The fact that we can take one function and put it into another function allows us to compose a lot of small functions into bigger functions.

Let’s look at how to use one of these higher-order functions. Probably the most basic and useful function is

Filter( )

Image for post

Image for post

Filter() is a function on the array that accepts another function as its argument, which it will use to return a new filtered version of the array.

Let’s make a fun array of something.

const pets = [

  { name: 'Flip flop', species: 'rabbit' },
  { name: 'Dino', species: 'dog' },
  { name: 'Ralph', species: 'fish' },
  { name: 'Chuchi', species: 'cat' },
  { name: 'Ari', species: 'dog' },
  { name: 'Spock', species: 'dog' },
  { name: 'ying yang', species: 'cat' },
]

What we want to do here is to just “filter” out all the dogs.

Our output must include Dino, Ari, and Spock. 😆

Question: How would I do this with a normal loop?

#higher-order-function #javascript #security #programming #code-review #function

Vincent Lab

Vincent Lab

1605017502

The Difference Between Regular Functions and Arrow Functions in JavaScript

Other then the syntactical differences. The main difference is the way the this keyword behaves? In an arrow function, the this keyword remains the same throughout the life-cycle of the function and is always bound to the value of this in the closest non-arrow parent function. Arrow functions can never be constructor functions so they can never be invoked with the new keyword. And they can never have duplicate named parameters like a regular function not using strict mode.

Here are a few code examples to show you some of the differences
this.name = "Bob";

const person = {
name: “Jon”,

<span style="color: #008000">// Regular function</span>
func1: <span style="color: #0000ff">function</span> () {
    console.log(<span style="color: #0000ff">this</span>);
},

<span style="color: #008000">// Arrow function</span>
func2: () =&gt; {
    console.log(<span style="color: #0000ff">this</span>);
}

}

person.func1(); // Call the Regular function
// Output: {name:“Jon”, func1:[Function: func1], func2:[Function: func2]}

person.func2(); // Call the Arrow function
// Output: {name:“Bob”}

The new keyword with an arrow function
const person = (name) => console.log("Your name is " + name);
const bob = new person("Bob");
// Uncaught TypeError: person is not a constructor

If you want to see a visual presentation on the differences, then you can see the video below:

#arrow functions #javascript #regular functions #arrow functions vs normal functions #difference between functions and arrow functions

Willie  Beier

Willie Beier

1595648580

Higher Order Functions in JavaScript

Functional programming is a paradigm that results in cleaner and more concise code, that is easier to maintain, and reduces hard to find bugs. A central concept in functional programming is higher order functions. In JavaScript there a multiple of built in higher order functions.

According to Wikipedia a higher order function does one of the following:

  • takes one or more functions as arguments (i.e. procedural parameters),
  • returns a function as its result.

Filter

Lets get to it. In enterprise grade software, we sometimes want to filter on cute dogs.

const dogs = [

  { name: 'Cocker spaniel', cute: true },
  { name: 'Chihuahua', cute: false },
  { name: 'Malteser', cute: true },
  { name: 'Tax', cute: false }, 
]

We could use a for-loop for this. Where we would iterate over each dog and filter based on the cute boolean.

const cuteDogs = [];
for (let i = 0; i < dogs.length; i++) {
  if (dogs[i].cute)
    cuteDogs.push(dogs[i]);
}

However there is a much simpler solution, that is more elegant, that is using the filter function.

const cuteDogs = dogs.filter(dog => dog.cute);

#javascript #functional-programming #higher-order-function

JavaScript Higher-order Functions - 19

A function expression is another way of creating a function. It makes your code maintainable because each function has its task and it avoids scope pollution - a term used when variables a cluttered within the namespace, thereby making your program more prone to error.

In this tutorial we will learn the function expressions in the following sections:

  1. Basic syntaxes of the function expression
  2. Ways of creating a function pollution
    • Anonymous function
      • Function without function name
      • Self-invoked function
    • Arrow function
  3. Limitations of arrow functions
    • Keywords like this, super, arguments, new.target, and yield can’t be used.
    • Can’t be used as a constructor.
    • Can’t use the syntax of call, apply, and bind methods on arrow functions.

Official website: https://techstackmedia.com

Watch the entire JavaScript Series, including upcoming JavaScipt videos on YouTube: https://www.youtube.com/playlist?list=PLJGKeg3N9Z_Rgxf1Und7Q0u0cSre6kjif

Check out the article: https://techstack.hashnode.dev/javascript-function-expressions.
Next article: https://techstack.hashnode.dev/javascript-higher-order-functions

Become a patron to learn more: https://www.patreon.com/techstackmedia

Techstack Media is in partnership with Skillshare: http://bit.ly/tsm-skillshare.
Learn anything and get the required skill you need to kickstart a long-lasting career.

Website Request: bello@techstackmedia.com

Social Media:
✅ Facebook: https://facebook.com/techstackmedia
✅ Twitter: https://twitter.com/techstackmedia
✅ Instagram: https://instagram.com/techstackmedia
✅ LinkedIn: https://linkedin.com/in/techstackmedia

#javascriptfunctions #functionexpressions #returnstatements #defaultparameters #functionbody #functionscope #javascriptfunction #arrowfunction #functiondeclaration #functionexpression #anonymousfunction #javascript #techstackmedia #codenewbies #learntocode #tutorial #webdev #DEVCommunity #DEVCommunityIN #NodeJS #programming #Hashnode #100DaysOfCode #opensource #techstack #media #womenwhocode #dev #blogging #writing #coding #webdevelopment

#javascript #javascriptfunctions #javascript higher-order functions