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:

function driversWithRevenueOver(driver, revenue) {
  return driver.filter(function(person) {  // <-- return here
    return 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 boolean

console.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.

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

With arrow function it will look more clean.

const driversWithRevenueOver = (driver, revenue) => 
    driver.filter(person => person.revenue >= revenue);

Solution 3:

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

function driversWithRevenueOver(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:

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

function driversWithRevenueOver(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.

const driversWithRevenueOver = (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.

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

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