variable within a object not updating in javascript

Question

I have an object which is initialized like

  var x = function(){
       var result = 5,
       clear = function(){
          result = 0;
        };
      return {
        result: result,
        clear: clear      
     }           
  }

I am later creating a new instance of x using var y = new x();

but when i try setting the value y.result = 5; and want to clear the result value to 0 I call y.clear();

However it is not resetting the y.result to 0... Not sure why?

Anything that i am doing wrong?

Numbers are immutable, the result on top is not the same as result in the object you're returning. Make a getter function. — elclanrs
– elclanrs, Commented Aug 14, 2014 at 2:11
You should be using var y = x();, not var y = new x();. x is not a constructor function. (It does not write to this.) — cdhowie
– cdhowie, Commented Aug 14, 2014 at 2:13
clear is a setter because it sets the result variable. A getter would return the result variable. — elclanrs
– elclanrs, Commented Aug 14, 2014 at 2:15
And ladies and gentlemen, this is why Douglas Crockford doesn't like new. — Siddharth
– Siddharth, Commented Aug 14, 2014 at 2:17

RobG · Accepted Answer · 2014-08-14 02:32:43Z

Within your function:

var x = function(){
       var result = 5,
       clear = function(){
          result = 0;

The identifier result in this function has a closure to the variable result in the outer function (i.e. outer execution context).

        };
      return {
        result: result,

That assigns the value of the variable named result to the object property named result.

        clear: clear      
     }           
  }

So later when you call y.clear() you are setting the value of the variable held in the closure, which does not update the object property named result.

If you want x to be a constructor, then:

function X() {
  this.result = 5;
  this.clear = function() {
    this.result = 0;
  }
}

So now:

var y = new X();
y.clear();
console.log(y.result); // 0

Note that it is convention for constructors to have a name starting with a capital letter. You can learn more about how to use the new operator on MDN.

To leverage ECMAScript inheritance, put the clear function on the constructor's prototype so that all instances inherit the one method, rather than each having its own:

function X() {
  this.result = 5;
}

X.prototype.clear = function() {
  this.result = 0;
}

Klaster_1 Нет войне · Accepted Answer · 2014-08-14 02:36:19Z

1

The problem is that numbers are referenced by value. Assigning value to result variable from clear function won't change value of result on new x instance.

There are several ways to go about this:

Store data on this, then modify it there inside constructor and method, I find it easier to understand and more readable. This is probably what you wanted to begin with:
```
function x () {
    this.result = 5;
}

x.prototype.clear = function () {
    this.result = 0;
}

var z = new x();
// z.result === 5
z.clear()
// z.result === 0;
```

Define getter and setter on returned object, so instance result would return\set closured variable:

function x () {
    var result = 5;

    function clear () {
        result = 0;
    }

    var out = {
        clear: clear
    };

    Object.defineProperty(out, "result", {
        get: function () {
            return result;
        },
        set: function (value) {
            result = value;
        }
    });

    return out;
}

var z = new x();
// z.result === 5
z.clear()
// z.result === 0;
z.result = 10
// z.result === 10;
z.clear()
// z.result === 0;

answered Aug 14, 2014 at 2:36

Klaster_1 Нет войне

12.2k9 gold badges65 silver badges75 bronze badges

1 Comment

Klaster_1 Нет войне Over a year ago

Not, IE7/8 do not support defineProperty on objects. The first solution should work there just fine, though. If you really want to go with closured var approach, then all external access to result should be done using function(s).

Collectives™ on Stack Overflow

variable within a object not updating in javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related