Rest Operator with Function Parameters Help

JavaScript
#1

Tell us what’s happening:

I dont know whats happening, that’s the problem. When did we go through reduce, map or filter ?
i tried looking online and on youtube and got many explanation to what a spread operator is, which is basically a way to take in the elements of an array into the arguments of a function using ...args.

Ill explain what i know so far. The code declares a constant variable named sum, which will be an expression function.

I don’t really understand what "use strict" means because we were told to ignore it in previous lessons.
return function sum(x, y, z) ?! - Is this an expression function or what type of function is this exactly ?
const args = [x, y, z]; - This is declaring a constant array with the variables of the function sum parameters.

return args.reduce((a,b) => a+b, 0); - This is an arrow functions that has 2 parameters, a and b and adds them together to result in a sum which is then given like so, - sum, 0.

To be honest, im really thinking hard about ditching freeCodeCamp. The whole site is amazingly designed but i really am starting to think the curriculum isn’t the best. Im constantly being presented with things i have to search up and learn by myself. Its assuming that we know some things already when we are truly beginners. Im sorry for the ranting, but it has been going on a lot.

Thanks for the support, i am still looking to finish at least the ES6 part of this curriculum.

Your code so far


const sum = (function() {
  "use strict";
  return function sum(x, y, z) {
    const args = [ x, y, z ];
    return args.reduce((a, b) => a + b, 0);
  };
})();
console.log(sum(1, 2, 3)); // 6

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-the-rest-operator-with-function-parameters

#2

This is something that was addressed and talked a lot, and hopefully will be smoothed out in future updates of the curriculum.

If it may be of any confort, I’m of the opinion that this is the part where the “true” learning begins, having to roll up the sleeves and do your own researches. It’s hard, perhaps tedious, but rewarding.

Anyway back to the point.
Instead of explaining line by line, I’ll try to give you an example so maybe you can see the reasoning behind the code.

Imagine we are working on our company code and we have a function to sum two numbers

const sum = (a,b) => a + b;

Nothing fancy.
One day, Steve is asked to update a page and add a new input. But forget to update the sum function.

// since Steve added another input this is the function that gets called
sum(1, 10, 200) // 11

Wait. Steve expected sum to return 211.
So he comes to you and ask if you can rework your function to accept any number of parameters, so none has to worry about your sum function ever again.

How would you proceed? Knowing that now your sum function can receive any number of parameters?

So you think of a way to loop over any number of arguments…
but HOW? :thinking:

So you decide to head over MDN page about Arguments (note: do it!)

Wait, right at the start there’s a note that says

If you’re writing ES6 compatible code, then rest parameters should be preferred.

Interesting…
So with rest parameters

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

Exactly what we wanted…
except now we have an array, while we wanted to return a number.

At this point you can use any valid method to loop over your newly argument array.

const sum = (...args) => {
  let total = 0;
  for(let i = 0; i < args.length; i++) {
    total += args[i]
  }
  return total
}
sum(1,2,3,4,5,6) // 21
sum() // 0 -> now it also works for no arguments

Or you can use any other valid Array method on your arguments :sunny:
Like Reduce

const sum = (...args) => args.reduce((a, b) => a + b, 0);
sum(1,2,3,4,5,6) // 21
sum() // 0

Sorry for the digression, the aim was to show you a real method of working through problems. You can’t possibly know all; and when you don’t, use the documentation!! :smile:
…And don’t forget to tag Steve when you will push your fix to the company code :+1: :wink:

3 Likes
#3

Marmiz, I truly thank you for the break down of the problem(even though it still doesn’t solve the problem in the challenge) and it did help me understand things a bit more. But sadly i do still feel like there a huge gaps that i stare at and blank out. For instance, The sum function uses the ... spread operator on the args parameter.. Ok… wtf is it using if not the spread operator ? it is literally there in the parameter ? Never mind the whole reduce() function that i out of common sense found out that it basically adds elements of arrays together but have no fudging idea how when where why and what. Iv decided to head on to w3, finish the javascript + ES6 section + Solo app on my phone and then maybe comeback here being well read because i know freeCodeCamp is gonna throw at me everything.

Btw, this part really did double back flips in my head.

return function sum(x, y, z) {
    const args = [ x, y, z ];
    return args.reduce((a, b) => a + b, 0);

we started with an expression function sum, then returned a function (function sum...) which has another return which has an arrow function? Ok ok, hold up. I dont expect you dont answer me, im just making my point that NO WHERE were we taught to do any double back flips on freeCodeCamp.

Again, thank you very much, your reply was very appreciated and in my personal case did help me understand a bit more, but my whole framework of understanding needs to be redefined on another website. I have also started on Solo the app on my phone and have the feeling that i understand complex objects much much better as i thought i did here.
Have a wonderful day

#4

the external sum() function is an Immediately Invoked Function Expression that returns a function, so it works just as any function - it is a thing done to create a local scope for the tests, but it was an old necessity and now it is not needed anymore, with next curriculum update many challenges will have this removed

just look at the returned sum() function as a normal function (as it is a normal function) and the one you need to work on

You can read here about reduce():

Just keep in mind that the challenge asks you to pass from args being an array of 3 elements to making possible that the function accepts any number of elements. the reduce method works with any number of elements, you don’t need to do any changes to it. So, you need to work out how to make the args array being of a variable length depending on passed in arguments, using the rest operator

Also, if you are interested, here the page on strict mode

And if the challenge is not enough about the rest parameters syntax, here you are:

1 Like
#5

when is the next curriculum update?

#6

When the QA is finished, unknown for now

But I am sure you can totally manage also with the curriculum as it is now, just a bit of effort in applying Read-Search-Ask method!

#7