Setting a var property in the JavaScript Revealing Module Pattern requires a setter and a getter

Comments (2) | Share

See John Papa's article for more information on the revealing pattern.

See http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript for a great reference as well.

I was trying to expose a property in my JavaScript object and setting it from an outside caller. When I ran the code, the value didn’t change. This held me up for awhile yesterday. When I Googled, GoodSearched the problem today, I found a question on Stackoverflow that was similar and lead me in the right direction. You need a setter, makes sense now ("It's all about scope" as a co-worker put it). So I put together a quick test in my JsFiddle example. Here’s a copy from the example. I also have an example without the initial instantiation and as a Knockout view model in the fiddle.

var bike = (function () {
  var isMoving = false,
    isMovingSetter = function (value) {
      isMoving = value;
    },
    test = function () {
      console.log('The bike is moving? ' + isMoving);
    };
  return {
    IsMoving: isMoving,
    Test: test,
    IsMovingSetter: isMovingSetter
  };
}());

// directly setting the property doesn't change the value, this tripped me up for awhile
bike.IsMoving = true;
console.log(bike.IsMoving);
bike.Test();

// a setter is necessary
bike.IsMovingSetter(true);
bike.Test();

Addendum:

Getters are required as well. This question from SO answers it pretty well.

I created a jsFiddle that shows the problem, then I added the getter and access it that way.