Calling a nested function from another script

Question

In context I have two javascript files, one handles the actual page itself while another handles a popup tutorial. Each script file is nested within a function as shown below:

(function () {
    'use strict';
    // script here
}());

In the main script is the following function:

function updateCompView(ident) {
    'use script';
    // code is here
}

However what I'm finding is that if I reference this function within the second script file (for the tutorial) like so:

updateCompView('KL-COM-001');

I get an Uncaught ReferenceError. I have managed to resolve this by removing the top-level function however this then means I get a large number of 'use strict' JSLint errors.

Is there a way to reference functions that are nested within an external function?

You'll probably want to read up on scopes and closures in JS. — gpgekko
– gpgekko, Commented Jun 4, 2014 at 10:33
You'll have to make it referenceable, for example, do if (!window.myNamespace) window.myNamespace = {} then set window.myNamespace.updateCompView = updateCompView; and now you can access it as window.myNamespace.updateCompView from outside — Paul S.
– Paul S., Commented Jun 4, 2014 at 10:41

Paul S. · Accepted Answer · 2014-06-04 10:49:54Z

2

You'll have to make it referenceable

There are three ways to do this, so lets start assuming you have the following code

(function () { // this is an IIFE
    "use strict";
    function baz() {}
}()); // this is where it gets invoked

Method 1, make your own namespace (just an Object), at the beginning of the IIFE,

if (!window.myNamespace)
    window.myNamespace = {};

then after baz is defined,

window.myNamespace.baz = baz;

Now you can access baz via window.myNamespace.baz under other closures

Method 2, return out of an IIFE, at the end of the IIFE you do

return baz; // or some object containing baz

and you refactor your IIFE to look like this

var foo = (function () {
    // IIFE body
}());

Now you can access baz via foo in the closure and descendant closures of where foo was vard

Method 3, set baz in the global namespace

There are two options for this, one is to structure it as a function expression and don't var the variable you assign to, i.e.

baz = function () {};

The other way is similar to method 1 but without the namespace. This can be considered bad in that it is polluting the global namespace with something new each time you do it. After baz is defined,

window.baz = baz;

Now you can access baz via window.baz or simply baz if it's not shadowed under other closures

answered Jun 4, 2014 at 10:49

Paul S.

66.6k9 gold badges129 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Short Over a year ago

Thanks for that, works perfectly. I had a vague idea of why it wasn't working but a lot of the posts online were overly complicated. This is the exact answer I was looking for, thanks!

Collectives™ on Stack Overflow

Calling a nested function from another script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related