JavaScript Program to Pass a Function as Parameter

Before we get into the details of the code, let's first try to understand why we might need to pass a function as a parameter.

Some of the most important use cases of a passing function as a parameter are situations where we need to create callback functions or some sort of event handlers.

We will briefly understand the concept of callback functions and event handlers in the following sections and then we will get into the details of the code in which we will pass a function as a parameter. We will see examples of both callback functions and event handlers as we move ahead in the tutorial.

Prerequisites

• Basic Understanding of JavaScript
• Callback Functions
• Event Handlers

What is a callback function?

A callback function is a function that is passed as a paramter to another function, which is then invoked inside the outer function to complete some kind of routine or action.

Steps to create a callback function

1. Create a function
2. Pass the function as a parameter to another function
3. Invoke the callback function inside the outer function

Learn more about callback functions...

In the following code snippet, we have created a function to add two values a and b, and an operate function that takes the values of a and b and a callback function as parameters.

As you can see, we have passed the values of a and b, and add function as parameters to the operate function and invoked the callback function inside the operate function. So, whenever we invoke the operate function, the callback function is invoked returning the sum of a and b.

function add(a, b) {
  return a + b;
}

function operate(a, b, callback) {
  return callback(a, b);
}

console.log(operate(2, 3, add)); // prints 5 to the console

Now that we understand the concept of callback functions, let's get into the details of an event handler.

What is an event handler?

An event handler is a function that is called when an event occurs. For example, when a user clicks on a button, the button triggers an event. The event handler is then called to handle that event.

Steps to create an event handler

1. Create a function
2. Add the function as an event handler to an element
3. Invoke the function when the event occurs

Learn more about event handlers...

In the following example, we have first created a function myFunction() that pops up an alert box with a message Hello World!.

function myFunction() {
  alert('Hello World!');
}

We then attach that function to the button element for the click event. A click event is an event that occurs when a user clicks on an element. Learn more about the click event...

In this case, whenever a user clicks on the button, the function myFunction() is invoked and hence the alert box pops up on the screen with the message Hello World!.

<button onclick="myFunction()">Click me!</button>

Summary

In this tutorial, we have learnt the basics of callback functions and event handlers. Then we looked into the examples where we created a callback function and passed it as a parameter to another function so that it can be invoked when the outer/parent function is invoked. After that, we also learnt to create event handlers by attaching a function to a button's click event.

Please checkout our related content section below for more tutorials on similar topics.

We hope that you have learnt something from our tutorials. Please feel free to share this content with your friends.

If you have any questions or want some other content to be added to our website so that it can help you learn and grow further, please do not hesitate to contact us at info@createmysite.org. We would love to hear from you.

We are hiring!! If you are tech blogger who loves writing content on modern technologies, we would love to get in touch with you. Just drop us a mail at the email address mentioned above and we will reach out to you as soon as possible.

If you are interested in learning more about our website, please visit our about page.