1

I have js file myScript.js

(function () {    
    'use strict';    
    if (!window.myObj) {
        window.myObj= {};
    }    
    var myObj= window.myObj;
    myObj = {
       home: function () {
          console.log('hi from home');
       }, 
       details: function(){
          console.log('hi from details');
       }    
})();

inside view page I'm trying to access home method on myObj object

<script>
        $(document).ready(function () {
            myObj.home();
        });
</script>

but I'm getting

uncaught TypeError: myObj.home is not a function(…)

myScript.js is loaded and no console error on loading page.

1
  • Your code looks incomplete. myObj isn't closed... Commented Oct 30, 2016 at 14:43

6 Answers 6

3

You could assign directly the properties to myObj without overwriting the variable and keeping window.myObj.

Before assignment

                    +----------------+
window.myObj -----> |                |
                    |  { }           |
myObj ------------> |                |
                    +----------------+

after assignment

                    +----------------+
window.myObj -----> |  { }           |
                    +----------------+

                    +----------------+
myObj ------------> | {              |
                    |  home: fn ..,  |
                    |  details: fn ..| 
                    | }              |
                    +----------------+

(function () {    
    'use strict';    
    if (!window.myObj) {
        window.myObj = {};
    }    
    var myObj = window.myObj;
    myObj.home = function () {
        console.log('hi from home');
    }; 
    myObj.details = function(){
        console.log('hi from details');
    };
})();

myObj.home();
myObj.details();

Or use Object.assign in ES6

(function () {    
    'use strict';    
    if (!window.myObj) {
        window.myObj = {};
    }    
    var myObj = window.myObj;
    Object.assign(myObj, {
        home: function () {
            console.log('hi from home');
        },
        details: function(){
            console.log('hi from details');
        }
    });
})();

myObj.home();
myObj.details();

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

Comments

1

You set the myObj variable in your example as a reference to the window.myObj variable, and afterwards you override this reference with a new object. The original window.myObj variable is still the variable you set (in window.myObj= {};);

Check this example:

(function () {
  if (!window.myObj) {
    window.myObj= { home: function() { console.log('original home'); } };
  }
  var myObj = window.myObj;
  myObj = {
    home: function () {
      console.log('hi from home');
    }, 
    details: function(){
      console.log('hi from details');
    }    
  }
})();
$(document).ready(function () {
  window.myObj.home();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use the window.myObj = {...} or you can set the specific function to that variable (using myObj.home = function() { ... }).

Comments

0

You need to make myObj global

var myObj = undefined;
(function() {
  'use strict';
  if (!window.myObj) {
    window.myObj = {};
  }
  myObj = window.myObj;
  myObj = {
    home: function() {
      console.log('hi from home');
      return true
    },
    details: function() {
      console.log('hi from details');
      return true
    }
  }
})();

console.log(myObj.home())

Comments

0

You are missing ) paranthesis, also make the object global,

  var myObj;
  (function() {
    'use strict';

    if (!window.myObj) {
      window.myObj = {};
    }
    myObj = window.myObj;
    myObj = {
      home: function() {
        console.log('hi from home');
      },
      details: function() {
        console.log('hi from details');
      }
    }
  })();
  $(document).ready(function() {
    myObj.home();
  })

DEMO

Comments

0

This here seems to be your issue...

var myObj= window.myObj;

Since the above line of code has been placed inside of an anonymous function, only code within the scope of this function can access it.

One way we can fix your issue is by making myObj a public variable.

Before your anonymous function, place the following code...

var myObj = {};

Because this is outside of the anonymous function, myObj is declared in the global scope and therefore can be accessed from within your function.

Because of this adjustment, we can get rid of a big block of code...

if (!window.myObj) {
    window.myObj= {};
}    
var myObj= window.myObj;

Here is the final code that does what you are looking for...

var myObj = {}; // declare myObj in a global scope
(function () {    
    'use strict';
    myObj = { // since myObj is already declared as global, our function can access it
       home: function () {
          console.log('hi from home');
       }, 
       details: function(){
          console.log('hi from details');
       }    
    }
})();
myObj.home(); //testing out our code
myObj.details();

Here is a working example... http://labs.codecademy.com/D395#:workspace

Comments

0

you can access your window property using this:

enter image description here

(function () {    
    'use strict';    
    if (!window.myObj) {
        window.myObj = {};
    }    
    var myObj = window.myObj;
    myObj.home = function () {
          console.log('hi from home');
    }; 
    myObj.details = function(){
       console.log('hi from details');
    };
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
      $(function(){
        window.myObj.home();
        window.myObj.details();
      });
    </script>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.