5
function createMathOperation(operator) {
  console.log(operator); //(augend, addend) => augend + addend
  return (value, other) => {
    return operator(value, other)
  }
}

const add = createMathOperation((augend, addend) => augend + addend)

add(1,2)//3

I found the above function definition from lodash. I am trying to understand it but to no avail.

Right inside createMathOperation, I try to log operator and this is the value

(augend, addend) => augend + addend

I guess value and other is 1 and 2 but how?

And how return operator(value, other) works when operator is (augend, addend) => augend + addend

Can anyone convert it to longer human readable form for a better understanding instead?

4
  • 1
    The crux of this is that in JS functions are objects and these objects can be passed around in just the same way as any other first class object.
    – Liam
    May 22, 2018 at 8:08
  • 2
    Welcome to higher order functions. You're near the point of no return be careful: once you go in much further you can't go back. May 23, 2018 at 11:20
  • 2
    @JaredSmith, he says, with a wiiide grin ...
    – Mulan
    May 23, 2018 at 15:02
  • @user633183 yup, posting the question at all means it's probably already too late. On to functors! May 23, 2018 at 15:39

3 Answers 3

4

This is the essence of functional programming you can pass in a function, return a function, and call the function you received as a parameter:

function createMathOperation(operator) {
  console.log(operator); // This is a the function that performs the computation 
  // We return a new function (using arrow syntax) that receives 2 arguments and will call the original operator we passed in to createMathOperation
  // The code inside this function is not executed here, the function is not invoked. 
  // The caller can take the returned function and executed 0-n times as they wish. 
  return (value, other) => { 
    // when we invoke add this is the code that gets called and the arguments we pass to add end up in value and other
    console.log("Getting ready to compute " + value + " operator " + other); 
    return operator(value, other) // since operator is a function we just invoke it as we would any other function with the two arguments we got from whoever called us.
  }
}

// add will contain the wrapped function that has our extra console.log 
const add = createMathOperation((augend, addend) => augend + addend)

// The 'Getting ready ...' text has not been printed yet, nobody invoked the function that was returned yet, the next line will do so.
console.log(add(1,2)) 
// will output:
// Getting ready to compute 1 operator 2
// 3

A note on => is just syntactic sugar over a function expression, it has extra semantics around this, but for this example, (augend, addend) => augend + addend is equivalent to function (augend, addend){ return augend + addend; }

2
  • In your comments We return a new function (using arrow syntax) that receives 2 arguments. Which means return (value,other) => {...} is still only a function declaration right?
    – Isaac
    May 22, 2018 at 8:15
  • Yup, it's a function expression, it represents a new function that will be returned. The code inside will not be executed until you actually call add May 22, 2018 at 8:15
1

createMathOperation returns function, which adds two numbers. Here's more readable version:

function createMathOperation(fn) {
  console.log(fn);
  return function(value, other){
    return fn(value, other);
  };
}

const add = createMathOperation(function (augend, addend) {
  return augend + addend;
});

add(1,2)//3

I renamed 'operator' to 'fn' to make it less confusing (syntax highlighting colored it blue for some reason).

0

Your code in good old JS would look like:

var createMathOperation = function(operator) {
  // operator is scope-locked within this operation wrapper
  console.log('operator:', operator);
  return function(value, other) {
    // The wrapper returns an anonymous function that acts as a call-wrapper
    // for your original function
    console.log('value:', value);
    console.log('other:', other);
    return operator(value, other)
  }
}

var add = createMathOperation(function(augend, addend) {
  // This is what is being called at line 9 - return operator(value, other)
  return augend + addend;
});

console.log('result 1+2:', add(1,2));

In general i don't see much use to all of this, you could just do const add = (a, v) => a + v; and have the same result.

2
  • The original body of createMathOperation is in much longer form which to transform and handle all kinds of undefined values. I've removed them as they are just noise for my objective
    – Isaac
    May 22, 2018 at 8:08
  • I see, in that case that wrapper makes sense.
    – wiesion
    May 22, 2018 at 8:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.