Write Higher Order Arrow Functions Is Confusing

Write Higher Order Arrow Functions Is Confusing
0

Tell us what’s happening:
Did I miss something? I’ve completed the Basic JavaScript section, and I started on the ES6 stuff, but all of a sudden, you’re talking about anonymous functions and map/filter/reduce methods without any previous mentions of them in the lessons. Luckily I know what they are, but I’m thinking from somebody with absolutely no knowledge and experience of programming coming across this might be confusing as hell and might be rather off putting? Just a thought.

Link to the challenge:
-Can’t link your own links based on this default template yet, apparently-

1 Like

You haven’t missed anything. I am not familiar with this higher-end JS, and this challenge completely blew me out of the water. Came to the forums to see if others struggle with it, and found thread after thread of people wondering the exact same thing. As far as I can tell this is one of the most common challenges posted on the forums for help, and generally people agree it is unfair/not well designed. I can’t remember exactly, but I’m pretty sure a mod/developer has responded in the past that they are aware of the challenge. There’s a 7.0 version of freeCodeCamp coming soonTM, and they’re revamping all of their courses.

Edit: Wanted to clarify my reaction to it. Once I saw a guide on how this challenge is solved, I understood that the idea is to have people research these methods, understand them, and then implement them, which is a great skill for programming, no doubt! However, no challenge before this one, even in the HTML/CSS course, approaches the solution this way. Nothing prepares someone to think the way the challenge is asking you to in order to solve the problem. Great concept, terrible execution.

The challenge has been widely criticised by many (try searching for it on the forum, last one was like today or yesterday)

There is the new version on the beta version of the website, once the testing is finished it will be update also on the official site

https://www.freecodecamp.rocks/learn/javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions

1 Like

Come to think of it, the whole ES section is completely out of place. It talks about methods such as Array.slice() and the aforementioned Array.map() without telling you what they are. You’re suddenly thrown into the wild with no explanation on higher order functions or destructuring.

I learned stuff like destructuring last year or year before when I went through Andrew Mead’s Node.JS course and it flows with the material at hand and it made a lot of sense because it was introduced at the appropriate time and place. I was using them with no effort and was using them in my own projects.

After having a break from coding for a year or so, I can’t recall much about them and coming back to the new and ‘improved’ FCC and they suddenly start banging on about ES6 with no actual introduction is difficult for me; I can’t imagine what it’s like for somebody with zero technical background looking to switch careers or whatever.

I’m having difficulty with this challenge and the post/replies here are more or less summarizing what I’m thinking right now about this challenge. Does anyone have any further suggestions, other than waiting for an updated version of this challenge?

research the methods, try understanding what do they do

try solving it

ask for help if you get stuck

Hello, and thank you for your reply.

I’m sure you meant to be helpful, but I’ve already spent extensive time on this challenge (more than a few hours) searching and reading on FCC, searching and reading on google, and watching youtube videos, without gaining any understanding of what I’m supposed to do here. I’ve also previously spent time working on JS stuff on Codecademy. You mentioned, “ask for help if you get stuck,” - I’m stuck and asking for help.

What would be helpful is if you can direct me to some specific work on FCC or on the web, that would prepare me to understand this challenge. I am unable to understand the instructions, because I don’t seem to have an understanding of what a “higher order function” is (this has not been mentioned anywhere in my work on the FCC Basic JS or ES6) and I have no idea what map, filter and reduce are. You mentioned “research the methods” - but I don’t know what you mean by “methods.” There’s a lot of info out there on the web, but I’m thinking that FCC must have some info and exercises on these concepts, to prepare me for this exercise. Otherwise I have no idea where to start - it’s kind of like a wild goose chase, or looking for a needle in a hay stack to use some cliches.

Any ideas of where I could find relevant info, on FCC or elsewhere? I see your last post regarding this was on Mar 31, so I’m hoping that maybe you are aware of some updated info on FCC. (The link in your Mar 31 post throws a 404 error).

thanks again for your feedback and help.

the beta version of a website is notoriously unreliable

higher order functions are functions that accept other functions as arguments, like these methods (methods are object properties that are functions, so you call them like myDatas.myMethod())
these are the methods mentioned in this challenge, you may not need all of them

Thanks for the reply and the info.

Are you saying that the FCC ES6 part of the curriculum is a beta version? It doesn’t mention that anywhere.

Thanks for the explanation of higher order functions. I have watched some YouTube videos which have been helpful but unfortunately not enough for me to understand this challenge.

