Just starting out with callback functions (using a callback as an argument)(Javascript)

Question

Just starting out with callback functions (using a callback as an argument)(Javascript)

Hello everyone,

I'm a beginner here and I have a question about callback functions. Upon reading about them, I felt like I understood the concept. However, when I attempted to implement one in my code, things didn't go as planned.

    function greeting (name, callback){
      console.log(`Greetings ${name}`);
      callback();
    };

    function timeOfDay (time){
      console.log(`How are you this fine ${time}?`);
    };

    greeting ('Brad', timeOfDay('evening') );

Here's the output:

How are you this evening?
Greetings Brad
Uncaught TypeError: callback is not a function

Could someone please help me understand why the output is in this particular order? What does the error mean, and why does it appear even though the code seems to have finished executing?

Previously, when I tried a simpler callback function with a similar structure, it worked without any issues.

Thank you all for your assistance! - Brad

javascript callback

Answer 1

Answer №1

You were getting close, but when you passed timeOfDay("evening"), it wasn't actually being passed as a callback function. Instead, it was immediately invoked and whatever value it returned (which in this case is nothing) was being passed to the greeting function. Since timeOfDay doesn't return anything, you ended up passing undefined to greeting.

The correct solution is to pass an actual function as the callback to greeting. One way to do this is by wrapping the timeOfDay() function call in an anonymous function like so:

function greeting(name, callback) {
  console.log(`Greetings ${name}`);
  callback();
};

function timeOfDay(time) {
  console.log(`How are you this fine ${time}?`);
};

greeting('Brad', function() { timeOfDay('evening') });

Another approach is to use the Function.bind() method. This method creates a new function with the specified context for execution, which can be very useful but requires understanding of scope and context. You can learn more about this technique in another answer here:

function greeting(name, callback) {
  console.log(`Greetings ${name}`);
  callback();
};

function timeOfDay(time) {
  console.log(`How are you this fine ${time}?`);
};

greeting('Brad', timeOfDay.bind(this, 'evening'));

Answer 2

You were getting close, but when you passed timeOfDay("evening"), it wasn't actually being passed as a callback function. Instead, it was immediately invoked and whatever value it returned (which in this case is nothing) was being passed to the greeting function. Since timeOfDay doesn't return anything, you ended up passing undefined to greeting.

The correct solution is to pass an actual function as the callback to greeting. One way to do this is by wrapping the timeOfDay() function call in an anonymous function like so:

function greeting(name, callback) {
  console.log(`Greetings ${name}`);
  callback();
};

function timeOfDay(time) {
  console.log(`How are you this fine ${time}?`);
};

greeting('Brad', function() { timeOfDay('evening') });

Another approach is to use the Function.bind() method. This method creates a new function with the specified context for execution, which can be very useful but requires understanding of scope and context. You can learn more about this technique in another answer here:

function greeting(name, callback) {
  console.log(`Greetings ${name}`);
  callback();
};

function timeOfDay(time) {
  console.log(`How are you this fine ${time}?`);
};

greeting('Brad', timeOfDay.bind(this, 'evening'));

Answer 3

Answer №2

According to the comments, in a situation like this:

greeting ('Brad', timeOfDay('evening') );

The timeOfDay function will be executed instantly.

To prevent this from happening, there are several options you can consider:

Wrap your function call in an anonymous function, as mentioned in other responses.
You can also remove the parentheses, like so: greeting('Brad', timeOfDay); (this will prevent immediate function execution, but you may lose the parameter "evening" and the error will persist).
You can use .bind() to specify a context for the function. In the example below, I'm binding this as the context for the function to prevent instant execution.

Here is an example:

function greeting (name, callback){
  console.log(`Greetings ${name}`);
  callback();
};

function timeOfDay (time){
  console.log(`How are you this fine ${time}?`);
};

greeting ('Brad', timeOfDay.bind(this, 'evening') );

For more information, you can visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Answer 4

According to the comments, in a situation like this:

greeting ('Brad', timeOfDay('evening') );

The timeOfDay function will be executed instantly.

To prevent this from happening, there are several options you can consider:

Wrap your function call in an anonymous function, as mentioned in other responses.
You can also remove the parentheses, like so: greeting('Brad', timeOfDay); (this will prevent immediate function execution, but you may lose the parameter "evening" and the error will persist).
You can use .bind() to specify a context for the function. In the example below, I'm binding this as the context for the function to prevent instant execution.

Here is an example:

function greeting (name, callback){
  console.log(`Greetings ${name}`);
  callback();
};

function timeOfDay (time){
  console.log(`How are you this fine ${time}?`);
};

greeting ('Brad', timeOfDay.bind(this, 'evening') );

For more information, you can visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Just starting out with callback functions (using a callback as an argument)(Javascript)

Answer №1

Answer №2

Similar questions

Outdated jQuery script no longer functioning (Wordpress)

Exploring the seamless integration of Material UI slider with chart js

Conditional statement that includes Node.js scheduling function

Checking for any lint errors in all JavaScript files within the project package using JSHint

Initializing an Express app with JSON file loading

Need some assistance in finding a way to input multiple values from multiple buttons into a single input field in JavaScript

What are the potential disadvantages of relocating the login logic from the 'signIn()' function in NextAuth.js?

Is it possible that data scraping with puppeteer consistently retrieves information solely from the initial page?

Stylist in Visual Studio Code for React applications

Finding out if an array is empty or not in Reactjs: A Quick Guide

Combining two kebab-case CSS classes within a React component

There seems to be an issue with accessing /puffins/5f298d0ebcbaf254dcf282b3 at

Creating an object efficiently by defining a pattern

What are some methods to secure my API keys within my React application?

Is it possible to capture a submit event from a form within an iframe using jQuery or JavaScript

Guide on utilizing every array value during each iteration of a for loop, ensuring that the same number of values

Pressing the HTML button will reveal the cart details in a fresh display box

React - utilizing dynamic properties using string values

Recharge Backbone prior to a lockdown

Resetting the Angular provider configuration whenever the service is injected into a different location