Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Passing parameters to callback functions JavaScript
Callback functions in JavaScript can accept parameters just like regular functions. When passing a callback to another function, you can provide parameters that the callback will use when executed.
Basic Callback with Parameters
A callback function receives parameters when it's invoked by the calling function:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Callback Parameters</title>
</head>
<body>
<div id="result"></div>
<button onclick="runExample()">Run Example</button>
<script>
function add2(a) {
return a + 2;
}
function multiply9(callback, num) {
return callback(num) * 9;
}
function runExample() {
const result = multiply9(add2, 8);
document.getElementById('result').innerHTML =
'The number returned = ' + result;
}
</script>
</body>
</html>
The number returned = 90
Multiple Parameters Example
Callbacks can receive multiple parameters from the calling function:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Parameters</title>
</head>
<body>
<div id="output"></div>
<button onclick="demonstrateMultiple()">Show Multiple Parameters</button>
<script>
function calculate(callback, x, y, operation) {
const result = callback(x, y);
return `${x} ${operation} ${y} = ${result}`;
}
function add(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
function demonstrateMultiple() {
const result1 = calculate(add, 5, 3, '+');
const result2 = calculate(multiply, 4, 7, '×');
document.getElementById('output').innerHTML =
result1 + '<br>' + result2;
}
</script>
</body>
</html>
5 + 3 = 8 4 × 7 = 28
Array Processing with Callbacks
Common use case is processing arrays where callbacks receive array elements as parameters:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Callbacks</title>
</head>
<body>
<div id="array-result"></div>
<button onclick="processArray()">Process Array</button>
<script>
function processElements(arr, callback) {
const results = [];
for (let i = 0; i < arr.length; i++) {
results.push(callback(arr[i], i));
}
return results;
}
function doubleWithIndex(value, index) {
return `Index ${index}: ${value} × 2 = ${value * 2}`;
}
function processArray() {
const numbers = [3, 7, 2, 9];
const processed = processElements(numbers, doubleWithIndex);
document.getElementById('array-result').innerHTML =
processed.join('<br>');
}
</script>
</body>
</html>
Index 0: 3 × 2 = 6 Index 1: 7 × 2 = 14 Index 2: 2 × 2 = 4 Index 3: 9 × 2 = 18
Key Points
- Callback functions receive parameters when invoked by the calling function
- The calling function determines what parameters to pass to the callback
- Multiple parameters can be passed to callbacks
- Array methods like
map(),filter(), andforEach()use this pattern extensively
Conclusion
Passing parameters to callback functions enables flexible, reusable code. The calling function controls what data the callback receives, making callbacks powerful for custom processing logic.
Updated on: 2026-03-15T23:18:59+05:30
538 Views
Advertisements