CODEWITHSUNDEEP
javascript
kalabo
kalabo

Reputation: 564

Why can't I reference my anonymous function?

I have this following js (contents prob not important)

(function() {
   var module = {
      getAppAbsoluteUrl: getAppAbsoluteUrl,
      getAppRelativeUrl: getAppRelativeUrl,
      getAppODataApiUrl: getAppODataApiUrl
    };
    return module;

    function getAppAbsoluteUrl() {
        return _spPageContextInfo.webAbsoluteUrl;
    };

    function getAppRelativeUrl() {
        return _spPageContextInfo.webServerRelativeUrl;
    };

    function getAppODataApiUrl() {
        return getAppAbsoluteUrl() + "/_api";
    };
});

If the above code is in a file called spAppUtils.js and in another html page i try to call this i get an undefined message. Is the above not an anonymous function? how can i initialise this function from another page? Ive tried just referencing the js to no avail. What am i missing?

Thanks

Upvotes: 0

Views: 136

Answers (4)

posit labs
posit labs

Reputation: 9431

There are a couple of issues here. First, it's dangerous to return out of a function before everything has been defined. There is something called variable hoisting that will automatically move all of your declarations to the top, but I'm not sure when it applies.

Here is a basic example of unreachable code.

(function(){
  console.log("gets called");
  return;
  console.log("unreachable code");
})();

The next issue is one of scope.

// window scope
(function(){
  // new scope
  var module = {"hello":"world"};
  console.log(module); // object
})();

console.log(module) // undefined

[edit] So in order to make your module accessible to other script files, you will have to define a global variable for it in the window scope.

(function(){
  window.module = {...}
})();

Upvotes: 0

pdoherty926
pdoherty926

Reputation: 10349

Try doing something like this:

var module = (function() {

    // move your functions before your return
    // hoisting (http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) will allow you to add them after the return, but doesn't help readability and will likely confuse newcomers

    function getAppAbsoluteUrl() {
        return _spPageContextInfo.webAbsoluteUrl;
    };

    function getAppRelativeUrl() {
        return _spPageContextInfo.webServerRelativeUrl;
    };

    function getAppODataApiUrl() {
        return getAppAbsoluteUrl() + "/_api";
    };

    return { // explicitly export your public interface
        getAppAbsoluteUrl: getAppAbsoluteUrl,
        getAppRelativeUrl: getAppRelativeUrl,
        getAppODataApiUrl: getAppODataApiUrl,
        test: function () { alert('test') } 
    };
}()); // execute your anonymous function

module.test()

Fiddle

Upvotes: 1

Quentin
Quentin

Reputation: 943142

To call the function, you need to put () after it.

To capture the return value (the object you assign to module inside the function and then return) you need an assignment operator before it.

You can get rid of the parenthesis around the entire function. They are only needed to turn a function declaration into a function statement so you can immediately invoke it, but having a = (which you need) will do that just as well.

var myModule = function() {
// ...
}();

Upvotes: 1

Sam Williams
Sam Williams

Reputation: 1

You can try inserting it directly into your html using <script> tags to see if the issue is the function itself or the link to the .js file

Upvotes: -1

Related Questions