{"componentChunkName":"component---src-templates-index-template-js","path":"/page/4","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"html":"

Problem

\n

You want to create a generic function that converts a function to a function that can be called at most n times.

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Given: a function that executes only once (based on recipe 14) and\nanother function (printSomething()) that should be converted.

    \n
    const once = (fn) => {\n  let called = false;\n  return function() {\n    return called ? void 0 : ((called = true), fn.apply(this, arguments));\n  }\n}\nfunction printSomething() {\n  console.log('something');\n}\nconst printSomethingMaxFive = max(printSomething, 5);\nprintSomethingMaxFive();  // Should print \"something\"\nprintSomethingMaxFive();  // Should print \"something\"\nprintSomethingMaxFive();  // Should print \"something\"\nprintSomethingMaxFive();  // Should print \"something\"\nprintSomethingMaxFive();  // Should print \"something\"\nprintSomethingMaxFive();  // Should do nothing
    \n
    2. \n
  2. \n

    Add a parameter (max) that contain the maximum number of times the function should be called\n(and rename the function to max()).

    \n
    const max = (fn, max) => {\n  let called = true;\n  return function() {\n    return called ? void 0 : ((called = true), fn.apply(this, arguments));\n  }\n}
    \n
    3. \n
  3. \n

    Change the called variable to contain a number.

    \n
    const max = (fn, max) => {\n  let called = 0;\n  return function() {\n    return called ? void 0 : ((called = true), fn.apply(this, arguments));\n  }\n}
    \n
    4. \n
  4. \n

    Inside the closure check if called is greater than max.

    \n
    const max = (fn, max) => {\n  let called = 0;\n  return function() {\n    return called >= max ? void 0 : ((called = true), fn.apply(this, arguments));\n  }\n}
    \n
    5. \n
  5. \n

    Inside the closure (i.e., when the function is called) increase the called variable.

    \n
    const max = (fn, max) => {\n  let called = 0;\n  return function() {\n    return called >= max ? void 0 : ((called++), fn.apply(this, arguments));\n  }\n}
    \n
    6. \n
  6. \n

    Voilá, now if printSomethingMaxFive() is called more than 5 times, it simply does nothing.

    \n
    const max = (fn, max) => {\n  let called = 0;\n  return function() {\n    return called >= max ? void 0 : ((called++), fn.apply(this, arguments));\n  }\n}\nfunction printSomething() {\n  console.log('something');\n}\nconst printSomethingMaxFive = max(printSomething, 5);\nprintSomethingMaxFive();  // Should print \"something\"\nprintSomethingMaxFive();  // Should print \"something\"\nprintSomethingMaxFive();  // Should print \"something\"\nprintSomethingMaxFive();  // Should print \"something\"\nprintSomethingMaxFive();  // Should print \"something\"\nprintSomethingMaxFive();  // Should do nothing
    \n
    7. \n
\n

Variants

\n
    \n
  1. \n

    If you don’t need the context when the function is executed, you can also (1) use arrow functions,\n(2) call the given function directly, (3) use rest parameters and (4) omit the return keyword from the closure.

    \n
    const max = (fn, max) => {\n  let called = 0;\n  return (...args) => {\n    called >= max ? void 0 : ((called++), fn(...args));\n  }\n}
    \n
    2. \n
\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-07-11-generic-function-called-max/","categorySlug":null},"frontmatter":{"title":"Create a generic function to create functions that can be called at most n times","date":"2016-07-11T08:00:00.000Z","category":null,"description":null}}},{"node":{"html":"

Problem

\n

You want to create a generic function, that produces for a given function the partial applied function, applying parameters from the right.

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Given: a generic function for partial application (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(Array.prototype.slice.call(arguments, 0)));\n  };\n}
    \n
    2. \n
  2. \n

    … which could also be written like this:

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

    To apply parameters from the right you only need to change the order how the argsInner and argsAll arrays are concatenated.

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

    Optional: write this again as an one-liner:

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

    Voilá, a perfect … oh, wait, you might want to rename the function to partialRight().

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

    Voilá, a perfect generic function that creates partial applicable functions starting from the right.

    \n
    function createPerson(firstName, lastName) {\n  return {\n   firstName: firstName,\n   lastName: lastName\n  }\n}\nvar createPersonWithLastNameDoe = partialRight(createPerson, 'Doe');\nvar johnDoe = createPersonWithLastNameDoe('John');\nconsole.log(johnDoe.firstName);  // \"John\"\nconsole.log(johnDoe.lastName);   // \"Doe\"
    \n
    7. \n
\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-07-10-partial-application-from-right/","categorySlug":null},"frontmatter":{"title":"Create a generic function for partial application from the right","date":"2016-07-10T08:00:00.000Z","category":null,"description":null}}},{"node":{"html":"

Problem

\n

