JavaScript: declaring and defining a function separately?

Question

If I want to give a JavaScript variable global scope I can easily do this:

var myVar;

function functionA() {
    myVar = something;
}

Is there a similarly simple and clean way -- without creating an object -- to separate the "declaring" and the "defining" of a nested function? Something like:

function functionB;       // declared with global scope

function functionA() {

    functionB() {        // nested, would have local scope if declared here
        CODE;
    }
}

I should clarify that I'm referring to the scope of the function name itself -- so that if it is in an iframe it can be called from a script in the parent document. (Nothing to do with scope of variables inside nested functions.)

Answer 1

You can kind of do what you want.

You can create a function that acts like a namespace for properties and methods, and then you could essentially call either...

functionB();

or

functionA.functionB();

There is an article on how to do it here:

http://www.stevefenton.co.uk/Content/Blog/Date/201002/Blog/JavaScript-Name-Spacing/

In response to the update...

Is the iframe on the same domain as the parent site? You can't call JavaScript across the domain boundary, which may explain the problem.

Answer 2

You can create global variables and functions by creating instances on the window object:

function _A()
{
    // scoped function
    function localFunctionInTheScopeOf_A()
    {
    }

    // global function
    window.globalFunctionOutsideTheScopeOf_A = function ()
    {
    };
}

In your case, though, all you need to do is this:

var myFn; // global scope function declaration

function randomFn()
{
    myFn = function () // global scope function definition
    {
    };
}

Note: It is never a good idea to clog up the global scope. If you can; I'd recommend that you re-think how your code works, and try to encapsulate your code.

Answer 3

Perhaps I'm misunderstanding the question, but it sounds like you want something like this:

var innerFunc;

function outerFunc() {
    var foo = "bar";

    innerFunc = function() {
        alert(foo);
    };
}

Answer 4

You cannot globalize variables/functions cross windows/iframes that way. Each window/iframe has it's own global scope and to target variables/functions in another window/iframe, you need explicit accessor code and conform to the same origin policy. Only variables/functions inside the windows/iframes global scope are accessible.

code in top window.

var iframe = document.getElementById('iframeId');
var iframeContext = iframe.contentWindow || iframe;

// this will only work if your iframe has completed loading
iframeContext.yourFunction();

You could also possibly define functions/variables in the top window instead and simply work in one scope by binding the stuff you need from the iframe through a closure. Again, assuming you meet the same origin policy. This will not work cross domain.

code in iframe.

var doc = document;
var context = this;
top.myFunction = function(){
    // do stuff with doc and context.
}

It is also important to note, that you need to check if your iframe content and it's scripts are fully loaded. Your top page/window will inadvertidly be done and running before your iframe content is done, ergo variables/functions might not be declared yet.

As for exposing a private function, others have awnsered this, but copy/pasting for completeness.

var fnB;
var fnA = function(){
    var msg = "hello nurse!";
    fnB = function(){
         alert(msg);
    }
}

I have the habbit of declaring stand alone functions as variables (function expression) and only use function statements to signify constructors/pseudo-classes. It also avoids a few possible embarrasing mistakes.. In any case, fnB resides in the global scope of the iframe and is available to the top window.

Why exactly you want this beats me, seems it makes matters more complicated to debug or update a few months later.