Question

85

Anonymous Callback Function Clarification

rated 0 times [ 92] [ 7] / answers: 1 / hits: 23614 / 9 Years ago, wed, april 29, 2015, 12:00:00

I'm brushing up on callback functions and came across the following passage from http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/#

When we pass a callback function as an argument to another function, we are only passing the function definition. We are not executing the function in the parameter. In other words, we aren’t passing the function with the trailing pair of executing parenthesis () like we do when we are executing a function.

And since the containing function has the callback function in its parameter as a function definition, it can execute the callback anytime.

Can someone explain that? Here are two examples they provided.

//The item is a callback function

$(#btn_1).click(function() {

  alert(Btn 1 Clicked);

});

Here is another example:

var friends = [Mike, Stacy, Andy, Rick];



friends.forEach(function (eachName, index){

console.log(index + 1 + .  + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick

});

Note that the callback function is not executed immediately. It is “called back” (hence the name) at some specified point inside the containing function’s body. So, even though the first jQuery example looked like this:

//The anonymous function is not being executed there in the parameter. 

//The item is a callback function

   $(#btn_1).click(function() {

     alert(Btn 1 Clicked);

   });

the anonymous function will be called later inside the function body. Even without a name, it can still be accessed later via the arguments object by the containing function.

For the first example with jquery, what are they saying exactly. If the #btn_1 element is clicked, will the anonymous function be executed? I am assuming it will be executed if the button is clicked, but the wording from the passage was confusing?

Similarly, for the second example, do they not need to call the function that they passed as an argument bc its anonymous?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

reed

Add To Favorites

Follow

Total Points: 725

Total Questions: 85

Total Answers: 89

Location: Singapore

Member since Sat, Jul 25, 2020

4 Years ago

reed questions

1 npx react-native link command not working in latest version of react native. How can we link custom font family in my project

Tue, Jul 5, 22, 00:00, 2 Years ago

1 Alpine.js: How do I access x-data from a function in an external file?

Fri, Apr 16, 21, 00:00, 3 Years ago

1 I have an error : Cannot find module './utils'

Sun, Aug 16, 20, 00:00, 4 Years ago

1 react drag,drop, and connect arrow(or anything else) with animation between elements

Tue, Jun 16, 20, 00:00, 4 Years ago

1 Lodash.uniqueId always returns 1

Thu, May 23, 19, 00:00, 5 Years ago

View All

answered 9 Years ago ingridcassieb · Accepted Answer

In both examples, you are passing an anonymous function as a parameter.

$(#btn_1).click(function() {

  alert(Btn 1 Clicked);

});

jQuery's click method takes a function as its first parameter. So imagine that click's function definition is this:

function click(fn) {

    // fn will contain a reference to any 

    // function passed as the first parameter to click

    // merely calling fn does nothing, because you are just 'calling' 

    // the reference.

    fn;

    // Since what is inside of fn is a function, you can execute it 

    // with the () syntax

    fn();

}

// Now, you have many ways to pass a function as the first parameter to the function



// 1. As an anonymous function:

click(function() {

    console.log(Hi);

});



// 2. As a named function:

click(function hello() {

    console.log(Hi);

});



// 3. As a reference to a function declaration

function hiThere() {

    console.log(Hi);

}

click(hiThere);



// 4. As a variable that holds an anonymous function inside

var howdy = function () {

    console.log(howdy);

};

click(howdy);

Just imagine that functions are like variables, but they have content inside that can be executed with () at the end.

function hi() {

    console.log('bye');

}



hi; // Calls the reference, but does not execute it. This does nothing.

hi.toString(); // Returns the function as a string

hi(); // Executes the code within the function

Whenever you declare a named function, you can do stuff with it according to its name, like you would do with variables. Of course, unlike variables, they hold executable code inside, and not values.

You can't reference an anonymous function, because it's well... anonymous. UNLESS, you hold it inside of something that has a name, like a var.

var iHoldAFunctionInside = function () {

    console.log('Im not so anonymous now');

};

iHoldAFunctionInside(); // Logs Im not so anonymous now

And that is why you can pass an anonymous function as a parameter to a function, and it can execute it as a callback. Because the parameter now 'holds' the anonymous function inside of it:

function iExecuteYourCallback(callback) {

    // callback contains the anonymous function passed to it

    // Similar to doing:

    // var callback = function () { };

    callback();

}

iExecuteYourCallback(function() {

    console.log('Im a callback function!');

});

Hope this helps clear things a bit.