Javascript: Inconsistency when assigning a named function to a variable (named function expression)

Question

Can anyone explain the difference in behaviour between Internet Explorer and Firefox in regards to the below:

var myNamespace = (function () {
  var exposed = {};

  exposed.myFunction = function myFunction () {
    return "Works!";
  }

  console.log(myFunction()); 
  // IE: "Works!"
  // Firefox: ReferenceError: myFunction is not defined

  console.log(exposed.myFunction());
  // IE: "Works!"
  // FF: "Works!"

  return exposed;
})();

console.log(myNamespace.myFunction()); 
// IE: "Works!"
// FF: "Works!"

In internet explorer this method allows me to call my function from inside my namespace function by using either myFunction() or exposed.myFunction().

Outside my namepsace function I can use myNamespace.myFunction()

In Firefox, the results are the same with the exception of the bare named function call which does not work.

Should it work? If it shouldn't, then why not?

If it should then is this a known bug?

Answer 1

To prevent false information:

IE has a problem with named function expressions which is what you have. The name of the function should only be available inside the function. From the specification:

The Identifier in a FunctionExpression can be referenced from inside the FunctionExpression's FunctionBody to allow the function to call itself recursively. However, unlike in a FunctionDeclaration, the Identifier in a FunctionExpression cannot be referenced from and does not affect the scope enclosing the FunctionExpression.

where FunctionExpression is defined as:

FunctionExpression :
     function Identifier_opt ( FormalParameterList_opt ) { FunctionBody }

But in IE, instead of making the name only available inside the function, it creates two different function objects, one assigned to the variable and the other to the name you gave the function. The following will yield false in IE (and throw an error in other browsers):

exposed.myFunction === myFunction;

It's a known bug and if you have to code for (older versions of) IE, you better avoid named function expressions.

---

Related question:

• detachEvent not working with named inline functions
• Named Function Expressions in IE, part 2

Answer 2

This:

exposed.myFunction = function myFunction () {
    return "Works!";
}

is useless (- correcting myself: it is NOT incorrect - ) and apparently buggy (see Felix's post). If you wish to declare a function part of exposed you don't need to name it:

exposed.myFunction = function() {
    return "Works!";
}

However, if you want to declare a local function and then also affect it to your array exposed, you can do:

function myFunction () {
    return "Works!";
}

exposed.myFunction = myFunction;

which would, in this case, successfully validate (exposed.myFunction === myFunction) === true;

Also, please note that your call to console.log(myNamespace.myFunction()); is identical to your call to console.log(exposed.myFunction()); since myNamespace is actually the object exposed.

Answer 3

Also, By defining

exposed.myFunction = function() {}

You are setting exposed's property to be myFunction.

And it is not available in the myNamespace scope.

By defining

exposed.myFunction = function myFunction() {}

The function is created in the scope of myNamespace, and then referenced as a property of exposed.