This post originated from an RSS feed registered with Ruby Buzz
by Edward Spencer.
Original Post: 'function' in JavaScript - operator vs statement
Feed Title: Ed's Elite blog
Feed URL: http://feeds2.feedburner.com/EdSpencer
Feed Description: Ruby on Rails development, Git issues and ExtJS/JavaScript
In JavaScript we have at least 4 ways of defining functions:
function myFunction() { alert('hai!'); } var myFunction = function() { alert('hai!'); } var myFunction = function myFunctionName() { alert('hai!'); } var myFunction = new Function("alert('hai!');")
These are not all the same, and the crucial thing here is the word 'function' as used in each case. In the first example we're using the function statement, and in the second and third examples we're using the function operator. We'll come back to the fourth example later.
So what's the difference between the function statement and the function operator? Well first we need to understand a bit about anonymous functions. Most of us are familiar with using anonymous functions as event listeners - something like this:
this.on('render', function() {... do some stuff when 'this' has rendered ...});
In this example we've passed in a function without a name as a listener callback. But what do we mean when we say a function does have a name? Do we mean this:
var myFunction = function() {... do some stuff ...};
No we don't. Assigning a function to a variable does not give it a name. The function assigned to our variable above is still an anonymous function. To give a function a name we need to do something like this:
var myFunction = function myFunctionName() {... do some stuff ...};
Now we have declared a function with the name myFunctionName and assigned it to the variable myFunction. Giving a function a name in this way adds a read-only name property to it:
var myVar = function captainKirk() {... do some stuff ...};
alert(myVar.name); //alerts 'captainKirk'
//we can't update it though myVar.name = 'williamShatner'; alert(myVar.name); //still 'captainKirk'
Coming back to our very first example, we can see that we're using a different form here - the function statement:
function myFunction() { alert('hai!'); }
Under the hood, what this is actually doing is something like this:
myFunction = function myFunction() { alert('hai!'); }
The function statement created a named function and assigns it to a variable of the same name. Note that in this case although the function name and the variable name are the same, they don't have to be:
function myFunction() { alert('hai!'); } alert(myFunction.name); //alerts 'myFunction'
//assigning this function to another variable preserves the function name var myVar = myFunction; alert(myVar.name); //alerts 'myFunction'
Finally, let's take a look at functions defined like this:
var myFunction = new Function("alert('hai!');")
Functions defined this way are always anonymous, and cannot be given a name. In general you shouldn't define functions this way, for several reasons:
The function body has to be parsed by the JS engine every time it is run, compared to just once for a normal function definition. This is slow
Functions defined this way do not inherit the current scope. If you define a function this way the only scope it inherits is the global scope, which means it does not have access to any variables or functions in your current scope chain
Defining functions this way requires the body to be entered as a string, which should sicken you enough not to use it.