Setting variable in outer scope from inside a promise

Question

I'm trying to update a value outside of the scope of a promise function but am having difficulty wrapping my head around how to do so. I thought setting self = this would correct scope issues as suggested here, but self.value is still 0 outside of the scope of the promise. The relevant code is below.

window.App = {
     foo: function() {
          var self = this;
          self.value = 0;

          self.func1 = function() {
               func2().then(function(result1) {
                    return func3(result1);
               }).then(function(result2) {
                    self.value = result2;
               })
          }
     },
     bar: function() {
          var fooObject = new this.foo();
          fooObject.func1();
     },
     baz: function() {
          var fooObject = new this.foo();
          func4(fooObject.value);
     }
}

How would I be able to set the value of self.value inside the promise? I would like to access this value later on in the code within App via foo.value.

Feel free to simply use arrow functions instead of the `self = this` antipattern, arrow functions are great — CertainPerformance, Jun 21 '18 at 10:36
Also, the syntax is invalid - you can't call `.then` on a function expression (and you have mismatched parentheses) — CertainPerformance, Jun 21 '18 at 10:38
@CertainPerformance I can't? doesn't this just assign result to be the value returned by func2() after it has been executed? Also yeah sorry about the mimatched brackets, I didn't copy+paste to try and keep things simple — akivjh, Jun 21 '18 at 10:46
I can see that App.foo is function ... how can you access it like App.foo.value ..?? — Praveen N, Jun 21 '18 at 10:46
`after it has been executed?` Yes, but you'd have to turn the whole thing into a function for that. (or, you'd have to immediately invoke the first function, but then `func1` would be a `Promise`, not a function) — CertainPerformance, Jun 21 '18 at 10:48
@PraveenN sorry about that! I would be calling it inside window.App, so I would only need to call foo.value. Unless I can't just assign it an object like that since it's a function? I've been able to do foo.func1() just fine so I thought I could do foo.value as well. I'm new to js so bear with me — akivjh, Jun 21 '18 at 11:03
@CertainPerformance you're right, in my attempt to simplify I actually made errors. I fixed it and now it represents exactly what I need to do — akivjh, Jun 21 '18 at 11:10
`self.this` will work as expected, and "*self.value is still 0 outside of the scope of the promise*" is not because of a reference problem but rather because promises are asynchronous. Show us where you are calling `func1` and where/when you are accessing `.value`. — Bergi, Jun 21 '18 at 11:30
Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — zero298, Jun 22 '18 at 02:13
@akivjh But where are you *calling* `App.bar` and `App.baz`? Also notice that you have two different `fooObject`s created by two constructor calls, so it *cannot* work to access the result `.value` on one of them after calling `.func1()` on the other. — Bergi, Jun 22 '18 at 08:15
@Bergi yeah I think having 2 different objects was the issue, I used the callback function method in the link posted by zero298 to do what I need to — akivjh, Jun 23 '18 at 16:29

score -2 · Answer 1 · answered Jun 21 '18 at 11:07

Here is an example of promise that I tried to build like your code:

window.App = {
   foo: function() {
        var self = this;
        self.value = 0;
        this.func2 = function(){
          return 1;
       }

        self.func1 = function(){
          return new Promise((resolve, reject) => {
               console.log("before execute value: " + self.value);
               resolve(self.func2());
          }).then(function(result) {
               self.value = result;
               console.log("promise then value: " + self.value);
          });
        }
   }   
}
var o = new window.App.foo();
var promise = o.func1();
console.log("outside value: "+o.value);
promise.then(function(){
  console.log("outside promise then value: "+o.value);
})

Setting variable in outer scope from inside a promise

1 Answers1