Solving complex problem with HOF

JavaScript
#1

Tell us what’s happening:

Can someone tell me why the filter function I wrote is not doing anything to my array? Also, am I on the right track thinking that this problem can be solved solely with the filter function?

Thanks!

Your code so far


const squareList = arr => {
// Only change code below this line
arr.filter(number => {
  if (number > 0 && Number.isInteger(number))
  return (number * number)
})

return arr;
// Only change code above this line
};

const squaredIntegers = squareList([-3, 4.8, 5, 3, -3.2]);
console.log(squaredIntegers);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36.

Challenge: Use Higher-Order Functions map, filter, or reduce to Solve a Complex Problem

Link to the challenge:

#2

filter doesn’t change the original array, it returns a new array, you need to store that output somewhere to use it

#3

You have a couple misapprehensions here.

First of all, the filter method does not alter the original. So, you’re going to either have to save the result in a variable or return it directly.

Secondly, this return (number * number) isn’t doing what you think it is doing. All that return value is for is so that filter knows whether or not to keep the original element, if the return value is truthy. This will save the original, not the square. Nothing you can do can change that element, at least with filter.

With some adjustment, this filter will remove the negatives and non-integers, but to square them, you will need another method (possibly chained). It could be done with one method too, using a different method (not that that’s necessarily better, just FYI).

Let us know if this hint is insufficient.

#4

I feel like I’m getting a bit closer here. can you help with why my map function isn’t working?

const squareList = arr => {
  // Only change code below this line
  

  var newArr = arr.filter(number => {
    if (number > 0 && Number.isInteger(number))
    return (number)
  })
  .map(number => {
    number * number
  })

  return newArr;
  // Only change code above this line
};
``
#5

Yeah, that’s one way to do it, kind of the first one at which I was hinting.

You just have one problem:

  .map(number => {
    number * number
  })

There are two ways to return values from an arrow function - you need to pick one of them and implement it. RIght now, this is accidentally returning undefined.

When I fix that, the code passes for me.

#6

thanks for your help! I got it to work. I have been a bit forgetful about including “return” when implementing HOF. Can you help me understand what the alternate solution you were talking about is?

#7

Do you mean alternate solutions to the challenge? There are a couple of different things that could be done.

  1. Using forEach (or a for loop) to do the checks and push the squared value onto an answer array.
  2. Use reduce for the same idea, without a push. This can actually be done in one line, without an array to store the answer.

That 's all I can see for now.

I just noticed in the instructions that you can’t use for. I suppose you could “cheat” and use while… But it seems like reduce is the other option. The reduce method confuses a lot of beginners, but in some ways it is the the most powerful prototype method - it’s the only one you can use to duplicate what the others do.