Javascript function returning undefined even though console.log shows correct value

Issue

I've checked other questions that seem to be duplicates but none of them have solved my problem. I have this simple function that loops through an array of rule objects and returns the one with the matching "type":

$ctrl.findRule = function(ruleName){
    $ctrl.rules.forEach(function(rule){
        if(rule.type === ruleName){
            console.log("returning rule: " + rule.type);
            return rule;
        }
    });
    return null;
};

I call this function as follows:

var wordCountRule = $ctrl.findRule("word_count");
console.log(wordCountRule);

I see on the console returning rule: word_count and then the console.log(wordCountRule) displays undefined. I have tried everything and I have no idea why this is happening.

Thanks!

Solution

The issue is because you're returning the value from the inner forEach handler function, not your outer findRule() function.

To fix this you could define a variable to hold the return value and amend that within the inner scope:

$ctrl.findRule = function(ruleName) {
  var returnVal = null;
  $ctrl.rules.forEach(function(rule) {
    if (rule.type === ruleName) {
      returnVal = rule;
    }
  });
  return returnVal;
};

However you should note that it you're looking for a single value you can use find() directly, without the need to loop explicitly:

$ctrl.findRule = function(ruleName) {
  return $ctrl.rules.find(function(rule) {
    return rule.type === ruleName;
  });
};

Taking the above example a step further, by using ES6 syntax it can be reduced to just this:

$ctrl.findRule = ruleName => $ctrl.rules.find(rule => rule.type === ruleName);

Answered By - Rory McCrossan