Is it possible to call a JavaScript function inside an expression with a pronounced calling function

Question

I use jQuery and have a function enclosed inside an expression called immediately:

<script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> (function ($) { var message = 'x called'; function x() { alert(message); } })(jQuery); x(); </script> 

This will result in an error because the function "x" is not defined outside the function expression called immediately. Is there a way to call the "x" function outside the expression called by the immediately called function?

Answer 1

Create a namespace for other classes or functions with which you might want to do this. You don’t want to constantly pollute the global namespace, but there is no reason why you cannot make one namespace global and put your individual things under it:

 (function($){ window.MyNamespace = function(){}; var message = "Something here"; $.extend(MyNamespace, { x: function(){ alert(message); } }); })(jQuery) MyNamespace.x() 

Answer 2

Only if you expose the function in any way. For example, you can return it from an external function:

 var x = (function ($) { var message = 'x called'; function x() { alert(message); } return x; })(jQuery); x(); 

Or, similarly, you can return it to an object:

 var obj = (function ($) { var message = 'x called'; function x() { alert(message); } return {"x": x}; })(jQuery); obj.x(); 

Functions and variables declared inside a function are not directly accessible from outside this function unless you provide any means of access to them by returning something or referring to a variable declared outside this function.

Answer 3

You can change your code as follows:

 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> var x; (function ($) { var message = 'x called'; x = function () { alert(message); } })(jQuery); x(); </script> 

jsFiddle link to this: http://jsfiddle.net/aLnbn/

Answer 4

Yes, (one way is :) just return it from IIFE using the return statement, you also need to "catch" the return by assigning the IIFE variable

 var foo = (function(){ return your_function; }()); 

Answer 5

You can access your method using your IIFE to return (or increase) a global variable.

You can do it as follows:

 var globalObject = (function (theObject, $) { if (theObject.theMethod) { return theObject; } var message = 'theMethod called'; theObject.theMethod = function () { alert(message); }; return theObject; })(globalObject || {}, jQuery); globalObject.theMethod(); 

---

The sample we use is a little better.

We have one global object (for example, a namespace), and we add modules to it by importing js files containing IIFE.

Each IIFE adds a new module to one global entity.

This makes our entire project have only one global object that can arbitrarily use any of our modules, including a file.

I recommend checking out this article, which is a good discussion of the JavaScript module template:

• http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

Answer 6

Try the following:

 var miFunc = (function($) { var message = 'x called'; function x() { console.log(message); } this.x = x; return this; })(jQuery); miFunc.x(); 

Test: http://jsbin.com/erucix/2/edit

Answer 7

One of the goals of closing is to limit the area. This is why x() is defined and can be called inside your expression, called immediately called, but undefined outside.

In order for your code to work without refactoring, you can use the JS grammar, which distinguishes a function instruction and a function operator . Both are semantically identical, but the latter can be assigned to a variable that works correctly for your scenario:

 var x; //scoped *outside* of the closure (function ($) { var message = 'x called'; x = function() { alert(message); } })(jQuery); x(); //alerts 'x called'