El concepto de jQuery collection y la programación funcional es a veces un gran olvidado y sin embargo en más de una ocasión nos puede ser muy útil en la programación del día a día. Vamos a ver un ejemplo sencillo en el cual deseamos sumar el contenido de una serie de párrafos . En principio es algo que con jQuery no tiene mucha miga sería suficiente con construir algo del siguiente estilo:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var total=0;
$("#sumar").click (function() {
$("p").each(function() {
total+= parseInt($(this).text());
})
$("#resultado").html(total);
})
})
</script>
</head>
<body>
<p>
1
</p>
<p>
2
</p>
<p>
3
</p>
<input type="button" value="sumar" id="sumar"/>
<div id="resultado">
</div>
</body>
</html> Como podemos ver hemos recorrido la lista de nodos y los hemos sumado todo funciona correctamente.
¿Ahora bien es la mejor forma de hacerlo? . Esta es una buena pregunta ya que en jQuery estamos mas que habituados a utilizar variables globales para realizar este tipo de operaciones y programación imperativa . ¿Es posible utilizar programación funcional en nuestro código y presentar una solución más flexible?. La realidad es que sí . Podemos usar la función map de jQuery y convertir la lista de nodos DOM en un sencillo array de numeros y luego usar una reducción para sumarlos . Esto nos permite aumentar la flexibilidad ya que una vez disponemos del array podríamos definir operaciones complementarias de forma sencilla 🙂
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sumar").click (function() {
let numeros=$("p")
.map(function() {
return parseInt($(this).text());
})
.get();
let suma=numeros.reduce(function(total, numero) {
return total+numero;
},0)
$("#resultado").html(resultado);
})
})
</script>
</head>
<body>
<p>
1
</p>
<p>
2
</p>
<p>
3
</p>
<input type="button" value="sumar" id="sumar"/>
<div id="resultado">
</div>
</body>
</html> En este caso la función map nos ha devuelto un array de valores a nivel de jQuery con la función get nos quedamos con el array puro.
Acostumbremonos a usar más la programación funcional con las librerías o frameworks habituales ya que nos permitirá trabajar de forma más cómoda y flexible con jQuery collection en nuestro código.