Article Categories

Selected Reading

How to pass arguments to anonymous functions in JavaScript?

Javascript Web Development Object Oriented Programming

Anonymous functions in JavaScript are functions without a name that can accept parameters just like regular functions. You can pass arguments to them through function calls, event handlers, or higher-order functions.

What are Anonymous Functions?

Anonymous functions are functions declared without a name. They're often assigned to variables or used as callback functions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anonymous Functions</title>
</head>
<body>
    <h3>Anonymous Function Examples</h3>
    <div id="result"></div>
    <button onclick="demonstrateAnonymousFunctions()">Run Examples</button>

    <script>
        function demonstrateAnonymousFunctions() {
            let output = "";
            
            // Method 1: Anonymous function assigned to variable
            let multiply = function(a, b) {
                return a * b;
            };
            output += "multiply(5, 3) = " + multiply(5, 3) + "<br>";
            
            // Method 2: Immediately Invoked Function Expression (IIFE)
            let result = (function(x, y) {
                return x + y;
            })(10, 15);
            output += "IIFE result = " + result + "<br>";
            
            // Method 3: Arrow function
            let divide = (a, b) => a / b;
            output += "divide(20, 4) = " + divide(20, 4) + "<br>";
            
            document.getElementById("result").innerHTML = output;
        }
    </script>
</body>
</html>

Passing Arguments in Event Handlers

You can pass arguments to anonymous functions when used as event handlers:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handler Arguments</title>
</head>
<body>
    <h3>Click buttons to see anonymous functions with arguments</h3>
    <button id="btn1">Calculate Sum</button>
    <button id="btn2">Calculate Product</button>
    <div id="output"></div>

    <script>
        let outputDiv = document.getElementById("output");
        
        // Anonymous function with arguments in event listener
        document.getElementById("btn1").addEventListener("click", function(event) {
            let sum = (function(a, b) {
                return a + b;
            })(25, 17);
            outputDiv.innerHTML = "Sum: 25 + 17 = " + sum;
        });
        
        // Arrow function as event handler
        document.getElementById("btn2").addEventListener("click", (event) => {
            let product = ((x, y) => x * y)(8, 7);
            outputDiv.innerHTML = "Product: 8 × 7 = " + product;
        });
    </script>
</body>
</html>

Using Anonymous Functions with Array Methods

Anonymous functions are commonly used with array methods like map(), filter(), and forEach():

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anonymous Functions with Arrays</title>
</head>
<body>
    <h3>Anonymous Functions with Array Methods</h3>
    <button onclick="processArray()">Process Array</button>
    <div id="arrayResults"></div>

    <script>
        function processArray() {
            let numbers = [1, 2, 3, 4, 5];
            let results = "";
            
            // Using anonymous function with map()
            let doubled = numbers.map(function(num) {
                return num * 2;
            });
            results += "Doubled: " + doubled.join(", ") + "<br>";
            
            // Using arrow function with filter()
            let evens = numbers.filter(num => num % 2 === 0);
            results += "Even numbers: " + evens.join(", ") + "<br>";
            
            // Anonymous function with reduce()
            let sum = numbers.reduce(function(acc, current) {
                return acc + current;
            }, 0);
            results += "Sum: " + sum;
            
            document.getElementById("arrayResults").innerHTML = results;
        }
    </script>
</body>
</html>

Different Ways to Pass Arguments

Method	Syntax	Use Case
Variable Assignment	`let fn = function(a, b) { }`	Reusable functions
IIFE	`(function(a, b) { })(x, y)`	Immediate execution
Arrow Function	`(a, b) => a + b`	Concise syntax
Callback	`array.map(function(item) { })`	Array processing

Conclusion

Anonymous functions in JavaScript can receive arguments just like named functions. They're particularly useful as callbacks, event handlers, and for creating closures. Choose the syntax that best fits your use case and coding style.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next