Spread syntax ecmascript

Question

I've used spread syntax before, but not in this way. I am confused over the jump between (...fns) to (...args). I understand that fns is the functions that are passed in (internalOnLoad and onLoad), and that the args are the arguments which belongs to the corresponding function. But how would it look like when each function are passing their arguments to the function (...args) => fns.forEach(...) ?

const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args));

const internalOnLoad = () => console.log("loaded");

const Avatar = ({ className, style, onLoad, ...props }) => (
  <img 
    className={`avatar ${className}`}
    style={{ borderRadius: "50%", ...style }}
    onLoad={callAll(internalOnLoad, onLoad)}
    {...props} 
  />
);

Avatar.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
  className: PropTypes.string,
  style: PropTypes.object,
  onLoad: PropTypes.func
};

Can you give me a visual description of how this would look like? E.g. that calling callAll = (...fns) like this: callAll(internalOnLoad, onLoad) is the same as callAll will receive the arguments like this callAll = (internalOnLoad, onLoad)

Thank you in advance

[`...` is not an operator!](https://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread-oper/37152508#37152508) — Felix Kling, Jul 18 '18 at 13:45

score 4 · Answer 1 · answered Jul 18 '18 at 13:49

The rest parameters syntax collects all arguments into an array. In this case partial application is used to store an array of functions (fns), and return a new function. When the new function is called, it will invoke the functions in fns, and pass the arguments (args) to each one of them.

If we use the standard JS functions, it would be:

function callAll(...fns) { 
    return (...args) {
        fns.forEach(fn => fn && fn(...args));
    }
}

Example:

const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args));

const callFns = callAll (
  (a, b) => console.log(a + b + 10),
  (a, b) => console.log(a + b + 20),
  (a, b) => console.log(a + b + 30),
);

console.log(callFns); // you can see the function that was returned in the console.

callFns(1, 2);

score 0 · Answer 2 · answered Jul 18 '18 at 13:55

const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args));

The first ... gets all functions.

The second ... gets all arguments.

The third ... inserts the arguments with fn.apply(undefined, args) into the function instead of fn(args).

Spread syntax ecmascript

2 Answers2