Ways to Define A Function

There are three ways to define functions in JavaScript.

myfunc1 = new Function('text to run as JS', arg1, arg2, etc);
function myfunc2(arg1, arg2, etc) { /* code goes here */ }
myfunc3 = function(arg1, arg2, etc) { /* code goes here */ };

The first of these should never be used since it is both harder to maintain (with all of the code needing to be specified in the one text string) and also because it effectively has to run an eval() of that text in order to convert it into code that is then able to be run. That first alternative is effectively the equivalent of:

myfunc1 = function(arg1, arg2, etc) {eval('text to run as JS'')};

The second of these is perhaps the most popular alternative but suffers from a number of issues. The problems with using this version include that you cannot fully control the scope of the function and there are places where you can't use it such as inside an if statement. Consider the following simple example:

function x() {return 'a';}
alert(x());
function x() {return 'b';}
alert(x());

With this code the second definition of the function completely overwrites the first and both alerts will display 'b' which is probably NOT what you would expect from reading that code. If we rewrite that code to use the third way JavaScript provides for defining functions we would have:

x = function() {return 'a';}
alert(x());
x = function() {return 'b';}
alert(x());

With this variant each function now has a more clearly defined scope from the declaration of the function through to where it is replaced (rather than later definitions overwriting earlier ones before the code even runs as you have with the prior version). This version of the code would alert 'a' first and then 'b' as expected from looking at the code.

This third way to define a function also has other benefits including that you can use it in places in JavaScript where the prior version is not allowed. Consider for example the following code which defines three functions with two of them being defined inside of an if statement (which therefore requires that the function be defined this way since the prior version is not allowed to be defined inside of conditional statements in JavaScript).

addEvent = function(ob, type, fn) {
  if (window.addEventListener)
    addEvent = function(ob, type, fn ) {
      ob.addEventListener(type, fn, false );
    };
  else if (document.attachEvent)
    addEvent = function(ob, type, fn ) {
      var eProp = type + fn;
      ob['e'+eProp] = fn;
      ob[eProp] = function(){ob['e'+eProp]( window.event );};
      ob.attachEvent( 'on'+type, o[eProp]);
    };
  else return;
  addEvent(ob, type, fn);
};

The first time addEvent() is called the outer function runs and tests whether the browser supports addEventListener or attachEvent. It then overwrites itself with one of the other two addEvent functions (whichever uses code that the browser supports) and then calls addEvent() again so as to run whatever the function now contains. Subsequent calls will run the same function without needing to test what the browser supports.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate