Higher Arrow Functions

JavaScript
1 
Can someone give me a clear and detailed explanation of this line:**

const squaredIntegers = arr.filter( (num) => num > 0 && num % parseInt(num) === 0 ).map( (num) => Math.pow(num, 2) );**

to me?


I do not clearly understand how the order works. I know it goes from right to left but I what is the value of "num" to first calculate Math.pow(num,2), could this [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2] be the value of num? If so, this will be the result on the browser: Math.pow(4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2,2);
2352.5342310339265 //result on the browser**

const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];
const squareList = (arr) => {
  "use strict";
  // change code below this line
  const squaredIntegers = arr.filter( (num) => num > 0 && num % parseInt(num) === 0 ).map( (num) => Math.pow(num, 2) );
      return squaredIntegers;
  // change code above this line
  return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);
2

It actually reads from left to right starting with the filter method.

First, filter is looping over the array and only returning even integers above 0.

[4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2].filter( (num) => num > 0 && num % parseInt(num) === 0 )
// this will return a new array that looks like this [4, 42, 6]

When map runs it will be looping over this new filtered array. It will modify each number in the array to be the number to the power of 2.

[4, 42, 6].map( (num) => Math.pow(num, 2) )
// this will return a new array that looks like this [16, 1764, 36]

In summary what’s happening here is that array methods are being chained, each one doing something different with the array. note that these array methods loops over every item in the array, num is referring to the current number being looped over

1 Like
3

const squaredIntegers = arr.filter( (num) => num > 0 && num % parseInt(num) === 0 ).map( (num) => Math.pow(num, 2) );**

So whenever you see something like this you can break it down usually by the methods.
There’s two here: .filter() & .map()

So if you don’t know what either those are then there lies your problem. Fortunately for you,. I’m bored…

Let’s begin with the first part:
arr.filter( (num) => num > 0 && num % parseInt(num) === 0 )

From scanning this you may have realized another keyword parseInt so you’ll have to know what that does too.

filter is simple. It takes an array. In this case that’s arr. You could have easily done:
[4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2].filter() but instead,. arr was used.

So I’m just going to show from the view point of the actual array to help explain it. Play close attention because if you get filter,. then map will be easy.

So you have this:
[4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2].filter((num) => num > 0 && num % parseInt(num) === 0)

So filter only cares about what is true. That’s it. If your return is false,. .filter() doesn’t wanna hear about it. It only wants to know if your return is true.

So what you have here is condition 1 && condition 2.
num > 0 AND
num & parseInt(num) === 0;

So if either of these are false,. then as I’ve said before., .filter() doesn’t care about it.

So what if your return is true you may ask?? Well,. .filter() keeps that element.

So in this example im going to sub out num for their actually values:
1st condition:
[4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2].filter((num) => num > 0)
[4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2].filter((4) => 4 > 0) (4 is greater than 0) so far so good…

2nd condition:
[4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2].filter((num) => num % parseInt(num) === 0)
[4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2].filter((4) => 4 % parseInt(4) === 0) so far so good…

note: parseInt(4) is 4 and
4 % 4 === 0

a % b will always be 0 if a and b are the same.

Now let’s try the 2nd number in arr
[4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2].filter((5.6) => num > 0) this is true!

[4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2].filter((5.6) => num % parseInt(5.6) === 0)
this is false. it’s false because 5.6 % 5 !== 0 (a and b are not the same)
This effectively filters out non-decimal numbers.
So even though the first condition was true… true && false is false. So filter ignores 5.6.

So once filter has gone through all the elements in the array (numbers in this case) it creates a new array where the returns came back true and ignores the returns that came back false.

It makes sense when you think about it. It’s a filter. And what do filters do in life? Filter some sort of thing you dont want. The difference here is you decide what it filters after => (implying return)

With map it’s similar that it creates a new array and applies all values to the return.

So when you have [2, 5, 10].map((num) => Math.pow(num, 2));
this is just returning the power of 2 of each number in your array.

So in total,. you’re filtering numbers > 0 and numbers that are not decimals
Then youre getting the square of each of those numbers.

1 Like
4

Well explained. With your help I now understand what each piece of the code does. Thank you very much for taking the time to answer my post.

5

Thank you very much for taking the time to answer my post.

1 Like