The Artima Developer Community
Sponsored Link

Ruby Buzz Forum
'function' in JavaScript - operator vs statement

0 replies on 1 page.

Welcome Guest
  Sign In

Go back to the topic listing  Back to Topic List Click to reply to this topic  Reply to this Topic Click to search messages in this forum  Search Forum Click for a threaded view of the topic  Threaded View   
Previous Topic   Next Topic
Flat View: This topic has 0 replies on 1 page
Edward Spencer

Posts: 148
Nickname: edspencer
Registered: Aug, 2008

Edward Spencer is a Ruby/Rails developer and the creator of the ExtJS MVC framework
'function' in JavaScript - operator vs statement Posted: Apr 29, 2009 6:52 AM
Reply to this message Reply

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
Latest Ruby Buzz Posts
Latest Ruby Buzz Posts by Edward Spencer
Latest Posts From Ed's Elite blog

Advertisement
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.



For further reading on this check out the Mozilla function reference docs.

Read: 'function' in JavaScript - operator vs statement

Topic: Announcing the Metric Fu Google Group Previous Topic   Next Topic Topic: Smells of Testing (signs your tests are bad)

Sponsored Links



Google
  Web Artima.com   

Copyright © 1996-2019 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use