El lenguaje JavaScript es cada vez m\u00e1s utilizado tambi\u00e9n del lado del servidor gracias a la gran cantidad de librer\u00edas de desarrollo disponibles. Esto implica un considerable aumento en la complejidad del c\u00f3digo, que debe ser cada vez m\u00e1s abierto a extensiones y cerrado a modificaciones.<\/p>\n\n\n\n
En la siguiente parte del art\u00edculo se mostrar\u00e1 c\u00f3mo evitar la duplicaci\u00f3n de c\u00f3digo aprovechando las funciones de orden superior (high-order functions) en JavaScript.<\/p>\n\n\n\t\t\t\t
Primero, expliquemos claramente un problema t\u00edpico: se proporciona un array de objetos JavaScript que representan usuarios de una web app y que tienen los atributos nombre, apellido y posts. Posts es una lista de strings que contiene el t\u00edtulo de cada post publicado.<\/p>\n\n\n
<code>let<\/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}\n<\/code><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nSe quieren implementar varios algoritmos de ordenaci\u00f3n del array, como por ejemplo selectionSort y bubbleSort. Tambi\u00e9n se quiere implementar la posibilidad de ordenar el array por nombre, por apellido o por n\u00famero de posts publicados.<\/p>\n\n\n\n
Para implementar un algoritmo de ordenaci\u00f3n es necesario comparar el atributo de inter\u00e9s por el cual se quiere ordenar. Sin embargo, la comparaci\u00f3n entre dos nombres se hace de manera diferente a la comparaci\u00f3n entre el n\u00famero de posts publicados:<\/p>\n\n\n
<code>let<\/span> people = [p0, p1, p2, ...]\n\n\/\/ Comparaci\u00f3n de personas por nombre<\/span>\npeople[0<\/span>][\"name\"<\/span>] > people[1<\/span>][\"name\"<\/span>]\n\n\/\/ Comparaci\u00f3n de personas por n\u00famero de posts publicados<\/span>\npeople[0<\/span>][\"posts\"<\/span>].length > people[1<\/span>][\"posts\"<\/span>].length\n<\/code><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nEntonces, uno podr\u00eda pensar en desarrollar las siguientes funciones, modificando solo la implementaci\u00f3n de la comparaci\u00f3n entre objetos:<\/p>\n\n\n
<code<\/span>><\/span>selectionSortByName(){...};\nbubbleSortByName(){...};\nselectionSortByPosts(){...};\nbubbleSortByPosts(){...};\n...\n<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nLa soluci\u00f3n propuesta arriba es realmente mala porque provoca una gran duplicaci\u00f3n de c\u00f3digo que ejecuta los algoritmos selectionSort y bubbleSort, causando los siguientes problemas:<\/p>\n\n\n\n
\n- Es necesario definir muchas funciones con implementaciones casi id\u00e9nticas<\/li>\n\n\n\n
- Si se detecta un error en el algoritmo de una funci\u00f3n, todas las dem\u00e1s funciones de la misma familia deben modificarse manualmente para resolver el mismo problema<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nObjetos de primera clase y funciones de orden superior<\/strong><\/h2>\n\n\n\nEn JavaScript, las funciones son objetos de primera clase (first-class objects), lo que significa que su c\u00f3digo (firma e implementaci\u00f3n) puede asignarse a una variable.<\/p>\n\n\n
<code>function<\/span> foo<\/span>(<\/span>)<\/span>{\n console<\/span>.log(\"Executing foo...\"<\/span>);\n}\n\nconsole<\/span>.log(foo) \/\/ Imprime el c\u00f3digo de la funci\u00f3n<\/span>\n<\/code><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nUna funci\u00f3n se dice que es de orden superior (high-order function) cuando acepta como argumento otra funci\u00f3n o cuando retorna una funci\u00f3n como resultado.<\/p>\n\n\n
<code>foo = 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)\n<\/code><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nEn el c\u00f3digo anterior, la funci\u00f3n execute()<\/code> es una funci\u00f3n de orden superior.<\/p>\n\n\n\n
\n\n\n\nComparadores y algoritmos de ordenaci\u00f3n<\/strong><\/h2>\n\n\n\nSe puede pensar entonces en aprovechar la l\u00f3gica de las funciones de orden superior para evitar la duplicaci\u00f3n de c\u00f3digo en el ejemplo anterior o en casos similares. Aqu\u00ed c\u00f3mo proceder:<\/p>\n\n\n\n
\n- Definir las funciones de orden superior, es decir, las funciones que implementan el algoritmo de ordenaci\u00f3n y que aceptan como par\u00e1metros el array a ordenar y una funci\u00f3n que ser\u00e1 invocada para realizar la comparaci\u00f3n entre los distintos elementos del array.<\/li>\n\n\n\n
- Definir varias funciones para comparar dos objetos del array, en nuestro caso dos personas, seg\u00fan diferentes par\u00e1metros. Estas funciones comparadoras ser\u00e1n pasadas como par\u00e1metro a las funciones de orden superior.<\/li>\n<\/ol>\n\n\n\n
Un aspecto fundamental que no se debe olvidar es que las funciones comparadoras deben actuar de forma diferente, pero tener la misma firma y l\u00f3gica en los valores de retorno.
<\/p>\n\n\n\n
Cada funci\u00f3n comparadora recibe dos elementos del array y retorna los siguientes valores:<\/p>\n\n\n\n
\n-1<\/code> si el primer elemento es anterior al segundo<\/li>\n\n\n\n0<\/code> si los dos elementos son intercambiables<\/li>\n\n\n\n+1<\/code> si el primer elemento es posterior al segundo<\/li>\n<\/ul>\n\n\n\nVeamos un ejemplo:<\/p>\n\n\n
<code>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) \/\/ Retorna -1 porque John < Mary<\/span>\ncompareByName(p2, p1) \/\/ Retorna +1 porque Mary > John<\/span>\n<\/code><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nLa misma l\u00f3gica puede implementarse para comparar por n\u00famero de posts publicados:<\/p>\n\n\n
<code>let<\/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}\n<\/code><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nAhora solo queda definir la funci\u00f3n de orden superior y pasarle el m\u00e9todo de comparaci\u00f3n deseado:<\/p>\n\n\n
<code>function<\/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 let tmp = list<\/span>[i];\n list<\/span>[i] = list<\/span>[j];\n list<\/span>[j] = tmp;\n }\n }\n }\n}\n\n\/\/ Ordenar por nombre<\/span>\nselectionSort(people, compareByName)\n\n\/\/ Ordenar por n\u00famero de posts<\/span>\nselectionSort(people, compareByPosts)\n<\/code><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n