JavaScript methods on object not updating property

Question

I create a function that returns an object to store a number, along with some methods to manipulate the number.

const StoreX = (x) => ({
  x,
  add1: () => x + 1,
  inc1: () => { x += 1; },
  getX: () => x,
});

const value = StoreX(10);

If I run value.add1() a couple of times, it always returns 11. When I inspect the value object, its x property remains as 10. This is expected as add1() simply returns x + 1.

I expect the inc1() method to update the x property of the object. But when I run the value.inc1() a few times, the result isn't what I expected.

value.inc1(); // value.x === 10
value.inc1(); // value.x === 10
value.getX(); // 12

So somehow value.x remains at 10. But if I run value.getX(), I do get the "correct" 12. So inc1() appears to be updating some other instance of x that can only be retrieved by getX().

What's happening here ?

inc1 is mutating the parameter x, not the object property this.x. — castletheperson
– castletheperson, Commented May 22, 2018 at 19:50
arrow functions are not bind with context (this), so you can't use arrow function as constructor — NobbyNobbs
– NobbyNobbs, Commented May 22, 2018 at 19:54

Bergi · Accepted Answer · 2018-05-22 19:55:04Z

4

As @4castle said, your functions update the x variable (declared by the parameter) not the .x object property.

You have to use either a getter to make the property live

function StoreX(x) {
  return {
    get x() { return x; },
    add1: () => x + 1,
    inc1: () => { x += 1; },
    getX: () => x,
  };
}

or methods to use the property instead of the variable

function StoreX(x) {
  return {
    x,
    add1() { return this.x + 1 },
    inc1() { this.x += 1; },
    getX() { return this.x },
  };
}

answered May 22, 2018 at 19:55

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

1 Comment

castletheperson Over a year ago

Just to add a bit of commentary on the difference between those solutions for those wondering: the first solution has more encapsulation because you can't set the internal x value from outside the StoreX function, while the second solution is more easily converted to class syntax, which can store the member functions once on the prototype object instead of duplicating them on every instance (saving memory).

Collectives™ on Stack Overflow

JavaScript methods on object not updating property

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related