Higher Order Arrow Functions Problem ES6

JavaScript
1

Tell us whIat’s happening:

Is there a better way of doing this? I’m working on a problem in the ES6 section of the beta curriculum and the lesson suggests using map, reduce or filter (had to do a fair bit of googling to get my head around these - I find it a bit odd that they’re expected to be used before they come in the functional programming section of the curriculum.

The problem is:
Use arrow function syntax to compute the square of only the positive integers (fractions are not integers) in the array realNumberArray and store the new array in the variable squaredIntegers.

Essentially, my code passes the tests for that lesson but I’m wondering if there’s a neater/shortermore concise way of doing this? I feel like there ought to be way to do the whole thing with filter, but I’ve not been able to come up with it.

Thanks!

Your code so far



const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
  "use strict";
  // change code below this l.ine
  const ints = arr.filter((val) => (val === Math.floor(val)));
  const squaredIntegers = ints.map((num) => num*num);
  // change code above this line
  return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36.

Link to the challenge:

2

You can chain filter and map:

const squaredIntegers = arr.filter(val => val === Math.floor(val))
  .map(num => num * num);

You can even return the chain itself:

return arr.filter(...).map(...);
1 Like
3

You CAN chain the filter and map, but then your almost going thru the array twice.

I personally don’t believe you can do this with just filter. But you can do this with reduce and as @kevcomedia said, you can directly return this array.

const squareList = (arr) => arr.reduce((acc, num) => {
  if (num === Math.floor(num)) {
    acc.push(num*num);
  }
  return acc;
}, []);

Here’s the docs on reduce.

It’s not super elegant, but will only go through the array 1 time, rather than possibly 2 times when using map and filter. (There is a 1 line solution, but its really tricky and complex)

2 Likes
4

I see that above code shows that they have completely altered or changed already existing code from challenge. But without changing the existing code I have updated the code and it’s working fine but how can I update the return squaredIntegers to output the result.

Here is my code.

const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
  "use strict";
  // change code below this line
  const squaredIntegers = arr;
  squaredIntegers.filter(num => Number.isInteger(num * num));
  // change code above this line
  return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);
5

filter doesn’t modify the array in place, it returns a new array

so you can either do squaredIntegers = squaredIntegers.filter(etc) or just simply return squaredIntegers.filter(etc)

6

However, .filter doesn’t alter the elements it iterates over, so a filter isn’t enough here. As suggested above, a .reduce would be a better idea (if you want to do it with one loop, otherwise a .map can be chained on the .filter.)

As .filter returns a new array, you don’t have to assign arr to squaredIntegers. Furthermore, assigning doesn’t really matter, because arrays are reference variables, so if you’d change squaredIntegers, arr would change as well.