In yesterday’s recipe we saw how to create\na function to inspect function calls. For example this code here …
\nconst 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');… produced this output:
\ncreatePerson called with args: John, DoeToday we are gonna improve this recipe and create a generic function before() to create functions\nthat execute some code before the original function is called:
...\nconst log = (fn, ...args) => console.log(\n fn.name + ' called with args: ' + args.join(', ')\n);\nconst inspect = before(log);\nconst loggingCreatePerson = inspect(createPerson);\nloggingCreatePerson('John', 'Doe');Given: the inspect() function from yesterday’s recipe.
const inspect = fn => function (...args) {\n console.log(fn.name + ' called with args: ' + args.join(', '));\n return fn.apply(this, args);\n};We will now change this function step by step to a generic function.
\nChange the name of the function to before() and change it in a way that it\ntakes a parameter inspect and returns a function (basically you only need to change the\npart const inspect = fn to const before = inspect => fn) …
const before = inspect => fn => function (...args) {\n console.log(fn.name + ' called with args: ' + args.join(', '));\n return fn.apply(this, args);\n};… and rename the parameter from inspect to decorator. We will call this function decorator function\nand this will be the generic way of decorating any function.
const before = decorator => fn => function (...args) {\n console.log(fn.name + ' called with args: ' + args.join(', '));\n return fn.apply(this, args);\n};Inside the returned function now call the decorator function passing the function to decorate\nand the arguments:
\nconst before = decorator => fn => function (...args) {\n decorator(fn, args);\n return fn.apply(this, args);\n};Voilá, now we have a generic function before() that accepts a decorator function and returns\nanother function that accepts the function to decorate.
For example this code here …
\nconst before = decorator => fn => function (...args) {\n decorator(fn, args);\n return fn.apply(this, args);\n};\n\nconst log = (fn, ...args) => console.log(\n fn.name + ' called with args: ' + args.join(', ')\n);\nconst inspect = before(log);\n\nfunction createPerson(firstName, lastName) {\n return {\n firstName: firstName,\n lastName: lastName\n }\n}\nconst loggingCreatePerson = inspect(createPerson);\nloggingCreatePerson('John', 'Doe');… produces the known output:
\ncreatePerson called with args: John, DoeInstead of creating a function inspect() you can do it like this as well:
const loggingCreatePerson = before(log)(createPerson);And with the help of before() you now can easily create different decorator functions:
const before = decorator => fn => function (...args) {\n decorator(fn, args);\n return fn.apply(this, args);\n};\n\nconst log = (fn, ...args) => console.log(\n fn.name + ' called with args: ' + args.join(', ')\n );\nconst logTime = (fn, ...args) =>\n console.log(fn.name + ' called at ' + new Date());\nconst inspect = before(log);\nconst inspectTime = before(logTime);\n\nfunction createPerson(firstName, lastName) {\n return {\n firstName: firstName,\n lastName: lastName\n }\n}\nconst loggingCreatePerson = inspect(createPerson);\nloggingCreatePerson('John', 'Doe');\n// createPerson called with args: John, Doe\nconst loggingTimeCreatePerson = inspectTime(createPerson);\nloggingTimeCreatePerson('John', 'Doe');\n// createPerson called at Wed Jul 20 2016 20:00:00 GMT+0200 (CEST)