Private functions in JavaScript

Question

In a jQuery-based web application I have various script where multiple files might be included and I'm only using one of them at a time (I know not including all of them would be better, but I'm just responsible for the JS so that's not my decision). So I'm wrapping each file in an initModule() function which registers various events and does some initialization etc.

Now I'm curious if there are any differences between the following two ways of defining functions not cluttering the global namespace:

function initStuff(someArg) {
    var someVar = 123;
    var anotherVar = 456;

    var somePrivateFunc = function() {
        /* ... */
    }

    var anotherPrivateFunc = function() {
        /* ... */
    }

    /* do some stuff here */
}

and

function initStuff(someArg) {
    var someVar = 123;
    var anotherVar = 456;

    function somePrivateFunc() {
        /* ... */
    }

    function anotherPrivateFunc() {
        /* ... */
    }

    /* do some stuff here */
}

Take a look at [this question](http://stackoverflow.com/questions/1013385/what-is-the-difference-between-a-function-expression-vs-declaration-in-javascript). — jwueller, Nov 19 '10 at 12:15

score 8 · Accepted Answer · answered Nov 19 '10 at 12:20

8

The major difference between these two approaches resides in the fact WHEN the function becomes available. In the first case the function becomes available after the declaration but in the second case it's available throughout the scope (it's called hoisting).

function init(){
    typeof privateFunc == "undefined";
    var privateFunc = function(){}
    typeof privateFunc == "function";
}

function init(){
    typeof privateFunc == "function";
    function privateFunc(){}
    typeof privateFunc == "function";
}

other than that - they're basically the same.

answered Nov 19 '10 at 12:20

Andris

27,649
4
34
38

3

The only other difference is that unlike a function created by a function exprerssion, a function created by a function declaration has a name, which will show up in the string representation of the function in some browsers, whcih can help when debugging. The function name also shows up in the `name` property of the function object in some browsers. – Tim Down Nov 19 '10 at 12:32
Function declaration sets the name property of the function but this behavior is not defined by any standard, is poorly supported among different browsers and thus can't be relied on. But the point made is correct - this is a difference between function statement and declaration. – Andris Nov 19 '10 at 15:14
For further clarity, this is because the function declaration is "hoisted" (quotes because it's a bit more complicated that simply moving the declaration) much like variable declarations. When using a function expression only the variable declaration portion is hoisted. – Matt Mar 22 '13 at 20:57

score 0 · Answer 2 · answered Nov 19 '10 at 12:47

this is a model that helped me to manage modules in javascript:

base.js:

var mod = {};

mod.functions = (function(){

    var self = this;

    self.helper1 = function() {

    } ;

    self.helper2 = function() {

    } ;

    return self;

}).call({});

module_one.js

mod.module_one = (function(){

  var 
    //These variables keep the environment if you need to call another function
    self = this, //public (return)
    priv = {};   //private function

  priv.funA = function(){
  }

  self.somePrivateFunc = function(){
     priv.funA();
  };

  self.anotherPrivateFunc = function(){

  };

  // ini module

  self.ini = function(){

     self.somePrivateFunc();
     self.anotherPrivateFunc();

  };

  // ini/end DOM

  $(function() {

  });

  return self; // this is only if you need to call the module from the outside
               // exmple: mod.module_one.somePrivateFunc(), or mod.module_one.ini()

}).call({});

Private functions in JavaScript

2 Answers2