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.
\n