Function With .filter() Returning Undefined Instead Of Filtered Array

I'm trying to understand javascript's Array.filter method. Why is the following code returning undefined? What am I missing? function driversWithRevenueOver(driver, revenue) { d

Solution 1:

As per the docs on Array.filter:

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

So in your case main issue is that your function does not return anything even though you have called Array.filter. So you need to:

functiondriversWithRevenueOver(driver, revenue) {
  return driver.filter(function(person) {  // <-- return herereturn person.revenue >= revenue)
  });
}

More info on the function you pass to the Array.filter also known as callback:

Function is a predicate, to test each element of the array. Return true to keep the element, false otherwise.

So you need to return a boolean value from the function.

A shorter version of this filter could simply be:

let data = [{ name: "Sally", revenue: 400 }, { name: "Annette", revenue: 200 }, { name: "Jim", revenue: 150 }, { name: "Sally", revenue: 200 } ]

let result = data.filter(x => x.revenue > 250)  // <-- function returns booleanconsole.log(result)

Solution 2:

You need to return the result of filter() from the function. Also you should return true or false from filter() not a value itself.

functiondriversWithRevenueOver(driver, revenue) {
  return driver.filter(function(person) {
    return person.revenue >= revenue
  });
}

With arrow function it will look more clean.

constdriversWithRevenueOver = (driver, revenue) => 
    driver.filter(person => person.revenue >= revenue);

Solution 3:

It's returning undefined because your never return to your outer function:

functiondriversWithRevenueOver(driver, revenue) {...}

While you do return within this function, you are returning to the inner-callback function placed within .filter(callback):

driver.filter(function(person) { <---- if (person.revenue >= revenue) {   | returns to callback (not driversWithRevenueOver)
    return person; ------------------|
  }
});

Thus, your driversWithRevenueOver is implicitly returning undefined (as you are not calling returning anything within it). So, you need to return the result of .filter(). Moreover, you also need to fix your return statement. The filter method will keep items in your original driver array if you return true, and remove it if you return false from within the inner callback. Thus you can simply return the evaluation of person.revenue >= revenue:

functiondriversWithRevenueOver(driver, revenue) {
  return driver.filter(function(person) {
    return person.revenue >= revenue;
  });
}

functiondriversWithRevenueOver(driver, revenue) {
  return driver.filter(function(person) {
    return person.revenue >= revenue;
  });
}

const res = driversWithRevenueOver(
  [{
      name: "Sally",
      revenue: 400
    },
    {
      name: "Annette",
      revenue: 200
    },
    {
      name: "Jim",
      revenue: 150
    },
    {
      name: "Sally",
      revenue: 200
    }
  ],
  250
);

console.log(res);

Solution 4:

You need to return the filtered array.

return driver.filter(...);

You can also make your code more concise like so - and note that filter just needs a Boolean response.

constdriversWithRevenueOver = (driver, revenue) =>  driver.filter(({ revenue: r }) => r >= revenue);

console.log(driversWithRevenueOver(
  [{name:"Sally",revenue:400},{name:"Annette",revenue:200},{name:"Jim",revenue:150},{name:"Sally",revenue:200}],
  250
));

Solution 5:

You need just one modification in your code, rest is good.

functiondriversWithRevenueOver(driver, revenue) {
  return driver.filter(function(person) { // you forgot to return the filtered arrayif (person.revenue >= revenue) {
      return person;
    }
  });
}

driversWithRevenueOver(
    [
      { name: "Sally", revenue: 400 },
      { name: "Annette", revenue: 200 },
      { name: "Jim", revenue: 150 },
      { name: "Sally", revenue: 200 }
    ],
    250
);