{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/en/2016-07-07-generic-function-called-once/","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"markdownRemark":{"id":"13e0df42-e999-5965-ae27-acec2867578e","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/","tagSlugs":["/tag/java-script/"]},"frontmatter":{"date":"2016-07-07T08:00:00.000Z","description":null,"tags":["JavaScript"],"title":"Create a generic function to create functions that can only be called once"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/en/2016-07-07-generic-function-called-once/"}}}