Function Declarations vs Function Expressions

This short post is in reaction to this post
on JavaScript Function Declarations and Function Expressions.
My concern was with the littering of the global object.

Subject to hoisting

  • function statements or function declarations
  • variable declarations, but not their assignment expressions

Function Statement
sometimes just a pseudonym for a Function Declaration
in Mozilla a Function Statement is an extension of Function Declaration
allowing the Function Declaration syntax to be used anywhere a statement
——is allowed.

Don’t forget; when a function is not the property of an object, it’s invoked as a function.
The this of the function is bound to the global object.
∴ foo and also bar are bound to the global object.
This is not good.
As Douglas Crockford puts it (and rightfully so), we’re clobbering the global variables.
I think a better way to do this, would be like the following code examples.

A few words on access first

All members of an object are public
You can add public members in the constructor, by using the
this keyword (which by the way, provides “privileged” access).
If you want to add private members, you can use a constructor Function.
You are actually adding the member to the function.
Private members are only accessible via the objects privileged members.
Privileged members are able to access private members,
and are themselves accessible to public members and outside.

Have a look at Angus Croll’s post to provide some context.

Question 1

function Foo(){
   function bar() {      //private
      return 3;
   }
   this.barMeth = bar(); //privileged
   function bar() {      //private
      return 8;
   }
}
var myFoo = new Foo();
alert(myFoo.barMeth);

Question 2

function Foo(){
   var bar = function bar() { //private
      return 3;
   }
   this.barMeth = bar();      //privileged
   var bar = function bar() { //private
      return 8;
   }
}
var myFoo = new Foo();
alert(myFoo.barMeth);

Question 3

var myFoo = new Foo();
alert(myFoo.barMeth);
function Foo(){
   var bar = function bar() { //private
      return 3;
   };
   this.barMeth = bar();      //privileged
   var bar = function bar() { //private
      return 8;
   };
}

Question 4

function Foo(){
   this.barMeth = bar();          //privileged
   var bar = function bar() {     //private
      return 3;
   };
   var barMeth = function bar() { //private
      return 8;
   };
}
var myFoo = new Foo();
alert(myFoo.barMeth);

Or worse, but still not clobbering the global object…

var myApp = {};

myApp.fooTest = {
   foo: function (){
      function foo(){
         function bar() {
            return 3;
         }
         return bar();
         function bar() {
            return 8;
         }
      }
      alert(foo());
   }
}

myApp.fooTest.foo();
About these ads

Tags: ,

One Response to “Function Declarations vs Function Expressions”

  1. JavaScript Coding Standards and Guidelines « Binarymist Says:

    […] Additional hoisting examples on my blog […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

Join 212 other followers

%d bloggers like this: