0

I don't understand why do we always use anonymous functions in javascript when we want to execute some code?

I know it might sound like a weird question but I am used to C programming and even PHP is not like that.

like for example:

$( "#target" ).click(function() {
alert( "Handler for .click() called." ); 
});

why can't I just type

$( "#target" ).click(
alert( "Handler for .click() called." ); 
);

What I need to understand is why in javascript you need to pass your lines of code to any function as an anonymous function?

0

I Googled:

The purpose of this code is to provide "modularity", privacy and encapsulation for your code. The implementation of this is a function that is immediately invoked by the calling (jQuery) parenthesis. The purpose of passing jQuery in to the parenthesis is to provide local scoping to the global variable.

In JavaScript, it's important to keep variables locally-scoped to a function because JavaScript does not support block-level scoping like C does, and because globally-scoped JavaScript variables are a nightmare for many reasons.

More generally, the point of using anonymous functions is that they do not require a name, because they are "event handlers" bound to a specific event on a specific object.

In this case, the object is the entire Document Object Model, and the anonymous function executes when the entire DOM has loaded. The anonymous function you're referring to is bound to the jQuery DOM "ready" event.

EDIT:

This article from learn.jquery.com (a trustworthy source!) warns that "Anonymous functions bound everywhere are a pain. They're difficult to debug, maintain, test, or reuse. Instead, use an object literal to organize and name your handlers and callbacks."

So anonymous functions are far from the only way to do it. They are just one way to do it, not even the best way to do it, and maybe even the worst way to do it. (Well, not the worst -- at least they keep your variables encapsulated in local function scope!) The linked article offers a better alternative.

However, it's easy to see why CS50 might use an anonymous function instead: it's right there next to the callback, where you are looking for it. And we are learning quite a lot of stuff all at once, so it's best to keep the code tidy.

If this answer helps you, be sure to let me know by clicking the green check mark. Otherwise, it will become a Zombie Question, forever haunting the forum.

4
  • Thanks Matt, I got your point on anonymous functions that they don't require a name and that this function would execute when the entire DOM has loaded. What I still don't understand is that in javascript my second example would not even work, the code inside $() or $(document).ready() will not work unless it is written inside an anonymous function. I feel like I am missing a big part of javascript way of working or something like that.
    – A.W.A
    Sep 12 '16 at 17:07
  • What I need to understand is why in javascript you need to pass your lines of code to any function as an anonymous function? like for example: $( "#target" ).click(function() { alert( "Handler for .click() called." ); }); why can't I just type $( "#target" ).click( alert( "Handler for .click() called." ); ); ??
    – A.W.A
    Sep 12 '16 at 21:45
  • I'm no JavaScript guru. I know that there are many different ways to use JS (sometimes called "patterns"), but I'm not familiar with all the subtleties and nuances. This site goes into more detail on the difference between Module pattern and jQuery's DOMReady, but both are functions so that may not answer your question. Also, this site warns that anonymous functions can be a pain. Wish I knew more! Sep 12 '16 at 23:43
  • Thank you so much Matt Obert.
    – A.W.A
    Sep 12 '16 at 23:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .