Il linguaggio JavaScript \u00e8 sempre pi\u00f9 utilizzato anche lato server grazie alle numerose librerie di sviluppo disponibili. Ci\u00f2 comporta un considerevole aumento della complessit\u00e0 del codice che deve essere sempre pi\u00f9 aperto alle estensioni e chiuso verso le modifiche. <\/p>\n\n\n\n
Nel seguito dell’articolo verr\u00e0 mostrato come evitare la duplicazione del codice sfruttando le high-order function in JavaScript.<\/p>\n\n\n\t\t\t\t
Innanzitutto illustriamo in modo chiaro un problema tipico: viene fornito un un array di oggetti JavaScript <\/a>che rappresentano utenti di una web app e che possiedono gli attributi nome, cognome, e post. Post \u00e8 una lista di stringhe contenente il titolo di ciascun post pubblicato.<\/p>\n\n\n Si vogliono implementare diversi algoritmi di ordinamento dell’array come ad esempio selectionSort <\/a><\/em>e bubbleSort<\/a><\/em>. Si vuole anche implementare la possibilit\u00e0 di ordinare l’array per nome, per cognome oppure per numero di post pubblicati.<\/p>\n\n\n\n Per implementare un algoritmo di ordinamento \u00e8 necessario confrontare l’attributo di interesse secondo il quale si vuole ordinare. Tuttavia, il confronto fra due nomi avviene in maniera differente rispetto al confronto fra numeri di post pubblicati:<\/p>\n\n\n Si potrebbe quindi pensare di sviluppare le seguenti funzioni, modificando solamente l’implementazione del confronto fra oggetti:<\/p>\n\n\n La soluzione sopra proposta risulta essere veramente pessima poich\u00e9 comporta un’ampia duplicazione del codice che esegue gli algoritmi di selectionSort <\/em>e bubbleSort <\/em>causando i seguenti problemi:<\/p>\n\n\n\n In JavaScript le funzioni sono oggetti di prima classe (first-class object<\/em>), ci\u00f2 significa che il loro codice (signature e implementazione) pu\u00f2 essere assegnato a una variabile.<\/p>\n\n\n Un funzione si dice di ordine superiore (high-order function<\/em>) quando accetta come argomento un’altra funzione, oppure quando ritorna una funzione come risultato.<\/p>\n\n\n Nel codice sopra proposto la funzione execute() \u00e8 una high-order function.<\/p>\n\n\n\n Si pu\u00f2 quindi pensare di sfruttare la logica delle high-order function per evitare la duplicazione di codice nell’esempio precedentemente riportato o in casi analoghi. Ecco come procedere:<\/p>\n\n\n\n Un aspetto fondamentale da non tralasciare \u00e8 che le funzioni comparator <\/em>dovranno agire in modo differente, ma avere stessa signature e stessa logica dei valori di ritorno.<\/p>\n\n\n\n Ogni funzione comparator <\/em>accetta due elementi dell’array e ritorna i seguenti valori:<\/p>\n\n\n\n Vediamo un esempio:<\/p>\n\n\n La stessa logica pu\u00f2 essere implementata per eseguire il confronto per numero di post pubblicati:<\/p>\n\n\n Ora \u00e8 sufficiente definire la high-order function e passarle il metodo di confronto desiderato:<\/p>\n\n\nlet<\/span> p = {\n \"name\"<\/span>: \"Mary\"<\/span>,\n \"surname\"<\/span>: \"Smith\"<\/span>,\n \"posts\"<\/span>: [\"image.png\"<\/span>, \"codemotionRome.png\"<\/span>, \"article.txt\"<\/span>]\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nlet<\/span> people = [p0, p1, p2, ...]\n\n\/\/ Confronto persone per nome<\/span>\npeople[0<\/span>][\"name\"<\/span>] > people[1<\/span>][\"name\"<\/span>]\n\n\/\/ Confronto persone per post pubblicati<\/span>\npeople[0<\/span>][\"posts\"<\/span>].length > people[1<\/span>][\"posts\"<\/span>].length<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nselectionSortByName(){...};\nbubbleSortByName(){...};\nselectionSortByPosts(){...};\nbubbleSortByPosts(){...};\n...<\/code><\/span><\/pre>\n\n\n\n
First class object e high-order function<\/h2>\n\n\n\n
function<\/span> foo<\/span>(<\/span>)<\/span>{\n console<\/span>.log(\"Executing foo...\"<\/span>);\n}\n\nconsole<\/span>.log(foo) \/\/Stampa il codice della funzione<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nfoo = function<\/span>(<\/span>)<\/span>{\n console<\/span>.log(\"foo\"<\/span>)\n}\n\nfunction<\/span> execute<\/span>(fn<\/span>)<\/span>{\n fn()\n}\n\nexecute(foo)<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nComparatori e algoritmi di ordinamento<\/h2>\n\n\n\n
\n
\n
let<\/span> compareByName = function<\/span>(personA, personB<\/span>)<\/span>{\n if<\/span>(personA.name < personB.name){ return<\/span> -1<\/span>}\n else<\/span> if<\/span>(personA.name > personB.name){ return<\/span> +1<\/span> }\n else<\/span> { return<\/span> 0<\/span> }\n}\n\nlet<\/span> p1 = {\"name\"<\/span>: \"John\"<\/span>, \"Surname\"<\/span>: \"Doe\"<\/span>, \"posts\"<\/span>: []}\nlet<\/span> p2 = {\"name\"<\/span>: \"Mary\"<\/span>, \"Surname\"<\/span>: \"Smith\"<\/span>, \"posts\"<\/span>: []}\n\ncompareByName(p1, p2) \/\/Returns -1 in fact John < Mary<\/span>\ncompareByName(p2, p1) \/\/Returns +1 in fact Mary > John<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nlet<\/span> compareByPosts = function<\/span>(personA, personB<\/span>)<\/span>{\n if<\/span>(personA.posts.length < personB.posts.length){ return<\/span> -1<\/span>}\n else<\/span> if<\/span>(personA.posts.length > personB.posts.length){ return<\/span> +1<\/span> }\n else<\/span> { return<\/span> 0<\/span> }\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nfunction<\/span> selectionSort<\/span>(list, comparator)<\/span><\/span>{\n for<\/span>(let i = 0<\/span>; i < list<\/span>.length - 1<\/span>; i++){\n for<\/span>(let j = i+1<\/span>; j < list<\/span>.length; j++){\n if<\/span>(comparator(list<\/span>[j], list<\/span>[i]) < 0<\/span>){\n tmp = list<\/span>[i];\n list<\/span>[i] = list<\/span>[j]\n list<\/span>[j] = tmp\n }\n }\n }\n}\n\n\/\/ Sorting by name<\/span>\nselectionSort(people, compareByName)\n\n\/\/ Sorting by posts number<\/span>\nselectionSort(people, compareByPosts)<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n