Does it matter which way named functions are declared?

Question

I see named functions exampled this way:

var clearClick = function() {
    // do something
}

...and then used for binding like so:

$("#clear").bind(click, clearClick);

...or with the "shorthand" methodology thus:

$("#clear").click(clearClick);

But why not use a more "normal" (similar to other programming languages) construct like this:

function clearClick() {
    // do something
}

It works the same, doesn't it? Is there any disadvantage to defining functions in this traditional way? Is the previous way just jQuerians flaunting their newfangledness?

This is JavaScript FYI, jQuery is simply a library built on top of that. Also, here is this exact question: http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname :D — tymeJV, Aug 01 '13 at 20:38
Whoever edited it: "nonymous" means "named", as "anonymous" means "not named" (the "a" portion meaning "without," anonymous means without a name). IOW, they were not typos on my part. — B. Clay Shannon-B. Crow Raven, Aug 01 '13 at 20:40
@Zenith why, [Urban Dictionary](http://www.urbandictionary.com/define.php?term=nonymous) of course! — Evan Davis, Aug 01 '13 at 20:43
The opposite of "anonymous" is "onymous", not "nonymous". And even then, it's not the right word here. — BoltClock, Aug 01 '13 at 20:44
Google the one with 0 vowels. It is mentioned in the 1st page of results ... one time. Not too common. — Lee Meador, Aug 01 '13 at 20:45

score 3 · Accepted Answer · answered Aug 01 '13 at 20:41

3

This works Function expression

var clearClick = function() {
    // do something
}

$("#clear").bind(click, clearClick);

This does not work Function expression. The order matters here.

$("#clear").bind(click, clearClick);

var clearClick = function() {
    // do something
}

But when you declare your function using a function declaration the order does not matter. One more advantage of the below syntax is that the function name appears in debugger.

function clearClick() {
    // do something
}

answered Aug 01 '13 at 20:41

Sushanth --

55,259
9
66
105

some older browsers have bugs related to function declarations. – Brandon Aug 01 '13 at 20:46
1

This doesn't properly explain why. Please see [JavaScript Hoisting](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Scope_Cheatsheet#Hoisting) – Mulan Aug 01 '13 at 20:51

score 1 · Answer 2 · answered Aug 01 '13 at 20:44

1

One reason you might want to do it is how this works:

var clearClick;
$("#clear").click(clearClick);

clearClick = function() {
    // do something
}

... lots of stuff in here ...

clearClick = function() {
    // do something different
}

answered Aug 01 '13 at 20:44

Lee Meador

12,829
2
36
42

That click handler still won't work no matter how many times you change it. – Evan Davis Aug 01 '13 at 20:45
@Mathletics Feel free to suggest changes. Remember its just a scaffolding to highlight the way to define and redefine. – Lee Meador Aug 01 '13 at 20:49

Does it matter which way named functions are declared?

2 Answers2