confused about js function syntax

Question

I was doing some ES6 syntax practice on freecodecamp.org, having some difficulties to understand the context.I know this is called IIFE in JS,

(function () {
    statements
})();

So, this is OK but why not I get the ..args inside the first sum also instead of the inner sum only?

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

What if I modify the above snippet with this, they are doing the same thing right? is there any logical difference happening under the hood?

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

The main problem is why a function sum returning another function sum inside it.

Answer 1

In the first code, the IIFE is being called with no arguments, see:

})();

So, the resulting args array is empty, when spread into a parameter list, the resulting parameter list is empty; there is nothing to log. console.log with an empty parameter list does not do anything. It would log something if you invoked the IIFE with at least one argument, though:

 const sum = (function(...args) { // Now, it shows something! console.log(...args); return function sum(...args) { console.log(...args); // this shows 1,2,3 return args.reduce((a, b) => a + b, 0); }; })(9999); console.log(sum(1, 2, 3)); // 6 

In the second code, there's only one function, not a function wrapped inside another function, and that one function is always called with parameters. If you called it with no parameters and spread them into the console.log , you would see the same effect:

 function sum(...args) { console.log(...args); return args.reduce((a, b) => a + b, 0); } sum(); // 6