I have already reviewed the MDN docs you referenced and while they provide some helpful info they mention other concepts I don’t understand so I’m left with more questions than answers. It’s kind of like reading the encyclopedia which provides lots of info but no real instruction or guidance - and instruction and guidance is what I need right now as a learner. I even looked at the solution code hoping I could “reverse-engineer” some understanding but I was unable to make any sense out of it.

I’m just going to go with the idea (already mentioned in this thread by Dave-Melia) that “the whole ES section is completely out of place.” I guess I was just hoping that some improvements had been made to the curriculum since earlier this year but that seems to not be the case.

Thanks again for your willingness to help. I really appreciate that there are people out there who extend themselves a bit. Maybe I’ll try another part of the JS curriculum and come back to this later.

no, but the links i provided above was of a beta version of the site, which are notoriously unreliable

what is it that you don’t understand? you are saying “I don’t understand it at all”, but if you say what you understand and not understand you will get more precise answers

I did not say anywhere that “I don’t understand it at all.” And that’s not a fair conclusion to draw from the info I have provided thus far.

What I understand:
-This is an ES6 challenge to write higher order arrow functions
-A higher order function is a function that takes another function as its argument
-I am supposed to use arrow functions in the solution. I think I understand what arrow functions are.
-I have to use arrow function syntax to compute the square of only the positive integers in the array realNumberArray and store the new array in the variable squaredIntegers. I understand what integer, positive and square mean. I understand what an array is.
-I understand that filter, map and reduce are higher order functions. I understand from the “hint” that I need to use filter, map and/or reduce in the solution. I will need to filter() the realNumberArray for positive integers. I will need to map() the values from the filter() function to the variable squaredIntegers. I understand that I will need to remember the ‘magic’ of chaining functions.
-I understand I am not supposed to use loop or the function keyword. I am to use const.

What I don’t understand:
-I don’t understand what is meant by the ‘magic of chaining functions?’
-I don’t clearly understand what filter, map, and reduce are, other than that they are higher order functions and they do something to an array. I have reviewed the MDN documentation for filter, map and reduce but I don’t understand where they are defined. How can we use these functions without defining or writing them? e.g. Don’t we have to write a function called “reduce” in order to use the “reduce” function? How will JS know what to do with ‘filter’ or ‘reduce’ if we don’t provide the function? Why are we attaching the function onto the array with a dot - e.g. (array1.reduce(reducer))? I’ve not seen this before in the JS curriculum. Also, there are many words in the MDN explanations that I think must refer to specific JS or programming concepts but I don’t understand what they mean (see below).

In reviewing the MDN stuff on ‘map’ - I don’t understand the following: The map() method creates a new array with the results of calling a provided function on every element in the calling array.’ What is the provided function? What is the calling array? what is a callback function? What does it mean to ‘invoke’ a callback? What is an anti-pattern? What is foreach and for-of? what is the ‘this’ keyword? What does it mean to ‘pass a value to callback?’ What does it mean for callback to ‘visit’ an element? What is parseInt? What is polyfill? These are all mentioned in the documentation.

Similarly, in the MDN info on the filter function, it states: ’ The filter() method creates a new array with all elements that pass the test implemented by the provided function.’ What is the test implemented? What is the provided function? What is a ‘value that coerces to true?’

The MDN info on the ‘reduce’ function states: The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
What is a reducer function and how do I ‘provide’ it? How does it “execute” the function on the elements in the array? MDN explains the accumulator argument: The accumulator accumulates the callback’s return values. It is the accumulated value previously returned in the last invocation of the callback, or initialValue , if supplied. Again - what is a callback? What do “invoke” and “invocation” mean in this context?

The following code is provided in the instructions:
FBPosts.filter(function(post) {
return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
})

I think this is a function. But I don’t know what FBPosts means, post.thumbnail or what null refers to in this context. What are post.shares and post.likes? Where do the numbers 100 and 500 come from? None of this is explained. How does this code relate to the challenge at hand, and/or the solution? Maybe most importantly - What does the above code actually do? I’m thinking that if I know what this code is doing then I might understand this challenge better. But there is no explanation of what the code does or why it is shown here - other than to show that it can be made more succinct with arrow function syntax. Regarding the code, the explanation states that “We have written this with filter() to at least make it somewhat readable.” Is that the only reason it was written with filter? Just to make it more readable? What is meant by “more readable?” The word “more” indicates a comparison - so “more readable” compared to what? It would be helpful if the “less readable” version were shown as well as an example.

you can do thing.method1() and if the value returned from the first method is of a kind that have other methods you can do thing.method1().method2() (for example if method1 returns an array then you can chain an array method)

they are part of those things already defined in the language. like push(), pop(), which are also functions already present in the language.

