Recursive function always returns undefined at the end. How to fix?

Question

When trying to return the amount of children containing :host found in an object, the function always returns undefined.

const plugin = stylelint.createPlugin(ruleName, isEnabled => {
  let childrenFound = 0;
  childrenFound = lookForChildren(rule.nodes, childrenFound);
  console.log(childrenFound); // Wrong Value: Always undefined
}


let lookForChildren = function(nodes, childFound) {

  if(childFound > 1) {

    console.log(childFound);

    return childFound;

  }

  nodes.forEach(node => {

    if (node.selector != undefined) {

      const selector = node.selector.replace(":host-context", "");

      if (selector.includes(":host")) {

        childFound++;

        return lookForChildren(node.nodes, childFound);

      } else {

        return lookForChildren(node.nodes, childFound);

      }

    }

  });
// This returns the wrong value so i deleted it
return childFound;
};

But it should return the childFound variable which is only return when it is greater than 1.

This function checks if a scss document contains a selector with more than one :host selector because the browser compiles it differently than expected.

When childFound is greater than one:

Expected: return childFound // Childfound is 2 or higher

Actual: childrenFound is always undefined.

the return is `undefined` in the case of `node.selector == undefined` — Jaromanda X, Sep 23 '19 at 09:17
`return` statement in `forEach` callback only returns for `forEach`, not the outer function. Maybe you should use `for...of` loop. — Harun Yilmaz, Sep 23 '19 at 09:19
Also see: https://stackoverflow.com/questions/34653612/what-does-return-keyword-mean-inside-foreach-function — Harun Yilmaz, Sep 23 '19 at 09:20
@SaurabhAgrawal—it's in the parameter list of the anonymous function assigned to *lookForChildren*. — RobG, Sep 23 '19 at 09:31
@JaromandaX But i return childFound which always has a number value when i logged in various places. — Rowa, Sep 23 '19 at 09:34
@HarunYilmaz Thank you Harun, seems like using forEach in recursions isn't useful. — Rowa, Sep 23 '19 at 09:49

score 1 · Answer 1 · answered Sep 23 '19 at 09:53

1

Using for...to solved my problem. Thanks to @HarunYilmaz for pointing that out and thanks to everyone for helping me out.

answered Sep 23 '19 at 09:53

Rowa

21
4

score 0 · Answer 2 · answered Sep 23 '19 at 09:28

You should return value inside your function and not outside of or below that function just change position of return statement inside the last curly brace. check below code:

const plugin = stylelint.createPlugin(ruleName, isEnabled => {
  let childrenFound = 0;
  childrenFound = lookForChildren(rule.nodes, childrenFound);
  console.log(childrenFound); // Wrong Value: Always undefined
}


let lookForChildren = function(nodes, childFound) {

  if(childFound > 1) {

    console.log(childFound);

    return childFound;

  }

  nodes.forEach(node => {

    if (node.selector != undefined) {

      const selector = node.selector.replace(":host-context", "");

      if (selector.includes(":host")) {

        childFound++;

        return lookForChildren(node.nodes, childFound);

      } else {

        return lookForChildren(node.nodes, childFound);

      }

    }

  });
return childFound;
};

// This returns the wrong value so i deleted it

That was a typo in my code. Sorry about that. The return statement will return a wrong value. For example it should return 2 but returns 1. I'm building a for...to loop now. See if that will work — Rowa, Sep 23 '19 at 09:39

Recursive function always returns undefined at the end. How to fix?

2 Answers2