Passing Functions as Parameters in JavaScript
Tags: javascript, functional, tutorial
Published: 2019-08-24 05:36:50

# 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.

![First class](http://www.picslyrics.net/images/458/224861/thumb.jpg?1463657347)

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`:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
let lina = new Person("Lina", "smoochiebear@sweetheart.com", emailPerson);
```
And we run the make contact method on the object named lina:
```
> lina.makeContact()
Emailng smoochiebear@sweetheart.com
```

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:
```javascript
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 smoochiebear@sweetheart.com
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:

```javascript
// 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.