What does it really mean by 'recycling' in this code snippet?

Question

On MDN I found the following code snippet, with comment saying 'recycling same object':

// recycling same object
function withValue(value) {
  var d = withValue.d || (
    withValue.d = {
      enumerable: false,
      writable: false,
      configurable: false,
      value: null
    }
  );
  d.value = value;
  return d;
}

Could someone use plain language explain a little bit on what this piece of code really does? It's not so obvious for a beginner. Thanks.

And the source url: enter link description here

Also, instead of putting d on withValue function itself, why not putting it on the prototype of withValue , like:

var d = withValue.prototype.d || ( ...

What's the main considerations here?

Answer 1

The first time you invoke the function, it will create a new variable 'd' and assign it to itself. In OOP, the function withValue would be a like class and d would be like a static member.

console.log(withValue.d);    //undefined
var x = withValue(5);
console.log(x.value);    //5
console.log(withValue.d.value);    //5
console.log(x === withValue.d);    //true

The variable x and the variable withValue.d are both references to the same object:

withValue.d.value = 1;
console.log(x.value);    //1

If I were to invoke withValue again, it would recycle or reuse the existing static member (withValue.d) and update its value:

var y = withValue(8);   
console.log(withValue.d.value, y.value, x.value);    //8 8 8
console.log(x === y,  x === withValue.d, y === withValue.d);    //true true true

Update: If withValue were:

function withValue(value) {
  var d = {
    enumerable: false,
    writable: false,
    configurable: false,
    value: null
  };
  withValue.d = d;
  d.value = value;
  return d;
};

Then each invocation of the function would create a new object:

var x = withValue(1);
var y = withValue(2);
console.log(withValue.d.value, y.value, x.value);    //2 2 1
console.log(x === y,  x === withValue.d, y === withValue.d);    //false false true

y.value = 999;
console.log(withValue.d.value, y.value, x.value);    //999 999 1

So now 2 objects are created - one referenced by y and withValue.d and the other by x . In the first case those three variables were accessing the same object.

Answer 2

It's given as aa helper function to define the property descriptor object used as the third argument of Object.defineProperty() tool.

In it's first run it assigns a default private property to the withValue function which forces Object.defineProperty() to add an immutable property which is not enumerable, not writable not configurable and with the value as passed to the withValue function.

So the following code;

var obj = {};
Object.defineProperty(obj, "newProp", withValue(10));
console.log(obj); // <- Object {newProp: 10}

will assign obj a property named newProp that is not enumerable, not writable not configurable and with the value 10.