¿Te has preguntado cómo funciona reduce en JavaScript, también conocido como método reduce JS?
El método reduce en JavaScript es tan solo uno de muchos métodos que nos permiten manipular los elementos de un objeto array, también conocido como un arreglo en español, es decir, un listado de elementos. Como objeto, un array tiene a su disposición distintas funciones, a las que conocemos como métodos. En este post, te enseñaremos cómo funciona el método reduce en JavaScript para que lo puedas usar en tus proyectos futuros.
¿Cómo funciona el método reduce en JavaScript?
El método reduce en JavaScript funciona de manera similar a los demás métodos de un array. Al igual que métodos como map y filter, en este método tenemos un array original que pasamos por una función. Al final, obtendremos de vuelta un resultado, ya sean los elementos transformados o filtrados. La diferencia entre estos métodos y el método reduce de JavaScript es que en este método obtenemos un solo resultado. En este sentido, se parece más al método find, que nos ayuda a encontrar el primer valor que cumple una función dentro del array.
Entonces, ¿qué hace exactamente el método reduce en JavaScript? Lo que hacemos con este método es insertar una función que se aplicará a los elementos del array y nos devolverá un resultado. Hasta ahí es muy parecido a otros métodos. La diferencia es que esta función se ejecutará en cada elemento del array en orden progresivo, tomando el resultado del anterior elemento.
Es decir, la función no solo se ejecutará para cada elemento, pero también usará como referencia el resultado de la función ejecutada en el anterior elemento para hacerlo. Por ello, el método reduce en JavaScript nos devolverá un solo valor como resultado, pues es un único valor que se ha ido transformando a lo largo de los elementos.
Esto es mucho más fácil de explicar con un ejemplo. Supongamos que tenemos un array con los siguientes valores:
const arraySuma [17, 23, 18, 150]
Entonces, si quisiéramos sumar todos estos valores, lo podríamos hacer con la siguiente función insertada en reduce:
arraySuma.reduce ((previousValue, currentValue) => previousValue + currentValue)
Este método define el resultado anterior como previousValue y el elemento actual como currentValue. Como cuando empezamos el array el primer valor no tiene un sultado anterior para tomar de referencia, este será el resultado. Es decir, la función empezará a ejecutarse en el segundo elemento. Entonces, pintemos el resultado:
const resultadoArraySuma = arraySuma.reduce ((previousValue, currentValue) => previousValue + currentValue)
console.log (resultadoArraySuma)
El resultado sería el valor 208 pintado por pantalla.
Ahora, también puedes hacer que el primer valor tenga un resultado anterior como referencia usando el parámetro initialValue. Este parámetro se inserta justo después del currentValue. En él, puedes poner el valor directamente o utilizar una variable que referencie el valor.
¿Quieres aprender más sobre el método reduce JavaScript?
Ahora que has aprendido cómo funciona el método reduce en JavaScript, estás un poco más cerca de dominar este lenguaje de programación. Por ello, te invitamos a seguir aprendiendo con nosotros en nuestra formación intensiva sobre desarrollo web. En el Desarrollo Web Full Stack Bootcamp no solo aprenderás a dominar JavaScript, sino también otros aspectos del desarrollo web. ¡Y en pocos meses serás un experto! No te pierdas esta oportunidad y matricúlate ahora para triunfar en el sector IT.
