JavaScript Callback and Higher-Order Functions Practice Questions with Solutions

Introductions

Callbacks and higher-order functions are important concepts in modern JavaScript. They allow you to pass functions as values and create flexible, reusable code. You will see these concepts frequently when working with arrays, timers, events, APIs, and asynchronous JavaScript. In this chapter, you will practice JavaScript Callback and Higher-Order Functions practice questions with solutions with simple examples, starting from the basics.

Question 1: Create a Simple Callback Function

Problem

Create a function greetUser that accepts a name and a callback function. The callback should display a welcome message.

Solution

function greetUser(name, callback) {
    console.log("Hello, " + name);
    callback();
}

function welcome() {
    console.log("Welcome to JavaScript!");
}

greetUser("Rahul", welcome);

Output

Hello, Rahul
Welcome to JavaScript!

Step-by-step Explanation

1. greetUser() accepts two parameters: name and callback.
2. "Rahul" is passed as the first argument.
3. welcome is passed as the second argument.
4. The function first displays the user’s name.
5. callback() executes the function passed to greetUser().
6. Therefore, the welcome() function runs.

A function passed to another function is called a callback function.

Question 2: Pass an Anonymous Function as a Callback

Problem

Create a function that accepts two numbers and a callback. Use an anonymous function as the callback to display the result.

Solution

function calculate(a, b, callback) {
    let result = a + b;

    callback(result);
}

calculate(10, 20, function(result) {
    console.log("Result:", result);
});

Output

Result: 30

Step-by-step Explanation

1. calculate() accepts three parameters.
2. a receives 10.
3. b receives 20.
4. The numbers are added.
5. The result is 30.
6. The anonymous function receives 30.
7. The callback displays the result.

Question 3: Use an Arrow Function as a Callback

Problem

Create a function that accepts a name and a callback. Pass an arrow function as the callback.

Solution

function processUser(name, callback) {
    callback(name);
}

processUser("Aman", (name) => {
    console.log("Hello, " + name);
});

Output

Hello, Aman

Step-by-step Explanation

1. processUser() accepts name and callback.
2. "Aman" is passed as the name.
3. The arrow function is passed as the callback.
4. callback(name) executes the arrow function.
5. The name is received by the arrow function.
6. The greeting is displayed.

Question 4: Create a Higher-Order Function

Problem

Create a function calculate that accepts two numbers and another function. Use the supplied function to perform the calculation.

Solution

function calculate(a, b, operation) {
    return operation(a, b);
}

function add(x, y) {
    return x + y;
}

let result = calculate(10, 20, add);

console.log(result);

Output

30

Step-by-step Explanation

1. calculate() accepts two numbers and a function.
2. add is passed as the third argument.
3. operation now refers to the add function.
4. operation(a, b) calls add(10, 20).
5. The result is 30.
6. calculate() returns that result.

A function that accepts another function as an argument is called a higher-order function.

Question 5: Use a Callback to Multiply Numbers

Problem

Create a function that accepts two numbers and a callback. Use the callback to multiply the numbers.

Solution

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

const multiply = (x, y) => x * y;

let result = calculate(5, 6, multiply);

console.log(result);

Output

30

Step-by-step Explanation

1. calculate() accepts two numbers and a callback.
2. multiply is an arrow function.
3. multiply is passed to calculate().
4. callback(a, b) calls the multiplication function.
5. 5 × 6 equals 30.
6. The result is returned and displayed.

Question 6: Use forEach() with a Callback

Problem

Create an array of student names and use forEach() to display every name.

Solution

let students = ["Rahul", "Priya", "Aman"];

students.forEach(function(student) {
    console.log(student);
});

Output

Rahul
Priya
Aman

Step-by-step Explanation

1. students contains three names.
2. forEach() accepts a function.
3. That function is executed for every array element.
4. The current student is passed to the callback.
5. Each name is displayed.

The function passed to forEach() is a callback function.

Question 7: Use map() with a Callback

Problem

Create an array of numbers and use map() to create a new array containing double each number.

Solution

let numbers = [1, 2, 3, 4];

let doubled = numbers.map(function(number) {
    return number * 2;
});

