(SPOILER)ES6: Use the Rest Operator with Function Parameters

(SPOILER)ES6: Use the Rest Operator with Function Parameters
0

#1

Why should I use additional function to return other function inside the first one like in the task


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

Can I use this instead?


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

console.log(sum(1, 2, 3)); // 6

And in general please, tell me if there any difference and which is better? Thanks in advance.


Rest Operator with Function Parameters
#2

Performance-wise, I would say there is no difference, but for readability and for the ability for code re-use, I would say it is better to create the separate function. Having a separate function allows you to call it from multiple places, but only define it one time.

Anytime, you can make your code more readable and not take a performance hit, I would always go with the more readable version.


#3

Thank you :slight_smile:


#4

Personally I think Yari’s code is cleaner and more readable and that the FCC example is overly complicated.

I believe the reason they are nesting the inner function into an IIFE is that you cannot use strict mode in a function with non-simple parameters.

I’m curious as to why you would say the FCC solution is more readable and has better ability for code reuse?


#5

I was questioning whether to start a different thread or not… but since this one is here and asking a similar one I will ask anyway…

Would it work to further refactor this code into something like :

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

Or would that possibly hose the reduce function for lack of proper "function " return ? 

Also , let me know if I should have put this into another post instead of here I will be happy to move it.. 

Thank you !

#6

This oneliner does the same job.
const sum = (...args) => args.reduce((a, b) => a + b, 0);

Even though it does not pass the test, it is still valid.
It gets readable as time goes by, once you get used to the ES6 sugar and all…


#7

I was trying to do the same thing as Yari and I have a hard time figuring what is the purpose of the last () in the solution code :

const sum = (function() {
  "use strict";
  return function sum(...args ) {
    return args.reduce((a, b) => a + b, 0);
  };
})();

If I reduce it it does something like :

const sum = (function() { })();

I don’t understand why the last (), I googled function operator and can’t find an example of code with those.

Thanks for helping


#8

The parentheses cause the outer function to execute (thereby returning the inner function “sum”).
This construct (the surrounding function) is interesting in and of itself. It’s called an IIFE (immediately invoked function expression). Often used to create a private scope for the returned function.

Try googling IIFE (or its expansion) to find out more.


#9

Thank you very much, I managed to find this yesterday after some times, feels good to learn new things :slight_smile: