Accessing property of javascript object returns undefined, why?

Question

I am trying to learn how to create JavaScript class in another .js file and access it from anywhere else. I have read a few examples, but can't seem to understand it completely.

For example, how do I access the following:

 //code in file2.js getterTest = (function() { var _x = 15; return { doSomething: function() { _x += 5; }, get x() { return _x; } } }); //code in file1.js console.log(getterTest._x); //undefined console.log(getterTest.x); //should give 15 getterTest.doSomething(); console.log(getterTest.x); //should give 20

But it all gives undefined and the .doSomething method gives not a function .

I will go home now and read more about closure as @Liam suggested and will see what is going on tomorrow.

Answer 1

Ok lets break this down

getterTest = (function() {});

getterTest is a function pointer. ie it is a variable that holds the un-envoked function.

If I do:

getterTest = (function() {});
getterTest();

I invoke the function.

If I do:

getterTest = (function() {});
var result = getterTest();

result contains the function returned from the getterTest function, ie an object ( {} ) that contains a function and a gettable x property

result = {
    doSomething: function() {
       _x += 5;
    },

    get x() {
        return _x;
    }
}

so I could do:

getterTest = (function() {});
var result = getterTest();
result.x;

TL;DR

Really though; what you want is for getterTest to work like this:

getterTest = function() {
var _x = 15;

return {
    doSomething: function() {
       _x += 5;
    },

    get x() {
        return _x;
    }
}
}();
//invoke the function and store this in your variable by adding () above    

//code in file1.js
//console.log(getterTest._x);         //this is private so can't be accessed (you can only access things that are returned)
console.log(getterTest.x);         //should give 15
getterTest.doSomething();
console.log(getterTest.x);        //should give 20

Fiddle

You cannot access _x outside of the closure, because it's scope is the function. This is , essentially, the point of closures. To keep things in scopes and to keep the "global context" clean.

---

FYI

You might notice I kinda use "function" and "object" interchangeably in the above. People not used to Javascript find this odd but there is a good reason. In Javascript a function is an object o_O

Again this is one of the principals of what your trying to achieve here. It's all basically about encapsulation

Answer 2

please do as,

//code in file2.js
getterTest = (function() {
    var _x = 15;
    return {
        doSomething: function() {
           _x += 5;
        },

        get x() {
            return _x;
        }
    }
}()); // added '()'


//code in file1.js
console.log(getterTest._x);         //undefined
console.log(getterTest.x);         //15
getterTest.doSomething();
console.log(getterTest.x); 

Answer 3

you need to instantiate the class and then call the functions.

var g = getterTest(); 
console.log(g.x);         //15
g.doSomething();
console.log(g.x); //20

If you call getterTest() on each call, it will always get a new version of the class

console.log(getterTest().x);         //15
getterTest().doSomething();
console.log(getterTest().x); //15

I know this is not ideal for you. But this is the correct way to call the functions in file2.js Other choice is to rewrite file2.js
Good luck!