Liebe Leserinnen und Leser,
\nWillkommen auf der neuen Website zum umfassenden JavaScript-Handbuch, die ab heute online ist. Ergänzend zu der offiziellen Website beim Rheinwerk-Verlag möchte ich hier zusätzliche Informationen und Materialien zum Buch und zum Thema JavaScript im Allgemeinen zur Verfügung stellen.
\nDarüber hinaus können Sie mir über diese Website auch gerne Feedback zukommen lassen, entweder über die angegebene E-Mail-Adresse oder über einen der sozialen Kanäle wie etwa Twitter, GitHub, Xing oder LinkedIn.
\nHerzlichst,\nPhilip Ackermann
\nAutor und Software-Entwickler, philipackermann.de
\n","fields":{"slug":"/posts/javascript-handbook/","categorySlug":"/category/java-script-handbuch/"},"frontmatter":{"title":"Neue Website zum Buch","date":"2017-04-04T10:02:53.000Z","category":"JavaScript Handbuch","description":""}}},{"node":{"html":"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)You want to create a generic function for inspecting function calls,\nso that each time the inspected function is called its name and its\narguments are printed to the console.
\nfunction createPerson(firstName, lastName) {\n return {\n firstName: firstName,\n lastName: lastName\n }\n}\nconst loggingCreatePerson = inspect(createPerson);\nloggingCreatePerson('John', 'Doe');apply() methodCreate 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).
const inspect = fn => function (...args) {};Inside the returned function call the inspected function using the apply() method and\npass the execution context and the arguments.
const inspect = fn => function (...args) {\n return fn.apply(this, args);\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.
const inspect = fn => function (...args) {\n console.log(fn.name + ' called with args: ' + args.join(', '));\n return fn.apply(this, args);\n};Voilá, now we have a function to inspect other functions. 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');… generates this output:
\ncreatePerson called with args: John, Doeinspect() function by using a more\ngeneric approach.If you don’t need access to the execution context, you can also use an arrow function for\nthe returned function:
\nconst inspect = fn => (...args) => {\n console.log(fn.name + ' called with args: ' + args.join(', '));\n return fn.apply(this, args);\n};inspect() function of the Command Line API, available for example in Chrome, Safari and Firefox.In yesterday’s recipe we saw how to use template strings to generate an HTML list\nbased on an array of objects:
\nlet persons = [\n {\n firstName: 'John',\n lastName: 'Doe',\n address: {\n city: 'London'\n }\n },\n {\n firstName: 'Jane',\n lastName: 'Doe',\n address: {\n city: 'Birmingham'\n }\n },\n {\n firstName: 'Jane',\n lastName: 'Smith',\n address: {\n city: 'Birmingham'\n }\n },\n {\n firstName: 'Dave',\n lastName: 'Smith',\n address: {\n city: 'London'\n }\n },\n {\n firstName: 'Jane',\n lastName: 'Carpenter',\n address: {\n city: 'Birmingham'\n }\n }\n]\nconst htmlListItem = object => `\\n <li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${array.map(htmlListItem).join('')}\\n</ul>`\nconsole.log(htmlList(persons))However our solution had one limitation: it only works for those objects that\nhave firstName and lastName properties but it doesn’t work for other objects.\nFor example the following code …
let cities = [\n {\n name: 'Ney York'\n },\n {\n name: 'Miami'\n },\n {\n name: 'San Francisco'\n },\n {\n name: 'Chicago'\n },\n {\n name: 'Seattle'\n }\n]\nconst htmlListItem = object => `\\n <li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${array.map(htmlListItem).join('')}\\n</ul>`\nconsole.log(htmlList(cities))… generates this HTML code:
\n<ul>\n <li>NaN</li>\n <li>NaN</li>\n <li>NaN</li>\n <li>NaN</li>\n <li>NaN</li>\n</ul>listItem() that works with every type of object.\nFortunately this is relatively easy as we see in today’s recipe.htmlList() function from yesterday’s recipehtmlListItem() function from yesterday’s recipeGiven: the two functions htmlList() and htmlListItem() from yesterday’s recipe:
const htmlListItem = object => `\n <li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${array.map(htmlListItem).join('')}\n</ul>`The idea now is that we change htmlList() and htmlListItem() to accept a function as\nparameter which determines the value (based on the particular object) that should be used for the list item\n(we call this function value function).\nBoth htmlList() and htmlListItem() will then return functions and close in the value function.
Change htmlListItem() to accept a function (the value function) and return another function (this is where the closure comes in) …
const htmlListItem = fn => object => `\n <li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${array.map(htmlListItem).join('')}\n</ul>`… and inside the returned function call the value function with the particular object as argument.
\nconst htmlListItem = fn => object => `\n <li>${fn(object)}</li>`\nconst htmlList = array => `<ul>${array.map(htmlListItem).join('')}\n</ul>`Change htmlList() as well so that it accepts a value function and returns another function (again, this creates a closure) …
const htmlListItem = fn => object => `\n <li>${fn(object)}</li>`\nconst htmlList = fn => array => `<ul>${array.map(htmlListItem).join('')}\n</ul>`… and inside the returned function call htmlListItem() with the value function as argument.
const htmlListItem = fn => object => `\n <li>${fn(object)}</li>`\nconst htmlList = fn => array => `<ul>${array.map(htmlListItem(fn)).join('')}\n</ul>`Voilá, now you can use the htmlList() to produce the HTML list code for any type of objects by simply passing\na value function that determines the value used for the label of the list item:
For example this code here …
\nconsole.log(htmlList(object => object.name)(cities))… produces this HTML code …
\n<ul>\n <li>Ney York</li>\n <li>Miami</li>\n <li>San Francisco</li>\n <li>Chicago</li>\n <li>Seattle</li>\n</ul>… while this code here …
\nconsole.log(htmlList(object => object.firstName + ' ' + object.lastName)(persons))… produces this HTML code:
\n<ul>\n <li>John Doe</li>\n <li>Jane Doe</li>\n <li>Jane Smith</li>\n <li>Dave Smith</li>\n <li>Jane Carpenter</li>\n</ul>You can also use partial application to create partial applied versions of htmlList(),\ni.e., functions where the value function is closed in.
const htmlListForCities =\n htmlList(object => object.name)\nconst htmlListForPersons =\n htmlList(object => object.firstName + ' ' + object.lastName)\n\nconsole.log(htmlListForCities(cities))\nconsole.log(htmlListForPersons(persons))Another alternative is to use yesterday’s recipe\nand introduce a common method in all objects, e.g., toString() or getListLabel().
However this approach has two disadvantages: first you cannot use object literal notation for creating the objects\nwithout defining the method over and over again in every object. That means you would need to use some sort of\ninheritance, which is not bad, but it adds complexity to your object model.
\nThe second disadvantage is that the logic of how an object is displayed in the generated list is tightly\ncoupled to the object. If you want to change the value, you always need to change the object model.\nWith the technique shown in today’s recipe we decoupled the logic from the object model (inside the value function).
\nFinally, an advantage of today’s recipe is that you can easily create different value functions for one and the same\nobject model. For example, you could create two value functions, one just displaying the first name, one just displaying\nthe last name of a person:
\nconst htmlListFirstName = htmlList(object => object.firstName)\nconst htmlListLastName = htmlList(object => object.lastName)With yesterday’s recipe this is not that easy.
\nYou want to create an HTML list based on an array of objects.
\nmap() methodGiven: an array of objects …
\nconst persons = [\n {\n firstName: 'John',\n lastName: 'Doe'\n },\n {\n firstName: 'Jane',\n lastName: 'Doe'\n },\n {\n firstName: 'Jane',\n lastName: 'Smith'\n },\n {\n firstName: 'Dave',\n lastName: 'Smith'\n },\n {\n firstName: 'Jane',\n lastName: 'Carpenter'\n }\n]… and you want to create a function htmlList() that takes this array …
let result = htmlList(person);… and creates the following HTML code:
\n<ul>\n <li>John Doe</li>\n <li>Jane Doe</li>\n <li>Jane Smith</li>\n <li>Dave Smith</li>\n <li>Jane Carpenter</li>\n</ul>Create a function htmlList() that accepts an array and returns a template string.
const htmlList = array => ``Add the HTML code for the list to the template string.
\nconst htmlList = array => `<ul></ul>`Add an embedded expression between the <ul> and </ul> tags.
const htmlList = array => `<ul>${}</ul>`Now create another function htmlListItem() that accepts an object\nand returns a template string containing the code for one single list item\n(using an embedded expression and returning the concatenation of firstName\nand lastName).
const htmlListItem = object => `<li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${}</ul>`Now inside the embedded expression in the htmlList() function call the map() method\non the array and pass the htmlListItem() function.
const htmlListItem = object => `<li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${array.map(htmlListItem)}</ul>`Finally join the result of the map() function using the join() method …
const htmlListItem = object => `<li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${array.map(htmlListItem).join('')}</ul>`And adjust the formatting of the output:
\nconst htmlListItem = object => `\n <li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${array.map(htmlListItem).join('')}\n</ul>`Alternatively you use \\n and \\t to format the output:
const htmlListItem = object => `\\n <li>${object.firstName + object.lastName}</li>`\nconst htmlList = array => `<ul>${array.map(htmlListItem).join('')}\\n</ul>````javascript\nconsole.log(htmlList(persons))\n```\n\nAnd the generated HTML code looks like this:\n\n```html\n<ul>\n <li>JohnDoe</li>\n <li>JaneDoe</li>\n <li>JaneSmith</li>\n <li>DaveSmith</li>\n <li>JaneCarpenter</li>\n</ul>\n```One limitation of the code shown is that it only works for arrays of person objects, i.e., for\narrays of objects that have the properties firstName and lastName, because htmlListItem()\ndepends on those properties.
In tomorrow’s recipe we will see how to remove this coupling and adjust both the htmlList() and\nthe htmlListItem() function to work with any type of objects.