{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/en/2016-07-08-partial-application-arrow-functions/","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"markdownRemark":{"id":"f471d308-6295-51a4-818c-86667f65dda6","html":"

Problem

\n

You want to create a generic function (using ES2015 code) that produces for a given function the partial applied function.

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Given: a generic function for creating partial functions (see recipe 9).

    \n
    function partial(fn /*, args...*/) {\n  var args = Array.prototype.slice.call(arguments, 1);\n  return function() {\n    return fn.apply(this, args.concat(slice.call(arguments, 0)));\n  };\n}
    \n
    2. \n
  2. \n

    Use rest parameters to avoid arguments to array conversion.

    \n
    function partial(fn, ...args) {\n  return function(...argsInner) {\n    return fn.apply(this, args.concat(argsInner));\n  };\n}
    \n
    3. \n
  3. \n

    Replace the inner function with a fat arrow function.

    \n
    function partial(fn, ...args) {\n  return (...argsInner) => {\n    return fn.apply(this, args.concat(argsInner));\n  };\n}
    \n
    4. \n
  4. Call the passed function fn directly.
    5. \n
\n
```javascript\nfunction partial(fn, ...args) {\n  return (...argsInner) => {\n    return fn.apply(this, args.concat(argsInner));\n  };\n}\n```
\n
    \n
  1. Use the spread operator in favour of the array concatenation.
    2. \n
\n
```javascript\nfunction partial(fn, ...args) {\n  return (...argsInner) => {\n    return fn(...args, ...argsInner);\n  };\n}\n```
\n
    \n
  1. … and remove the return from the inner function.
    2. \n
\n
```javascript\nfunction partial(fn, ...args) {\n  return (...argsInner) => fn(...args, ...argsInner);\n}\n```
\n
    \n
  1. \n

    Make the outer function a fat arrow function as well.

    \n
    const partial = (fn, ...args) => (...argsInner) => fn(...args, ...argsInner);
    \n
    2. \n
  2. \n

    Voilá, there you got a delicious generic function that creates partial applicable functions.

    \n
    const partial = (fn, ...args) => (...argsInner) => fn(...args, ...argsInner);\nfunction createPerson(firstName, lastName) {\n  return {\n   firstName: firstName,\n   lastName: lastName\n  }\n}\nlet createPersonWithFirstNameJohn = partial(createPerson, 'John');\nlet johnDoe = createPersonWithFirstNameJohn('Doe');\nconsole.log(johnDoe.firstName);  // \"John\"\nconsole.log(johnDoe.lastName);   // \"Doe\"\n\n// And another example:\nconst sum = (x, y, z) => x + y + z;\nconst add5 = partial(sum, 5);\nconst add5and6 = partial(sum, 5, 6);\nconsole.log(add5(6,7));     // 18\nconsole.log(add5and6(7));   // 18
    \n

    Notes

    \n
    3. \n
  3. \n

    Of course, if you need the runtime context of the function that is created, you cannot use fat arrow functions.

    \n

    For example in the following code an object personFactory was created, which now contains the createPerson() function\nas object method. Inside createPerson() we access the defaultAge member via the keyword this, which at this\nmoment refers to the global object (e.g., the window object in a browser based runtime environment).

    \n

    Therefore, when setting this.defaultAge as a value to the (new) property age of the object\ncreated in createPerson(), it gets the value undefined (or in case the global object has a property defaultValue\nit gets that value).

    \n

    Bottom line: in every case where you need to have access to the current context at\nruntime, don’t use fat arrow functions for partial applications (but anyway: in real functional programming\nfunctions should not access the context at all).

    \n
    const partial = (fn, ...args) => (...argsInner) => fn(...args, ...argsInner);\nlet personFactory = {\n  defaultAge: 55,\n  createPerson: function(firstName, lastName) {\n    return {\n     firstName: firstName,\n     lastName: lastName,\n     age: this.defaultAge\n    }\n  }\n}\nlet createPersonWithFirstNameJohn = partial(personFactory.createPerson, 'John');\nlet johnDoe = createPersonWithFirstNameJohn('Doe');\nconsole.log(johnDoe.firstName);  // \"John\"\nconsole.log(johnDoe.lastName);   // \"Doe\"\nconsole.log(johnDoe.age);        // undefined
    \n
    4. \n
\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-07-08-partial-application-arrow-functions/","tagSlugs":["/tag/java-script/"]},"frontmatter":{"date":"2016-07-08T08:00:00.000Z","description":null,"tags":["JavaScript"],"title":"Create a generic function for partial application using arrow functions"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/en/2016-07-08-partial-application-arrow-functions/"}}}