console.log(doubled);

Output

[2, 4, 6, 8]

Step-by-step Explanation

1. The original array contains four numbers.
2. map() accepts a callback function.
3. The callback runs for every number.
4. Each number is multiplied by 2.
5. map() creates a new array.
6. The original array remains unchanged.
7. The new array contains [2, 4, 6, 8].

Question 8: Use filter() with a Callback

Problem

Create an array of numbers and use filter() to create a new array containing only numbers greater than 10.

Solution

let numbers = [5, 12, 8, 20, 15];

let result = numbers.filter(function(number) {
    return number > 10;
});

console.log(result);

Output

[12, 20, 15]

Step-by-step Explanation

1. filter() receives a callback function.
2. The callback checks each number.
3. If number > 10 is true, that number is included.
4. If it is false, the number is excluded.
5. The numbers greater than 10 are 12, 20, and 15.
6. filter() returns a new array.

Question 9: Create a Function That Returns Another Function

Problem

Create a function called createMultiplier that accepts a number and returns another function. The returned function should multiply another number by the original number.

Solution

function createMultiplier(number) {
    return function(value) {
        return value * number;
    };
}

let double = createMultiplier(2);

console.log(double(5));

Output

10

Step-by-step Explanation

1. createMultiplier() accepts number.
2. 2 is passed to the function.
3. The function returns another function.
4. The returned function remembers the value 2.
5. double(5) passes 5 as value.
6. The calculation becomes 5 × 2.
7. The result is 10.

This is an important example of a function returning another function.

Question 10: Use filter() and map() Together

Problem

Create an array of numbers. First select numbers greater than 10, then create a new array containing their squares.

Solution

let numbers = [5, 12, 8, 20, 15];

let result = numbers
    .filter(number => number > 10)
    .map(number => number * number);

console.log(result);

Output

[144, 400, 225]

Step-by-step Explanation

1. The original array is [5, 12, 8, 20, 15].
2. filter() keeps numbers greater than 10.
3. The filtered result is [12, 20, 15].
4. map() then processes these three numbers.
5. Each number is multiplied by itself.
6. 12 × 12 = 144.
7. 20 × 20 = 400.
8. 15 × 15 = 225.
9. The final result is [144, 400, 225].

This example shows how callback functions can be combined to perform multiple operations.

Key Takeaways

• A callback function is a function passed to another function.
• A callback can be a normal function, anonymous function, or arrow function.
• A higher-order function can accept a function, return a function, or both.
• forEach() uses a callback to process each array element.
• map() uses a callback to create a new transformed array.
• filter() uses a callback to select matching elements.
• Functions can be passed as arguments.
• Functions can also return other functions.
• Callback functions are widely used in modern JavaScript.
• Understanding callbacks makes later topics like asynchronous JavaScript much easier.

FAQs

1. What is a callback function in JavaScript?

A callback function is a function passed as an argument to another function.

function greet(callback) {
    callback();
}

function sayHello() {
    console.log("Hello");
}

greet(sayHello);

Here, sayHello is the callback function.

2. What is a higher-order function?

A higher-order function is a function that accepts another function as an argument, returns a function, or does both.

function calculate(a, b, operation) {
    return operation(a, b);
}

Here, calculate() accepts a function as an argument.

3. Is every callback a higher-order function?

No. The function receiving or returning another function is the higher-order function. The function being passed to it is the callback.

4. Why are callback functions useful?

Callbacks allow you to decide what should happen after or during another operation. They make functions more flexible and reusable.

5. Are arrow functions callbacks?

Yes. Arrow functions can be used as callbacks.

let numbers = [1, 2, 3];

numbers.forEach(number => {
    console.log(number);
});

Here, the arrow function is the callback passed to forEach().

6. Is map() a higher-order function?

Yes. map() accepts a callback function, so it is an example of a higher-order function.

let numbers = [1, 2, 3];

let result = numbers.map(number => number * 2);

7. What is the difference between forEach() and map()?

forEach() is generally used to perform an action for each element, while map() creates and returns a new array based on the callback’s returned values.

numbers.forEach(number => console.log(number));

let doubled = numbers.map(number => number * 2);

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar