JavaScript Pass Function As Parameter

This tutorial covers:

1. Can we pass a function as a parameter in JavaScript?
2. How do you pass a function as a Parameter?

Let's get started →

Can we pass a function as a parameter in JavaScript?

A function in JavaScript can be passed into another function as a parameter.

JavaScript has "first-class functions" which mean that functions are treated as any other variable.

Since we can pass any variable we want into a JavaScript function as a parameter, it means we can use JavaScript to pass in a function as a parameter.

So we can start with a Named JavaScript Function we make up named sayHello.

function sayHello() { return "hello"; }

This function doesn't take in any parameters and when evaluated returns the string "hello".

JavaScript named function that returns the string hello

Let's test it out by evaluating the function:

sayHello();

We see that we get a result of the string "hello":

JavaScript Named Function evaluated to return string hello

Now that we have a function that does something, let's define a second Named JavaScript Function that we are going to pass this first function, sayHello, into it as a parameter.

function saySomething(wordFunction) { return wordFunction(); }

This function, saySomething, evaluates whatever the parameter is passed into it.

JavaScript function that takes in a function as a parameter and evaluates it

You can see that the named function is defined as taking in a parameter named wordFunction.

Then it is evaluating it in the return statement.

The function adds and open and close parenthesis to the wordFunction parameter we passed in.

Now that we've done that, let's pass in our first function, sayHello, into the second function, saySomething, as a parameter.

saySomething(sayHello);

Passing a function as a parameter into another javascript function

So you can see that we're going to use JavaScript to pass in a function as a parameter.


When we evaluate it, we can see that it results in a string "hello":

JavaScript function passed in as a parameter is evaluated inside of another JavaScript function

Great - we were able to pass a function into another function as a parameter and have the second function evaluate the first function inside of it.

How do you pass a function as a Parameter?

There are four main ways to use JavaScript to pass in a function as a parameter.

Since we've already looked at a Named Function function example above, we'll look at the other three ways:

  • Anonymous Function
  • Function assigned to a variable
  • Function passed in as part of a JavaScript data structure

Let's look at an examples of each kind:

Anonymous Function:

function saySomething (wordFunction) {
    return wordFunction();
}

saySomething(function () { return "bye" });


Function assigned to a variable:

function saySomething (wordFunction) {
    return wordFunction();
}

var byFunc = function () { return "bye" };

saySomething(byFunc);


Function passed in as part of a JavaScript data structure:

function saySomething (wordFunction) {
    return wordFunction.func();
}

var functionDataStructure = {
	name: "sayByeFunction",
	func: function () { return "bye" }
}

functionDataStructure.name;

functionDataStructure.func;

saySomething(functionDataStructure);

Copyright © 2021 JavaScriptFunction.com - All rights reserved.