How to Pass a Function as an Argument in JavaScript

JavaScript is a powerful and versatile programming language that enables developers to write flexible and reusable code. In fact, one of its standout features is that functions are first-class citizens, meaning they can be assigned to variables, passed as arguments, and even returned from other functions. That being said, skilled developers often leverage this feature to reduce code complexity, write cleaner and more modular code, and enhance the maintainability and productivity of their applications. Thus, in this blog post, you’ll learn how to pass a function as an argument in JavaScript—taking one more step towards becoming a more proficient and confident developer.

What Does It Mean to Pass a Function as an Argument

I think it would be helpful to use the following analogy to explain this concept:

Imagine you have a button in your house that turns on the lights when pressed. Calling a function is like pressing the button yourself—it triggers an immediate action. On the other hand, handing the button to someone else so they can decide whether or not to press it is like passing a function as an argument (function reference). In this case, you’re not calling the function directly, but giving control to another function to decide when (or if) to execute it.

Here’s a simple code snippet to illustrate this analogy:

pressButton(); // function call
doSomething(pressButton) // function reference: passing it as an argument

As you may have already noticed, adding parentheses to a function calls it immediately. However, when passing a function as an argument, the parentheses are omitted to pass the function reference instead.

How to Pass a Function as an Argument in JavaScript

To pass a function as an argument in JavaScript, you need to omit the parentheses. This tells JavaScript that you’re passing a reference to the function, not calling it. The example below demonstrates how this works.

function greet(name) {
  console.log('Hello, ' + name);
}

function processUserInput(callback) {
  const name = 'Ab';
  callback(name);
}

processUserInput(greet); // output: Hello, Ab

In this example, greet is passed as an argument to processUserInput, which then invokes (calls it back) it using the provided name.

There are several ways to pass a function as an argument in JavaScript—for example, using an anonymous function, an arrow function, or by passing it to a higher-order function.

Let’s explore each of these approaches

1. Using Arrow Functions as Arguments

Arrow functions provide a concise way to pass functions as arguments, reducing code complexity.

processUserInput((name) => console.log('Hi, ' + name)); // output: Hi, Ab

By using an arrow function, the operation is defined inline, making the code more readable and eliminating the need for a separate function definition.

2. Using Anonymous Functions as Arguments

In the same way, we can pass an inline anonymous function as an argument to reduce the amount of code and avoid defining the function separately.

processUserInput(function(name) {
  console.log('Hi, ' + name);
}); // output: Hi, Ab

3. Higher-Order Functions and Function Arguments

A higher-order function in JavaScript takes one or more functions as arguments, or returns a function as a result. In other words, it operates on functions, either by accepting them as inputs or producing them as outputs!

Example 01:

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

function operateOnNumbers(a, b, operation) {
  return operation(a, b);  // operation is a function
}

console.log(operateOnNumbers(3, 4, add));  // Output: 7

In this example, operateOnNumbers is a higher-order function because it takes a function (add) as an argument and calls it inside its body.

Example 02:

function multiplier(factor) {
  return function(x) {
    return x * factor;
  };
}

const double = multiplier(2); // Returns a function that multiplies by 2
console.log(double(5));  // Output: 10

const triple = multiplier(3); // Returns a function that multiplies by 3
console.log(triple(5));  // Output: 15

In this case, multiplier is a higher-order function because it returns another function (which multiplies its argument by a given factor). We can then use the returned function to double, triple, or multiply by any factor we want. So, multiplier can be considered a factory of multiplier functions.

Real-World Use Cases

Passing functions as arguments in JavaScript appears in many real-world use cases. To name just a few, they can be used in:

• Event handling (e.g., addEventListener)
• Array methods (map, filter, forEach)
• Custom utility functions (e.g., runTwice(callback))
• Middleware in web frameworks like Express
• Applying functional programming techniques (e.g., map, custom operations)
• Handling debouncing/throttling of functions
• And many other use cases…

FAQ

Conclusion

The art of passing a function as an argument in JavaScript is an essential skill for anyone aiming to master JavaScript. From handling events to using higher-order functions in various situations, this technique is a powerful tool you can add to your toolkit to enhance the readability and maintainability of your programs.

If you want to learn more about JavaScript, we’ve got your back! You can enroll in our JavaScript free forever course today…

Learn JavaScript from Scratch for FREE

This course will teach you modern core JavaScript from the basic fundamentals to advanced topics. It is intended to make you learn JavaScript from scratch apart from its use for frontend/backend development or whatever. It aims mainly to give you an opportunity to build a solid foundation to become a better JavaScript developer no matter

Read more …

Happy learning 🙂