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

Maintaining consistent height using JavaScript

The creation of an indexedDB database and the addition of content encountered an error while trying to perform a 'transaction' on the IDBDatabase

Retrieve data from each URL listed in a JSON array using React

What are the benefits of incorporating an external API with Next.js API routes?

Issue with Bootstrap checkbox/switch

Execute command problem

Once the form has been submitted, proceed to open a new page following processing

Using jQuery along with the jQuery Form Plugin to retrieve and parse the plain text responseText from an Ajax

The image is not displaying on the page

The 'otherwise' controller in AngularJS does not execute when the resolution in another controller has not been successful

What is the best way to determine the variable height of a div in Angular 7?

Configuring JSON in PHP and JavaScript

The change event for Bootstrap 4 switches is not functioning as expected

Personalized Jasmine matchers for a Protractor/WebDriverJS component

How to transform multi-dimensional arrays to JSON format using JavaScript (and maybe jQuery)

Concealing UI elements within the primary stack during navigation to a nested stack in React navigation

Having an issue with fastify-multer where request.files is coming back as undefined during testing with Postman

What sets apart the process of installing AngularJS and AngularJS Core using NuGet?

Executing multiple click events using JavaScript

React with Typescript - Type discrepancies found in Third Party Library