Why do we always use anonymous functions in javascript?

Question

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?

Answer 1

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.