Use the Rest Operator with Function Parameters - Confusing functions returning functions that contain functions

JavaScript
1

Tell us what’s happening:

I’ve successfully completed the challenge 2 different ways but I have a question about the way the challenge is set up.

The first way I completed the challenge:

const sum = (function() {
“use strict”;
return function sum(…args) {

return args.reduce((a, b) => a + b, 0);

};
})();

Then I figured the whole thing can be simplified like this:

function sum(…args) {
return args.reduce((a, b) => a + b, 0);
}

It’s not the first time in these ES6 challenges that I’ve encountered a function that returns a function that contains a function etc.

My question: why is this necessary? Why the layers of functions? It just seems needlessly confusing. Is the challenge deliberately set up this way to get us used to seeing multiple layers of functions?

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 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

it was necessary for how the tests worked, in next update should be removed for all challenges as the tests have changed

1 Like
3

Thanks for your reply. Sorry to keep bothering you with my questions, but I’ve encountered another ES6 challenge that really confused me with the functions within functions setup.

ES6: Use Destructuring Assignment to Pass an Object as a Function’s Parameters

I was able to pass the challenge by doing this:

function half({max, min}) {
return (max + min) / 2.0;
}

However, the solution given in the hints is really confusing:

const half = (function() {
  "use strict"; // do not change this line

  // change code below this line
  return function half({max, min}) {
    // use function argument destructuring
    return (max + min) / 2.0;
  };
  // change code above this line

})();

So we’re declaring a constant variable called half that is a function that returns a function called half??

And the (); at the end… what does that do? I don’t understand the syntax. The ES6 challenge that introduces us to anonymous functions doesn’t clarify what’s going here.

4

That is an Immediately Invoked Function Expression, instead of calling later the function it is executed where declared adding the () right after declaration

It has become unnecessary so it will be removed but it was necessary for the tests in the past

You will find at one point how these things are useful, but for now it is an other thing you can do with functions

1 Like