changing definition of js function not working in some browsers

Question

I searched for an answer to this but didn't find anything, although there must be a simple explanation. The following function js shows different results in different browsers...could someone tell me why? many thanks

var i='a';

if (i=='a')  function theFunction(){alert('hi');}
else         function theFunction(){alert('bye');};

theFunction();

//ff results in hi
//ie results in bye
//chrome results in bye

That would be the missing curlybraces in the condition causing the issue. — adeneo, Dec 01 '13 at 16:22
possible duplicate of [Function declarations inside if/else statements?](http://stackoverflow.com/questions/10069204/function-declarations-inside-if-else-statements) — Oriol, Dec 01 '13 at 16:50

Oriol · Answer 1 · 2013-12-01T23:41:36.870

The problem is that you use a function declaration inside an if block.

From ECMA-262:

NOTE Several widely used implementations of ECMAScript are known to support the use of FunctionDeclaration as a Statement. However there are significant and irreconcilable variations among the implementations in the semantics applied to such FunctionDeclarations. Because of these irreconcilable differences, the use of a FunctionDeclaration as a Statement results in code that is not reliably portable among implementations. It is recommended that ECMAScript implementations either disallow this usage of FunctionDeclaration or issue a warning when such a usage is encountered. Future editions of ECMAScript may define alternative portable means for declaring functions in a Statement context.

And if you try to use your code in strict mode, you get

SyntaxError: in strict mode code, functions may be declared only at top level or immediately within another function

Instead, you can use

var i='a',
    theFunction;

if (i=='a')  theFunction = function(){alert('hi');}
else         theFunction = function(){alert('bye');};
theFunction();

Or, if your code is simple enough (like example above), use the ternary operator:

var theFunction = i=='a'
    ? function(){alert('hi');}
    : function(){alert('bye');};

score 0 · Answer 2 · answered Dec 01 '13 at 19:26

0

You can return a function from a condition expression:

var i='a';
var theFunction=(function(){
    if (i=='a')  return function theFunction(){alert('hi');}
    else return function theFunction(){alert('bye');};
})();

theFunction();

/* returns: 'hi' */

answered Dec 01 '13 at 19:26

kennebec

102,654
32
106
127

score 0 · Answer 3 · answered Dec 01 '13 at 19:45

I like a lot that pattern, so idiomatic, of a self-modifying function. Its idea is to take advantage that a function declaration is a just a var declaration with an early evaluation (to say it in a few words) :

var seen=false;

function iWillSay() {
         if ( seen == false ) iWillSay = function() { alert('hi' );  };
         else                 iWillSay = function() { alert('bye');  };
         return iWillSay();
}

iWillSay();  // always says hi.

changing definition of js function not working in some browsers

3 Answers3