sábado, 2 de enero de 2021

Javascript: Ejemplo de función reduce de array

La función reduce trata los elementos de un array con una función que suministra el programador, siendo su objetivo procesar dichos elementos para obtener un único valor.

Este post muestra un ejemplo codificado de tres maneras distintas con la intención de que sea comprensible para el máximo número de programadores. Las características de las tres formas son:

  • Codificado con arrow function
  • Codificado con función anónima 
  • Codificado con función clásica

El ejemplo aplica reduce sobre un array de objetos que representan comunidades autónomas con nombre(propiedad name) y población(propiedad population). Con la función reduce se suministra una función que suma las poblaciones de cada una de las comunidades autónomas para acabar obteniendo la población total. Notese que la función reduce carga en accumulator un elemento con la misma estructura que los del array que está tratando, es decir un objeto con las propiedades name y population.

Codificado con función arrow


Codificado con función anónima


Codificado con función clásica


La función reduce tiene mas posibilidades siendo posible enviar más parámetros a la función desarrollada por el programador. Para más información Función reduce

Espero que sea de ayuda. 

Ciao

Javascript: Ejemplo de función filter de array

El método filter() se aplica sobre un array y devuelve un nuevo array que contiene los elementos que cumplan la condición establecida por el programador en la función invocada por filter.

Este post muestra un ejemplo codificado de tres maneras distintas con la intención de que sea comprensible para el máximo número de programadores. Las características de las tres formas son:

  • Codificado con arrow function
  • Codificado con función anónima 
  • Codificado con función clásica

En el ejemplo se trata un array screens que contiene objetos que representan pantallas. De cada pantalla se conoce la marca (propiedad brand), los píxeles horizontales (propiedad horizontalPixel) y los píxeles verticales (propiedad verticalPixel). La función filter procesa cada pantalla seleccionando solo aquellas que tienen más de 1200 píxeles horizontales.

Codificado con arrow function

Codificado con función anonima

Codificado con función clásica 

En este último caso parece como que decideIfBig recibe el parámetro (objeto de tipo screens) 'automágicamente'. Cuando pasamos la función a filter no indicamos que parámetros puede usar. Lo que ocurre es que filter de forma predefinida envía parámetros a la función decideIfBig, en este caso el elemento de screens que es el array que se está procesando. Para más información Función filter

Espero que esto ayude.

viernes, 1 de enero de 2021

Javascript: Ejemplo de función map de array

La función map permite operar con los elementos de un array sin necesidad de hacer que el programador tenga que realizar operaciones de bucle for o foreach. La función map así facilita el trabajo de los programadores que no tienen que controlar las iteraciones y sus índices, que en muchos casos son el origen de errores inesperados tales como bucles que nunca acaban o tratamientos que se salen de los límites del array.

Supongamos que tenemos el siguiente array:


se requiere tratar cada elemento para añadir la propiedad priceByMeter, que se obtiene de dividir el valor de price por el de meters. Con la función map el código podría ser como sigue:


en este código se define una nueva variable a la que se le asigna el resultado de aplicar la función map al array flats. La función map aplica una función anónima que recibe el parámetro flat, este parámetro representa a cada uno de los elementos de flats que en este caso son objetos. Sobre cada uno de los 3 elementos de flats se aplica la función que devuelve un objeto nuevo robj.  En robj cargamos las propiedades del objeto de flats y añadimos la nueva propiedad priceByMeter calculada con price y meters. La función anónima devuelve el nuevo objeto, que para cada elemento de flats incorpora la nueva propiedad. El resultado es que pricebymeter es un nuevo array que contiene los siguientes elementos:


Conclusión

La función map permite hacer código que se ocupa más de decir lo que hay que hacer que de decir como se ha de hacer. Esto es el camino hacía la programación funcional que produce código más fácil de entender. Pero esto es otra historia.

Espero que este ejemplo sirva para que algún hacendoso programador pueda comprender está función no gastando mucho de su apreciado tiempo.


sábado, 28 de noviembre de 2020

Javascript: Ejemplo de asincronía, callbacks y promises

 Un ejemplo de código asíncrono es:

este código añade al array inicial tres números, el 4, el 5 y el 6. Estos números se añaden en un orden desconocido, el motivo es que la función addToArray hace uso de la función de javascript setTimeout. Esta función ejecuta el array.push después de un tiempo. En el caso del ejemplo el tiempo es elegido al azar por Math.random(). El resultado es que los elementos 4, 5 y 6 no se conoce de antemano en que orden apareceran. A cada ejecución el orden variará: [1, 2, 3, 5, 4, 6] o [1, 2, 3, 6, 4, 5] o cualquier otra combinación.

Utilizando callbacks esto se puede conseguir que los elementos se añadan en orden creciente siendo el resultado siempre [1, 2, 3, 4, 5, 6]. Esto se consigue con:

en este caso aunque addToArray sigue añadiendo los elementos en un tiempo indeterminado, se consigue que 4, 5 y 6 se añadan en el mismo orden siempre. Aquí la llamada a añadir el siguiente número es un callback del número anterior. Esto debido al funcionamiento interno de javascript que gestiona el orden en que se ejecutan las funciones con el stack queue y el callback queue hace que hasta que no se acaba de añadir el 4, no se añada el 5 y hasta que se acaba de añadir el 5 no se añada el 6. La importancia de esta técnica es conseguir sicronía cuando se necesita. Por ejemplo no mostrar una lista desplegable, mientras no tenemos disponibles los datos.