You want to remove duplicates from arrays.

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Given: an array with duplicate values.

    \n
    let array = ['John', 'James', 'John', 'Jane', 'John'];\nlet result = removeDuplicates(array);\nconsole.log(result);\n// expected content of array3: ['John', 'James', 'Jane']
    \n
    2. \n
  2. \n

    Create the removeDuplicates function and inside create a copy of the array parameter\n(e.g., by using the concat() method).

    \n
    function removeDuplicates(array) {\n  let result = array.concat();\n  ...\n  return result;\n}
    \n
    3. \n
  3. \n

    Iterate over each element in the copy.

    \n
    function removeDuplicates(array) {\n  let result = array.concat();\n  for(let i=0; i<result.length; ++i) {\n    ...\n  }\n  return result;\n}
    \n
    4. \n
  4. \n

    For each element iterate over all the other elements.

    \n
    function removeDuplicates(array) {\n  let result = array.concat();\n  for(let i=0; i<result.length; ++i) {\n    for(let j=i+1; j<result.length; ++j) {\n      ...\n    }\n  }\n  return result;\n}
    \n
    5. \n
  5. \n

    Compare the element with each other element.

    \n
    function removeDuplicates(array) {\n  let result = array.concat();\n  for(let i=0; i<result.length; ++i) {\n    for(let j=i+1; j<result.length; ++j) {\n      if(result[i] === result[j]) {\n        ...\n      }\n    }\n  }\n  return result;\n}
    \n
    6. \n
  6. \n

    If both elements are equal (===) then delete the duplicate using the splice() method.

    \n
    function removeDuplicates(array) {\n  let result = array.concat();\n  for(let i=0; i<result.length; ++i) {\n    for(let j=i+1; j<result.length; ++j) {\n      if(result[i] === result[j]) {\n        result.splice(j--, 1);\n      }\n    }\n  }\n  return result;\n}
    \n
    7. \n
  7. \n

    Voilá, there you got a function which removes duplicates from an array.

    \n
    let array = ['John', 'James', 'John', 'Jane', 'John'];\nlet result = removeDuplicates(array);\nconsole.log(result); // ['John', 'James', 'Jane']
    \n
    8. \n
\n

Notes

\n\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-07-09-remove-duplicates-from-arrays/","categorySlug":null},"frontmatter":{"title":"Remove duplicates from arrays","date":"2016-07-09T08:00:00.000Z","category":null,"description":null}}},{"node":{"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/","categorySlug":null},"frontmatter":{"title":"Create a generic function for partial application using arrow functions","date":"2016-07-08T08:00:00.000Z","category":null,"description":null}}},{"node":{"html":"

Problem

\n

You want to create a generic function that converts a function to a function that can only be called once.

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Given: a function that executes only once (based on yesterday’s recipe).

    \n
    function printSomething() {\n  let called = false;\n  if(called) {\n    return undefined;\n  } else {\n    called = true;\n    console.log('something');\n    printSomething = function() {};\n  }\n}\nprintSomething();        // (1) Ok\nprintSomething();        // (2) Does nothing
    \n
    2. \n
  2. \n

    Create a function once() that accepts a function as parameter and returns another function.

    \n
    function once(fn) {\n  return function() {\n    ...\n  }\n}
    \n
    3. \n
  3. \n

    Add a variable to memorize if the function has been called.

    \n
    function once(fn) {\n  let called = false;\n  return function() {\n    ...\n  }\n}
    \n
    4. \n
  4. \n

    Inside the returned function check that variable. If it is true, then return\nundefined …

    \n
    function once(fn) {\n  let called = false;\n  return function() {\n    if(called) {\n      return undefined;\n    }\n    ...\n  }\n}
    \n
    5. \n
  5. \n

    … otherwise set the variable to true and call the passed function.

    \n
    function once(fn) {\n  let called = false;\n  return function() {\n    if(called) {\n      return undefined;\n    } else {\n      called = true;\n      fn.apply(this, arguments);\n    }\n  }\n}
    \n
    6. \n
  6. \n

    Optimization: use void 0 instead of return undefined, which are less characters.

    \n
    function once(fn) {\n  let called = false;\n  return function() {\n    if(called) {\n      void 0;\n    } else {\n      called = true;\n      fn.apply(this, arguments);\n    }\n  }\n}
    \n
    7. \n
  7. \n

    Optimization: replace if and else with the ternary operator.

    \n
    function once(fn) {\n  let called = false;\n  return function() {\n    return called ? void 0 : ((called = true), fn.apply(this, arguments));\n  }\n}
    \n
    8. \n
  8. \n

    Optimization: use a fat arrow function for once().

    \n
    const once = (fn) => {\n  let called = false;\n  return function() {\n    return called ? void 0 : ((called = true), fn.apply(this, arguments));\n  }\n}
    \n
    9. \n
  9. \n

    Now remove all the boilerplate logic from printSomething() and use once() to create another\nfunction printSomethingOnce().

    \n
    function printSomething() {\n  console.log('something');\n}\nlet printSomethingOnce = once(printSomething);
    \n
    10. \n
  10. Voilá, now if printSomethingOnce() is called a second time, it simply does nothing.
    11. \n
\n
```javascript\nfunction printSomething() {\n  console.log('something');\n}\nlet printSomethingOnce = once(printSomething);\nprintSomethingOnce();        // (1) Ok\nprintSomethingOnce();        // (2) Does nothing\n```
\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-07-07-generic-function-called-once/","categorySlug":null},"frontmatter":{"title":"Create a generic function to create functions that can only be called once","date":"2016-07-07T08:00:00.000Z","category":null,"description":null}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"currentPage":4,"postsLimit":5,"postsOffset":20,"prevPagePath":"/page/3","nextPagePath":"/page/5","hasPrevPage":true,"hasNextPage":true}}}