1

Sorry for the rather beginner question. What's the differences of function usage between 

$(document).keypress(function() {
  //some code
});

and 

var somethingElse = function() {
  //some code
};

I know the latter is to create a function similar to Java's 

public void somethingElse() {
  //some code
}

but I always assume the former as anonymous function that act inside a method. Can someone shed me some light regarding this? Thanks.

Zerocchi
  • 524
  • 1
  • 5
  • 19
  • JavaScript also has [function statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function) in the format `function somethingElse() { }`, similar to the Java syntax you show. – nnnnnn Mar 09 '15 at 02:42
  • first one is an anonymous function and will be triggered by keypress event only.. second one is referenced to a variable and reusable when needed. – marcieng Mar 09 '15 at 02:44
  • Be cautious of using 'method' to describe Javascript functions. Most functions (all of them, unless they've have `bind` called on them) can serve in different contexts and not just as methods for specific objects or classes of objects. – Scott Sauyet Mar 09 '15 at 02:50
  • possible duplicate of [What is the difference between a function expression vs declaration in Javascript?](http://stackoverflow.com/questions/1013385/what-is-the-difference-between-a-function-expression-vs-declaration-in-javascrip) –  Mar 09 '15 at 03:00

3 Answers3

0

  1. creates an anon function and passes it to the handler

  2. creates an anonymous function and a variable that references it.

  3. creates a named function - that is hoisted

the hoisted function becomes available to you at any line within your function scope, while the non-hoisted function will be undefined until the line where it is declared runs.

there is no difference between #2 and #3 (other than the hoisting) - some people think that the first one creates an object and the 2nd one is some magical thing, or a global function, but nope - they are both function objects within your scope.

mkoryak
  • 54,015
  • 59
  • 193
  • 252
  • 2
    2. creates an anonymous function and a variable that references it. – nnnnnn Mar 09 '15 at 02:43
  • In #2, the funciton is not named. Either of this syntaxes would name the function: `function somethingElse() {/* ... */}` or var somethingElse = function localName() {/* ... */}`. In the latter one, the name is `localName` and is available only _within_ the function. – Scott Sauyet Mar 09 '15 at 02:48
0

The former is a callback, meaning some instructions that will be executed ONLY as soon as the keypress event in your example is triggered. Thus, a function's name is not required.

Function expressions, the latter, is mostly used when adding an object's property acting as a method like: 

var myObject = {};
myObject.sayHello = function() {
  alert("Hello");
}
Mik378
  • 20,929
  • 13
  • 73
  • 163
0

The first one is a jQuery shortcut to create an event listener. It's equivalent to:

document.addEventListener('keypress', function() {
    // some code
});

More info: http://www.w3schools.com/jsref/met_document_addeventlistener.asp

Now, about named or anonymous functions, what's the difference between

var doSomething = function() {
    // some code 
};

and this?

function doSomething() { 
    // some code 
}

There's no difference for the developer. Of course there's a difference on memory, but in javascript developers don't have to take care of it.

Actually for the case of an event handler or other techniques that use callback functions, you can pass an anonymous function or a previously declared one, it's exactly the same:

$(document).keypress(doSomething);

or

$(document).keypress(function() { 
    // some code 
});
David Vartanian
  • 440
  • 4
  • 11