Question

See the following piece of simplified code:

myVar= 1;
myFunc = function() {
    return { val : myVar };
};
myInstantiation = new myFunc();
console.log(myInstantiation ); //{val:1}
console.log(myVar); //1
myVar=2;
console.log(myInstantiation );//{val:1}
console.log(myVar); //2

is there any way I can declare the myInstantiation, or the myFunc so as to still do the same thing ( eg instantiate the object ) but in such a way that will allow me to change the myVar and have that change reflect inside the myInstantiation ?

Eg I want the output to be

console.log(myInstantiation );//{val:2}
console.log(myVar); //2

Answer 1

Not directly, no (well, you can with ECMAScript5). The expression

return { val: myVar };

…takes the value of myVar and assigns it to the val property of a new object. There is no enduring connection between that val property’s value and the value of the myVar.

The straightforward way to do what you want is to make val a function rather than a property:

myVar = 1;
myFunc = function() {
    return {
        val: function() {
            return myVar;
        }
    };
};
myInstantiation = new myFunc();
myVar = 2;
alert(myInstantiation.val()); // alerts "2"

Live example

If it has to be a property, it’s possible with ECMAScript5: You can define a function that gets called when someone accesses an object property, using the new Object.defineProperty function:

myVar = 1;
myFunc = function() {
    var rv = {};
    Object.defineProperty(rv, "val", {
        get: function() {
            return myVar;
        },
        set: function(newVal) {
            myVar = newVal;
        }
    });
    return rv;
};
myInstantiation = new myFunc();
myVar = 2;
alert(myInstantiation.val); // alerts "2"

Live example – run in Chrome, a recent version of Firefox, or a recent Safari (but not Opera or any version, so far, of IE).

It’s still a function call, with the overhead that implies, but the code using myInstantiation sees it as a property access. (Which is handy, but in some ways misleading.)

Object.defineProperty only works with JavaScript engines that support the new ECMAScript5 features, so notably not IE. There’s no standard way of doing what you’re doing without an explicit function call otherwise (Mozilla had done their own thing prior to the standard, but that’s now deprecated and only worked in a couple of browsers).

---

There are some issues with your code that I should I should point out:

1. You’re not declaring your variables, and so you’re falling prey to the Horror of Implicit Globals.

2. Your myFunc is defined as:

   myFunc = function() {
       return { val: myVar };
   };
   

   …but then you’re calling it with new:

   myInstantiation = new myFunc();
   

   Since your function returns an object, new serves no purpose there, you can just do

   myInstantiation = myFunc();
   

   This is because of the way new works: It creates an object, initializes that object with a prototype from myFunc.prototype, and then calls myFunc with this set to the new object. If myFunc doesn’t return anything or returns a primitive type (or null), the result of the new expression is the new object that new created. But if myFunc returns an object (as yours does), the new object created by new is thrown away and your object is used instead. So new with a function like yours is irrelevant.