hiding backing variable for js props, w/ es6 symbols

1.js

var obj = {

  get foo(){
    return this._foo;
  },

  set foo(val){
    this._foo = val;
  }

};

2.js

obj.foo = "bar";
console.log(obj.foo); // => "bar"

// modify the backing variable directly
obj._foo = "mod";

console.log(obj.foo); // => "mod"

3.js

function FooObj(){

  // hide the backing variable w/ a closure
  var _foo; 

  // create the object we want, w/ the closure
  var obj = {

    get foo(){
      return _foo;
    },

    set foo(val){
      _foo = val;
    }

  };

  // send back the object
  return obj;
};

// use the FooObj constructor
var obj = new FooObj();

obj.foo = "bar";
console.log(obj.foo); // => "bar"

obj._foo = "mod";
console.log(obj.foo); // => "bar"

4.js

function FooObj(){

  // hide the backing variable w/ a closure
  var _foo; 

  // create the object we want, w/ the closure
  var obj = {

    get foo(){
      return _foo;
    },

    set foo(val){
      _foo = val;
    }

  };

  // send back the object
  return obj;
};

// create a prototype method on the FooObj
FooObj.prototype.doBar = function(){
  console.log("doing bar...");
}

// use the FooObj constructor
var obj = new FooObj();

obj.foo = "bar";
console.log(obj.foo); // => "bar"

// try to use the prototype method
obj.doBar(); // TypeError: obj.doBar is not a function

5.js

function FooObj(){

  // hide the backing variable w/ a closure
  var _foo; 

  // define the property using "defineProperty"
  Object.defineProperty(this, "foo", {
    get: function(){
      return _foo;
    },
    set: function(val){
      _foo = val;
    }
  });

};

// create a prototype method on the FooObj
FooObj.prototype.doBar = function(){
  console.log("doing bar...");
}

// use the FooObj constructor
var obj = new FooObj();

obj.foo = "bar";
console.log(obj.foo); // => "bar"

// try to use the prototype method
obj.doBar(); // => "doing bar..."

6.js

// Symbol for attribute storage
var _fooAttr = Symbol("foo");

// empty constructor function
function FooObj(){ };

// define the "foo" property on the prototype
Object.defineProperty(FooObj.prototype, "foo", {
  get: function(){
    return this[_fooAttr];
  },
  set: function(val){
    this[_fooAttr] = val;
  }
});

// create a prototype method on the FooObj
FooObj.prototype.doBar = function(){
  console.log("doing bar...");
}

// export as a commonjs module
module.exports = FooObj;

7.js

var FooObj = require("fooObj");

// use the FooObj constructor
var obj = new FooObj();

// can still use the prototype method
obj.doBar(); // => "doing bar..."

// set the "foo" property
obj.foo = "bar";
console.log(obj.foo); // => "bar"

// can i modify the underlying obj.foo, directly?!
obj[Symbol("foo")] = "mod";

// ... no, I can't, because the symbol use hides it!
console.log(obj.foo) // => "bar";

8.js

var FooObj = require("fooObj");

// use the FooObj constructor
var obj = new FooObj();

// get the original symbol used for the property
var fooAttr = Object.getOwnPropertySymbols(obj)[0];

// modify it directly
obj[fooAttr] = "mod again";

// and how the underlying store is changed
console.log(obj.foo); // => "mod again"