Passing Functions as Parameters in JavaScript

First Class Functions

In JavaScript, functions are considered "first class" or "higher order" functions. This is basically just a fancy way of saying we can pass functions as parameters to other functions, or even return functions from other functions.

This is actually one of the core concepts of functional programming (or fp if you're pressed for time) and can lead to some pretty powerful features. We'll go through a pretty easy example though so you can build on your understanding of this really nifty feature.

Our Example

For this example we're going to build a contact list. We'll make a Person class. Each person has a name, contact information, and their preferred method of contact. In other words, some people want to be emailed, others want to be called.

To facilitate the creation of these objects, we're going to use the power of passing functions as parameters. First, let's actually write a couple of functions callPerson and emailPerson:

let callPerson = function(phoneNumber) {
  console.log("Dialing " + phoneNumber);
}

let emailPerson = function(emailAddress) {
  console.log("Emailing " + emailAddress);
}

These functions will write to the console that they are calling a phone number or sending an email to a specific address. We're going to use these functions to build our contact list. Let's write the Person class:

class Person {
  constructor(name, contactInfo, preferredContact) {
    this.name = name;
    this.contactInfo = contactInfo;
    this.preferredContact = preferredContact;
  }

  makeContact() {
    this.preferredContact(this.contactInfo);
  }
}

Our person class is constructed by passing the person's name, contact information, and preferred method of contact. The preferred method of contact is actually going to be a function, and you can see in the person class the makeContact function uses the preferred method passed to the constructor to make contact. Let's create a person and see what happens:

let erik = new Person("Erik", "555-444-3030", callPerson);

See I am passing to the constructor the person's name, phone number and the name of the phone call function (ie, without the () at the end). Now, what happens if I try to make contact with this person? Take a look:

> erik.makeContact();
Dialing 555-444-3030

Notice how the person class's makeContact function uses whatever function was passed to its constructor, passing in the name as a parameter. Let's see what happens if we use the emailing function:

let lina = new Person("Lina", "[e-mail]", emailPerson);

And we run the make contact method on the object named lina:

> lina.makeContact()
Emailng [e-mail]

Again, do you see how the different functions we are passing to the constructor of the Person class are defining how the makeContact method is implemented? Oh by the way, you can also pass anonymous functions:

> let sonya = new Person("Sonya", "Mom", ((x) => console.log("Hi " + x)))
> sonya.makeContact()
Hi Mom

That's crazy huh?

What's the use?

This goes beyond mere parlor tricks, this feature has some real uses. Let's say I have an array of all the contacts:

let people = [erik, lina, sonya]

and we need to contact them all at once. We don't have time to figure out what their preferred method of contact is, we just need to tell our program to contact them now. Well, because we created our class to take in a function as the preferred method of contact, we can do this quite simply:

> people.forEach(person => person.makeContact())
Dialing 555-444-3030
Emailng [e-mail]
Hi Mom

Since we defined makeContact for the person class to be a method supplied to the constructor, we can simply iterate through this array of Person objects and tell the loop to run the makeContact method. We already supplied the preferred method of contact, so we don't need to bother with something like:

// This is an example of what we're trying to avoid

if (Person.preferred contact === "email") {

  console.log("Emailing " person.emailAddress);

else if (Person.preferred contact === "phone call" {

// and so on and so on

Conclusion

This was a pretty quick article for such a super awesome concept. I strongly encourage you to play around with this feature of JavaScript to see what it can do for you.