Javascript recursion within a class

Question

I am trying to get a recursion method to work in a class context. Within my class I have the following method:

    countChildren(n, levelWidth, level) {
    if (n.children && n.children.length > 0) {
        if (levelWidth.length <= level + 1) {
            levelWidth.push(0);
        }
        levelWidth[level + 1] += n.children.length;
        n.children.forEach(function (n) {
            this.countChildren(n, levelWidth, level+1);
        });    
    }
    // Return largest openend width
    return levelWidth;
}

However, when I use this method (which worked before when I just used it as function countChildren = ...) it can't... find (?) itself: Cannot read property 'countChildren' of undefined at the recursion.

Does anyone have any ideas?

That's because the callback for forEach has it's own scope, and sets the value of this to something other than the class. — adeneo
– adeneo, Commented Jul 17, 2017 at 15:09

krillgar · Accepted Answer · 2017-07-17 15:12:12Z

21

The problem arises because within your loop, this gets redefined to the inner function scope.

countChildren(n, levelWidth, level) {
    var self = this; // Get a reference to your object.

    if (n.children && n.children.length > 0) {
        if (levelWidth.length <= level + 1) {
            levelWidth.push(0);
        }
        levelWidth[level + 1] += n.children.length;

        n.children.forEach(function (n) {
            // Use "self" instead of "this" to avoid the change in scope.
            self.countChildren(n, levelWidth, level+1);
        });    
    }
    // Return largest openend width
    return levelWidth;
}

edited Jul 17, 2017 at 15:12

answered Jul 17, 2017 at 15:09

krillgar

12.9k6 gold badges56 silver badges91 bronze badges

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

7 Comments

colecmc Over a year ago

Good catch @krillgar.

Sumi Straessle Over a year ago

I'm not a fan of the that = this trick. There are constructs that are part of the language for this particular use case, mainly .bind() and arrow functions in ES6.

krillgar Over a year ago

@SumiStraessle I'm not a fan of this at all. OP seems to be newer to Javascript, so I didn't want to confuse them. I see you answered with that, so I won't append to my answer.

Sumi Straessle Over a year ago

No worries. I like arrow functions to solve the scoping hell problem, it also makes the code more readable.

krillgar Over a year ago

@SumiStraessle I haven't spent much time with them as my last project was server side. I'll take a look at using them with TypeScript next time I'm doing client side work as my enterprise work often still unfortunately needs to target IE.

|

Sumi Straessle · Accepted Answer · 2017-07-17 15:21:52Z

16

Try binding the method in the constructor.
Also, by using an arrow function for your forEach, you keep the scope of the class' this.

export class MyClass {
    constructor(){
        this.countChildren = this.countChildren.bind(this);
    }

    countChildren(n, levelWidth, level){ ... }


    countChildren(n, levelWidth, level) {
        if (n.children && n.children.length > 0) {
            if (levelWidth.length <= level + 1) {
                levelWidth.push(0);
            }
            levelWidth[level + 1] += n.children.length;
            n.children.forEach( n => { // arrow function do not need to rebind this
                this.countChildren(n, levelWidth, level+1);
            });    
        }
        // Return largest openend width
        return levelWidth;
    }
}

edited Jul 17, 2017 at 15:21

answered Jul 17, 2017 at 15:09

Sumi Straessle

1,14612 silver badges23 bronze badges

5 Comments

David Montgomery Over a year ago

This may work, but I found @krillgar's answer to be the most straightforward. Thank you for replying.

Sumi Straessle Over a year ago

See my comment on the that = this trick. Since you use classes, you are using ES6 syntax, which means you have access to arrow functions, which do not rebind the scope of this. Try it too. Your code will thank you.

David Montgomery Over a year ago

Hmmm... okay I will have a second look then

Sumi Straessle Over a year ago

In case you want some documentation

David Montgomery Over a year ago

I tried it and this works too. I agree it looks nicer.

CDM · Accepted Answer · 2018-06-10 02:27:28Z

1

the variable this Gets redefined within:

the inner scope of a for loop
within a inline function declariation
within asynchronous function calls.

I agree with krillgar with the declaration of self. it fixed my problem with an asynchronous call.

obj.prototype.foo = function (string){
   var self = this;
   if(string){ do something }
   else
   setTimeout(function(){
     self.foo("string");
     }, 5000);
}

answered Jun 10, 2018 at 2:27

CDM

5165 silver badges9 bronze badges

Comments

ThomasK · Accepted Answer · 2017-07-17 15:15:57Z

0

The this inside the foreach than the this in the class. In your case, this refers to the current element being iterated.

you need to bind the scope.

n.children.forEach(function (n) {
   this.countChildren(n, levelWidth, level+1);
}.bind(this));

answered Jul 17, 2017 at 15:15

ThomasK

3001 silver badge8 bronze badges

Comments

Nathan Montez · Accepted Answer · 2017-07-17 15:09:38Z

-2

Try using .call() to invoke the function. That way you can specify the context directly.

Like this:

~~this.countChildren.call(this, n, levelWid);th, level+1~~

Edit: Noticed my error, what you should really do is bind the anonymous function:

like this:

  n.children.forEach(function (n) {
    this.countChildren(n, levelWidth, level+1);
  }.bind(this));

answered Jul 17, 2017 at 15:09

Nathan Montez

4693 silver badges8 bronze badges

Collectives™ on Stack Overflow

Javascript recursion within a class

5 Answers 5

7 Comments

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related