Write Higher Order Arrow Functions Is Confusing

JavaScript
21

what we can understad from this code snippet:

  1. FBPosts is an array, and I think it means “Facebook posts”
  2. we use post as name of the callback parameter, so we refer to the current element of the array as post
  3. post has properties, so it is an object (as we use post.shares, post.likes etc, we know it has properties called shares, likes and thumbnail)
  4. we want to keep posts that have a thumbnail (post.thumbnail !== null), that have been shared more than 100 times (post.shares > 100) and liked more than 500 times (post.likes > 500)

I agree that it is too complex for newbies that do not have any familiarity with interpreting code. The challlenge has been even moved to the functional programming section looking at the github repository! and this code snippet has been totally removed.

22

here I have no idea about, and I am content to just know the introduction of the wikipedia article

Since map builds a new array, using it when you aren’t using the returned array is an anti-pattern;

an anti-pattern is to use something in the wrong way. for example, if you used map to do something like:

let arr = [];
[1,2,3,4,5,6].map(x => {if (x%2 === 0) {arr.push(x);});

this is an anti-pattern, because you are using map to push certain elements to an other array. as we have learned, map returns an array with each element coming from the array on which it is used but changed using the callback. here instead it is completely misusing the thing. (if you want to do something like this, use forEach(), but the most appropriate method in this case would be filter() - would you be able to use filter to keep only the even values of an array?)

you will meet this later, and it can be a bit complex to understand
but, returning to methods, this refer to the object on which the method is used
example: myDatas.myMethod()
when you are creating myMethod(), this refers to myDatas

I think it is everything… did I miss something?

23

OK, I think I understand your explanation regarding ‘reduce.’ Thank you.

Yes, I’m still confused about ‘call’ vs ‘invoke.’

OK, I think I understand that ‘provided’ here just refers to the argument we are passing in (providing?) to the (‘outer’?) function and that the argument we are providing (passing in?) is also a function which is the ‘callback?’ Part of my confusion comes from having difficulty figuring out when a word is being used as just an English word (‘provided’ in this case is used as we would normally use it in English I think) and when a word or phrase is being used as a computer programming or JS term (e.g. ‘callback’ or ‘argument’ or ‘passing in’ or ‘function’). It’s hard to figure out whether the word just means what it does in English or whether it’s being used in a special way.

I’m still unclear about what they mean by ‘how powerful arrow functions are.’ To me, fewer characters and faster to write does not necessarily mean more powerful. Do arrow functions allow us to do something that we could not do with regular function syntax? Do they run ‘faster?’ And there is a lot of info out there on when arrow functions can be problematic. So I’m still not clear about what they mean by ‘powerful.’

OK, I do understand that we are not defining the method, just using it here, so we are not using arrow functions as methods, we are using the methods within an arrow function. Did I get that right?

24

You stated,
what we can understand from this code snippet:

  1. FBPosts is an array, and I think it means “Facebook posts”

How do we know it is an array, from the info in the snippet?

  1. we use post as name of the callback parameter, so we refer to the current element of the array as post

Why do we use post as the name of the callback parameter and why do we refer to the current element of the array as post? Where does this word ‘post’ come from? How do we know to use post and not some other word? How does the function know that post refers to an element?

  1. post has properties, so it is an object (as we use post.shares , post.likes etc, we know it has properties called shares , likes and thumbnail )

I understand, got it.

  1. we want to keep posts that have a thumbnail ( post.thumbnail !== null ), that have been shared more than 100 times ( post.shares > 100 ) and liked more than 500 times ( post.likes > 500 )

OK I think I understand.

25

OK, I think I understand the general idea of polyfill and that I don’t really need to have a good understanding of it in order to solve this challenge. Thanks for the wikipedia link.

I’m not sure I really understand ‘antipattern’ and the ‘this’ keyword but from what I do understand from your explanation I’m thinking I don’t really need to understand them to solve this challenge.

Also, in looking at the code solution, they use math.pow - I don’t think this has been mentioned at all up to now in the JS curriculum. I looked it up and I understand what it is and how it works and why we would use it in the solution - but looking at the instructions, how would I know that such a thing as math.pow exists?

26

that’s correct!

filter is an array method. it can be used only on arrays

it is arbitrary what name to use for a function parameter, same for a variable name. Here it is post because it is descriptive (if those are actually facebook posts at least…)
the method call the callback once for each array element, and uses that element as function argument, so the current array element for each call is post. the function doesn’t know that post refers to an element, it just knows that the argument passed in can be referenced as post, it is the method that deals with calling the function for each element

you can find out by googling, but that’s just a way. You can square n by doing n * n (and you have already met in the curriculum the multiplication operator)
Same for the filter callback, you can create it with just the things you met this far in the curriculum

27

this is going deep in theory, it can be a rabbit hole, above all as you are just doing basics
but, eventually you may need to return back to this, or find some good javascript book that goes deep in this and many other things (there are some available for free online, like the You Don’t Know JavaScript series, and Eloquent JavaScript), other courses, etc. - your learning is just starting with Free Code Camp

28

Thanks for all the help! With all of the info and links you provided, I do have a better understanding of JS in general and also I think I understand this challenge and the solution. I really appreciate your taking the time to provide these explanations and that you tried to address all of my questions.

1 Like
29

Got it to work like this. it passed so it must be ok!

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 = realNumberArray.filter(element => element > 0 && Number.isInteger(element)).map(element => element * element);
  // change code above this line
  return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);
1 Like
30

yes! you are just missing one thing!
when you are working inside a function it is important you use the function parameter, so that the function is reusable!

the realNumberArray is passed in the function in the function call
so you can use function parameter to reference it:

31

Hello again! thanks for the feedback, but I don’t understand what you mean here. What is the function parameter? And where do I need to use it?

32

you already saw what parameters are in a function in the fcc curriculum
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments

they are what you need to use to make reusable functions!

function myFunc (/* function parameters here */) {   
   /* function body */
}

myFunc( /* function arguments */)
33

OK, got it, I should use arr.filter instead of realNumberArray.filter, right?
thanks for the tip!

1 Like