JavaScript factory function modify variable outside closure scope

Question

Why variable "OnDone" stays unmodified inside factory scope?

const foo = () => {
  let OnDone = null;

  const Do = function() {
    console.log(OnDone);
    if (typeof OnDone === 'function')
      OnDone();
  }

  return {
    Do,
    OnDone
  };
}


let f = foo();
f.OnDone = () => {
  console.log('OnDone');
};

f.Do();

Outputs null. https://jsfiddle.net/xe4j9hmc/6/

Answer 1

let onDone = null defines a variable onDone inside foo function scope not a property, but when you do

f.onDone it adds value to onDone property on f which can be accessed using this.onDone but in your code you're using onDone which still refers to onDone defined in local scope

---

You probably wanted to do this

function foo(){
  this.OnDone = null;

  const Do = function() {
  console.log(this.OnDone);
  if (typeof this.OnDone === 'function')
    this.OnDone();
  }

  return {Do, onDone:this.OnDone};
}


let f = new foo();
f.OnDone = () => {
  console.log('OnDone');
};

f.Do();

Answer 2

   return { OnDone };

equals ...

   return { onDone: onDone };

or in other words: The local variable onDone gets resolved, and the object reference it resolves to gets stored in the returned objects onDone property. Both will reference the same thing, * but* if you reassign either the local variable or the objects property, this will change the * reference*, thus the property and the variable will reference different things then.

To resolve the problem, change the object itself:

 const context = { onDone }
 context.Do = function () {
   // Access context.onDone here
 };

 return context;

Or, as an alternative, as f.Do() will call Do with this being f, you can access the objects property as this.OnDone from within the Do function.

Answer 3

The other answers already explained what the problem is but I figured it would be useful to see a simplified example of the issue:

var foo = null;
var obj = {foo};
obj.foo = 42;
console.log(foo);

Here as well, logging the value of foo will print null. Assigning a new value to the obj.foo property does not change the variable foo. That's because when we create the object with {foo}, a copy of the value of foo is assigned to the property.

In your specific case you want the assignment to the property to also change the variable. You can do this via a setter (and we add a getter for good measure):

const foo = () => {
  let OnDone = null;

  const Do = function() {
    console.log(OnDone);
    if (typeof OnDone === 'function')
      OnDone();
  }

  return {
    Do,
    get OnDone() {
      return OnDone;
    },
    set OnDone(value) {
      OnDone = value;
    },
  };
}


let f = foo();
f.OnDone = () => {
  console.log('OnDone');
};

f.Do();

Now when you assign to the property f.OnDone we are really executing the setter function which in turn updates the variable value.