Javascript ES6: Recursive function call from foreach loop fails

Question

I am new to javascript.

class ExpansionPath {
    expandPipelineNodes()
    {
        this.expandPipelineNode(this._rootNodes);
    }
    expandPipelineNode(node)
    {
        let bPipeline = false
        _.each(node.children,function(child){
            bPipeline |= this.expandPipelineNode(child);
        })

        ...
    }
}

When I call the function expandPipelineNodes, it calls expandPipelineNode(node) which is fine. But when it goes inside the foreach loop, the program crashes. I have debugged the program and it showed that this becomes to undefined in the forEach loop. I also tried the following code:

    node.children.forEach(function(child){
        bPipeline |= this.expandPipelineNode(child);
    })

But the problem remains. How can I solve this problem in javascript?

You're losing scope of `this` inside the loop, you'll have to bind it — Sterling Archer, Mar 07 '18 at 20:23

dfsq · Accepted Answer · 2018-03-07T20:32:25.413

2

The scope inside callback is different to the scope outside. Simple way to preserve lexical scope is to use arrow function:

_.each(node.children, (child) => {
    bPipeline |= this.expandPipelineNode(child);
})

You could also use Function.prototype.bind:

_.each(node.children, function (child) {
    bPipeline |= this.expandPipelineNode(child);
}.bind(this))`

but this is more verbose.

There are couple of more ways to make it work but they are not cool in 2018.

edited Mar 07 '18 at 20:32

answered Mar 07 '18 at 20:23

dfsq

191,768
25
236
258

well, in your case you could replace `.bind(this)` with `,this`, but the lodash option doesn't have such functionality – Kevin B Mar 07 '18 at 20:28
Thanks. So I have now read that an arrow function does not have its own this. So it always preserves the this of the main function? – Code Pope Mar 07 '18 at 20:29
1

Yes, it it has context of surrounding environment, lexical. – dfsq Mar 07 '18 at 20:31
I don't know why someone has downvoted your answer. Thank you very much – Code Pope Mar 07 '18 at 20:33
I'm sorry, I didn't realize that `var that = this` wasn't _cool in 2018_ ;) – Patrick Roberts Mar 07 '18 at 20:39
@PatrickRoberts haha, well extra variable for no good reason, if you can anyway use `=>` :) – dfsq Mar 07 '18 at 20:47

Javascript ES6: Recursive function call from foreach loop fails

1 Answers1