{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/en/2016-07-19-inspect-function-calls/","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"markdownRemark":{"id":"7ca6a249-60fc-5d52-9eea-06db18329564","html":"

Problem

\n\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Create a function inspect() that accepts a function (we call this one inspected function)\nand returns another function.\nNote: the returned function will be no arrow function but a “normal” function, because\nthen we have access to the execution context (via the this keyword).

    \n
    const inspect = fn => function (...args) {};
    \n
    2. \n
  2. \n

    Inside the returned function call the inspected function using the apply() method and\npass the execution context and the arguments.

    \n
    const inspect = fn => function (...args) {\n  return fn.apply(this, args);\n};
    \n
    3. \n
  3. \n

    Now before the call of the inspected function add a console output printing the name (fn.name)\nand the arguments (args) of the inspected function.

    \n
    const inspect = fn => function (...args) {\n  console.log(fn.name + ' called with args: ' + args.join(', '));\n  return fn.apply(this, args);\n};
    \n
    4. \n
  4. \n

    Voilá, now we have a function to inspect other functions. For example this code here …

    \n
    const inspect = fn => function (...args) {\n  console.log(fn.name + ' called with args: ' + args.join(', '));\n  return fn.apply(this, args);\n};\n\nfunction createPerson(firstName, lastName) {\n  return {\n    firstName: firstName,\n    lastName: lastName\n  }\n}\n\nconst loggingCreatePerson = inspect(createPerson)\nloggingCreatePerson('John', 'Doe');
    \n

    … generates this output:

    \n
    createPerson called with args: John, Doe
    \n
    5. \n
\n

Notes

\n\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-07-19-inspect-function-calls/","tagSlugs":["/tag/java-script/"]},"frontmatter":{"date":"2016-07-19T08:00:00.000Z","description":null,"tags":["JavaScript"],"title":"Create a function for inspecting function calls"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/en/2016-07-19-inspect-function-calls/"}}}