Variable scope in callback function

Question

I ran into a problem with my JavaScript code.

I have a class MyClass and added function myFunction to its prototype.

MyClass.prototype.myFunction = function(file){
    if(some condition){
       fs.exists("./" + file, function(exists){
           if(exists)
               console.log(this.someValue);
               /* lot of other code */
           else
               /* do something else */
    });
    }else{
        /* do something */
    }
}

My problem is the scoping of this.someValue (as an example I want to just print it). Every time exists equals true the console logs undefined but it is not. If I would print it outside of fs.exists() then it has a value so I guess it is a scoping problem.

How can I access this.someValue in this sample?

Mulan · Accepted Answer · 2013-07-08 15:08:04Z

4

You have to .bind your inner function

MyClass.prototype.myFunction = function(file){
    if(some condition){
       fs.exists("./" + file, function(exists){
           if(exists)
               console.log(this.someValue);
               /* lot of other code */
           else
               /* do something else */
    }.bind(this));
    }else{
        /* do something */
    }
}

This can be rewritten to be cleaner

MyClass.prototype.myFunction = function myFunction(file){
  if(some condition){
    fs.exists("./" + file, this.doSomething.bind(this));
  }
  else{
    // do something else
  }
}

MyClass.prototype.doSomething = function doSomething(exists) {
  if(exists) {
    console.log(this.someValue);
    // lot of other code
  }
  else {
    // do something else
  }
}

I personally like this solution because it allows you to maintain excellent code composition and prevents you from nesting function(){ function(){ function(){ ... }}}. It also prevents you from having a bunch of var that = this; or var self = this; variables floating around having you wonder which scope is which.

.bind is slower, yes, but as minitech points out, it's certainly not going to be your bottleneck when compared to file access.

edited Jul 8, 2013 at 15:08

answered Jul 8, 2013 at 14:50

Mulan

136k35 gold badges240 silver badges276 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

moka Over a year ago

Binding is one of the slowest ways of passing scope pointer into another function. And has slightly different application purpose.

Ry- Over a year ago

@MaksimsMihejevs: Slow relative to file access? Don’t micro-optimize…

moka Over a year ago

Not relative to file operation, but slow for such simple operation. In fact it is dramatic difference, please check out here: jsperf.com/bind-vs-closure-setup/6

deoxxa Over a year ago

@MaksimsMihejevs the original question, and this answer, both use it in the context of a fs.exists() callback. If it was in the middle of a tight loop, I'd agree with you, but when it's mixed in with file I/O the performance penalty background noise at worst, and .bind() does result in more easily understandable code (this all the way down).

TorbenJ Over a year ago

i like your solution too. in fact it is much more readable for this use case :) I'll test it too but I think it is not that nice for bigger functions because of scrolling :)

|

joewhite86 · Accepted Answer · 2013-07-08 14:48:44Z

3

MyClass.prototype.myFunction = function(file){
  var that = this;
  // some lines of code later...
       console.log(that.someValue);
}

answered Jul 8, 2013 at 14:48

joewhite86

4183 silver badges6 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:56:32Z

2

As this - is keyword that is defined by scope of function and responds to owner or caller of a function. So you might store its pointer in another variable:

MyClass.prototype.myFunction = function(file) {
  if(some condition) {
    var self = this; // create variable with pointer to 'this'
    fs.exists("./" + file, function(exists) {
      if(exists) {
        console.log(self.someValue); // we can access it to parent scope variables
        /* lot of other code */
      } else {
        /* do something else */
      }
    });
  } else {
    /* do something */
  }
}

As well check out this brilliant topic: How does the "this" keyword work?

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Jul 8, 2013 at 14:50

moka

23.1k4 gold badges53 silver badges67 bronze badges

1 Comment

Mulan Over a year ago

{ location: London" is invalid, fwiw

Collectives™ on Stack Overflow

Variable scope in callback function

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related