La técnica de callback, pronto se observó que conduce a un código no "limpio" (callback hell). Para evitar esto se ha incluido en javascript un objeto llamado Promise. Este objeto gestiona la asincronía. El ejemplo con Promise queda:

El método then del objeto promise hace que no se ejecute una función hasta que no haya terminado la anterior. Importante hacer notar que la función a controlar, en este caso addToArray debe devolver un objeto Promise para poder utilizar el método then.

Espero que este sencillo ejemplo le pueda ayudar a algún abnegado desarrollador para entender como funcionan las técnicas para manejar la asincronía intrinseca de javascript. 

Queda pendiente async-await para otro post.





jueves, 15 de octubre de 2020

Javascript: Ejemplo de Closure

Ejemplo

Definición

Se produce una Closure cuando una función es capaz de recordar y acceder a su lexical scope mientras se ejecuta fuera de él.

Explicación

En este ejemplo a la variable externa se le asigna la función inicial(). Esta función declara dentro de su scope las variables var1 y var2.
 
Cuando en la última línea de código se ejecuta externa(), realmente la función que se está ejecutando es interna() que es el retorno de ejecutar inicial() en la sentencia let externa = inicial();. Esta  función interna() al ejecutarse hace uso de variables que están definidas e inicializadas en el scope de inicial() , pero se está ejecutando desde fuera del scope de inicial(). Esto es la closure.

Conclusión

Gracias a las closures, hay variables que pueden se usadas fuera de su scope. Eso sí, protegidas y manejadas por las funciones dentro de las que están declaradas. 

Bibliografía

'You Don't Know JS: Scope & Closures' de Kyle Simpson publicado por 'Reilly Media, Inc en Marzo 2014

domingo, 11 de octubre de 2020

Javascript: Ejemplo de expresiones regulares.

Esto es una ayuda para quien tenga que construir una expresión regular y no sepa como hacerlo.
Los ejemplos están desarrollados con el método test de regexp. El método "test" devuelve true cuando hay coincidencia del patrón dentro de la cadena analizada y false cuando no.
Los ejemplos tienen la estructura:

    let patr = /patron/;  
    console.log (Descripción prueba, patr.test(cadena a analizar));

Ejemplos 


 

 

 

domingo, 4 de octubre de 2020

Javascript: Ejemplo de función usada como parámetro (callback).

Las funciones son ciudadanos de primera clase en Javascript. Cuando se dice primera clase, es porque las funciones se tratan como cualquier otro tipo, ya sea primitivo o resultado de instanciar una clase creada por el desarrollador. Es decir, una función se puede utilizar igual que los otros tipos,  almacenándola en una array, utilizándola como parámetro de otra función, almacenándola  en una variable, etc.

Se muestra a continuación un ejemplo que hace uso de una función como parámetro de otra. Este ejemplo se muestra la misma funcionalidad codificada con 3 sintaxis distintas:
  •     funciones clásicas
  •     funciones anónimas
  •     funciones arrow
El objetivo es hacer los ejemplos comprensibles para el mayor número de programadores posible, independientemente del tipo de funciones que estén acostumbrados a manejar.

Funciones clásicas

Funciones anónimas

Funciones arrow

Estos tres códigos son equivalentes, es decir si los ejecutamos obtenemos el mismo resultado:

    Hi pepe suarez
    Bye pepe suarez

Las funciones conocidas como callback, son funciones que se pasan como parámetros a otras funciones y que se ejecutan dentro de éstas. Es decir el ejemplo tiene  dos funciones hi y bye que son llamadas como callbacks desde la función greeting.

Esta posibilidad de llamar a funciones desde otras funciones que las han recibido como parámetros, acerca a javascript hacia la programación funcional. La programación funcional permite desarrollar código más estable, porque está menos acoplado y es más legible frente a la programación imperativa.
 
Si se supone que no se puede utilizar funciones como parámetros. Una posible codificación para conseguir una funcionalidad igual a la mostrada podría ser:
 
Este código tiene estructura de programación imperativa. 
 
Supongamos que es necesario incluir un nuevo tipo de saludo por ejemplo “Buenas tardes”. ¿Qué cambios hay que realizar en cada caso serían:
  • En el primer caso “tipo funcional” tendríamos que añadir la función goodEvening(name, lastName) y llamarla desde greetings(goodEvening). Ningún cambio más es necesrio.
  • En el segundo caso “tipo imperativo” tendríamos que añadir la función goodEvening(name, lastName), un  nuevo tipo de saludo greeting(“goodEveningType”) y modificar la función greeting para que el if considerase que pueden existir un nuevo tipo de saludo.

Conclusión.

La posibilidad de utilizar funciones como parámetros, en este caso, permite generar un código más orientado a la extensión que a la modificación. Esto es debido a que en el caso “tipo funcional” extendemos el comportamiento del sistema sin la necesidad de cambiar nada en la función greeting. La modificación es más costosa en el caso “tipo imperativo” incluye tener que modificar la propia función greeting.