i’ve looked at the curriculum, many array methods are introduced before: shift(), push(), pop(), unshift()
this are functions that are properties of the Array object. when a property is a function, it is called a method (expanded in the curriculum later)

TBC

the provided function is the function you put as argument of map, when a function is used as argument of an other function it is called callback function
the calling array is the array on which you use the method
let arr = [1,2,3,4].map(x => x+1)
[1,2,3,4] is the calling array (it could also be stored in a variable and it works the same
x => x+1 is the callback function, written in the most compact arrow notation. this function returns the value augmented by one.
the returned array is [2,3,4,5] and is stored in the arr variable

a function is invoked when you do myFunc() - this execute the function. the method does it in the background, calling the function for each element of the array.

forEach is an other array method, it doesn’t return anything but execute a function for each element of the array
for...of is a loop, it is not introduced in the curriculum tho - if you have already met for...in this works similarly but loops over the property values of an object (instead of property keys)

the this keyword is mostly used when you create the methods, it refers to the object on which the method will be called

haven’t you already used parseInt() in the curriculum?
it is the third to last challenge of the Basic JS part:

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function-with-a-radix

you need to pass a callback that returns a boolean, if the returned value is true then the returned array will have that value, otherwise it will not have that value

research about truthy and falsy values - truthy values are coerced to the boolean true and falsy values are coerced to the boolean false
when would you ask? well, anytime the code logic would ask for a boolean value, whatever you put there is coerced to a boolean

// random example
if ("random string") {
 /* this is executed */
}

TBC

still the callback, still the method feeding the array elements one by one to the callback
with a difference
the reduce callback should have two parameters, an accumulator, and a current value
example (acc, cur) => acc + cur
this is the simplest callback you could use, summing all the values in the array
you can also use a second argument in the reduce method specifying what is the starting value of the accumulator, otherwise the accumulator starts with value of the first element in the array, and the first cur is the second element in the array
the returned value from one call of the callback is used as accumulator of the next call, the method returns the returned value from last call of the callback

TBC

Thanks for the info on chaining functions - but the word ‘magic’ is really not helpful in the curriculum’s instructions, it would have been better simply to remind us of how to chain functions. There’s no ‘magic’ involved! The word ‘magic’ makes it sound like there is some mystery or sleight of hand going on.

Now I understand that map, filter and reduce are like push and pop. The instructions should have simply mentioned this relationship. Knowing that, I could have gone back to look at those other functions (?methods) and that would have been very instructive since we already covered those other functions/methods.

Is there a way to provide my feedback above, to those who are developing the curriculum?

Also, what is the reason for differentiating between regular functions and methods? What is a property - is that a key: value pair?

Thanks for the additional info. A few more questions -

is the ‘provided’ function the same as the ‘callback’ function?

What is the difference between ‘invoking’ and ‘calling’ a function?

I don’t understand what is meant by ‘background’ - that ‘the method does it in the background.’ What is, or where is, the ‘background?’

How do forEach and for-of relate to this challenge?

What is the ‘object’ on which the method is called? Where do we use the ‘this’ keyword? Is it needed for this challenge, or is that something I need to figure out as part of the solution?

I do remember parseInt, I will go back and review it.

Regarding your info on filter - is ‘pass’ the same as ‘pass in?’ In other words are we using it as the argument in the function? I’m still not clear on what the ‘test implemented by the provided function’ means. What is the ‘test?’ You stated, ‘if the returned value is true then the returned array will have that value, otherwise it will not have that value’ - what is the word ‘that’ referring to? which value?

With all these questions I am trying to get at exactly what is going on, to get away from the idea of any ‘magic’ to get down to the actual concepts at work here. The instructions and info provided in the curriculum for this challenge are very vague.

What do you mean by ‘still the callback’ and ‘still the method?’ the word ‘still’ implies something from the past, that we have used already. Which callback and which method does ‘still’ refer to?

What is the difference between ‘reduce’ and ‘reducer?’ Are they two different functions/methods? You state that ‘this is the simplest callback you could use’ - ‘simplest’ compared to what? Why is it simplest? What would be an example of something more complex?

I’m not sure if I even need to understand all these details in order to solve the challenge. But at this point with the info and understanding I have gained, I still am unable to conceptualize what to do to start coding the solution. Part of the issue (as I mentioned previously) is that the example code provided makes little sense to me and is not explained.

Thanks again for your willingness and efforts to help.

I suggest you go trough the part of the curriculum on Object Oriented Programming, you will get a lot of questions answered: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/object-oriented-programming
Meanwhile I will keep trying to answer a piece at a time

yes

same thing

the Array.prototype.filter() (and the other methods too) is defined in the language itself, you don’t see the callback being called and such, you know what it does, but you don’t see the code that is going to be executed.
You can get an appreciation for this in challenges where you are asked to implement yourself the methods: Functional Programming: Implement map on a Prototype

yes, argument of the function. The callback is the test. The value is the current element being considered. Filter calls the callback on each element one at a time, if the element pass the test (the callback returns true) it is kept, otherwise it isn’t.

You can create an issue on github, but at this time the challenge has already been challenge to something else, so I suggest you wait for curriculum update before doing that.

in this case the callback, the function passed in as argument of the method, is called reducer (don’t ask me why). ‘still’ because it is the same thing as the other methods, it changes what it does with the value returned from the callback, but it is still comparable to the other methods.

reduce is the method, reducer is how it is called the callback.
summing all the elements in an array is the simplest thing. reduce can be used for a lot of things, to not go far away, you can use it to get the same result that you get from filter or map, one just need to choose the starting value carefully.

// example that returns an array with only even numbers
[2, 3, 4, 5, 6, 7].reduce((acc, cur) => {
   if (cur % 2 === 0) {
      return [...acc, cur];
   } else {
      return acc;
   }
}, []);

you are totally right about that, it doesn’t make sense like that. I will arrive to that too. But I think you can manage it now, in solving this challenge, [hint, click to unblur] using filter and map

TBC

OK, I will take a look at the Object Oriented Programming and Functional Programming Sections. I was trying to do everything in order, thinking that the curriculum was designed in that order so that one thing would build on the previous things.

If the ‘provided’ function is the same as the ‘callback’ function, why don’t they just use the word ‘callback?’ For a newbie, this stuff is hard enough as it is, and referring to the same thing in two ways when it’s not necessary, makes things more confusing.

Same thing regarding ‘invoking’ vs ‘calling’ a function. Why not use the same word consistently, to be more clear and avoid confusion? Also, when I googled ‘invoking vs calling a function’ I got all kinds of different info including this link:


So it seems some people think ‘invoke’ and ‘call’ are different…I am more confused about whether or not there is a difference between them and again, if they are the same thing, why there would be two words for the same thing (see my comment about ‘provided’ vs ‘callback’).

Regarding the ‘filter’ method - again, why wouldn’t MDN just say ‘callback’ instead of the ‘test implemented by the provided function?’ Makes no sense to use a whole bunch of words when ‘callback’ would suffice and also be more precise, since ‘callback’ would be referring to ‘callback.’ So confusing! OK, thanks for clarifying what the ‘value’ was - it is the value of the element. I wasn’t sure if you were referring to the boolean value of ‘true.’

I am confused by your statement ‘reduce is the method, reducer is how it is called the callback.’ I understand that ‘reduce’ is the method, but what do you mean by ‘reducer is how it is called the callback?’ Is ‘reducer’ the same as ‘callback’?

Another question that just came up as I was re-reading the instructions for this challenge is regarding the opening statement ‘It’s time we see how powerful arrow functions are when processing data.’ It doesn’t explain why arrow functions are powerful so I googled this to try to learn more.

I haven’t yet found anything that clearly states that arrow functions are more powerful than using the pre-ES6 function syntax, but I did find info on when not to use arrow functions. In fact, MDN states that ‘Arrow function expressions are ill suited as methods, and they cannot be used as constructors.’ (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

Aren’t we expected to use the arrow functions as methods here (filter, map, reduce)? And the instructions state: ’ Arrow functions work really well with higher order functions, such as map() , filter() , and reduce(). So it seems FCC and MDN are contradicting each other, or am I not understanding something?

And again the question- what specifically is ‘powerful’ about arrow functions? They are more concise but I found a lot of info about circumstances where they could be more problematic.

At this point I am more confused than ever regarding this challenge. The goal here is to use arrow functions, but MDN states arrow functions are ‘ill suited’ as methods…so why would we be instructed to do this exercise using methods with arrow functions?

no, a callback is a function that is an argument of an other function.
the reducer is specifically the callback that the reduce method is provided with.
the reduce method uses a reducer function to get a single value from an array

in the situation of myFunc() it is the same thing. if you read there the discussion is about other ways to deal with the functions. It is an interesting read, but it seems to be just confusing you.

you provide a function with arguments
when an argument is a function it is called callback

less characters, faster to write

no, you are using the arrow syntax for the callback function
when you define a method (which you are not doing here, you are just using the method) you need to use the function keyword

var Dog = { // the bark method is defined with function keyword
   bark: function() {
      console.log("Woof!");
   }

TBC