Reducir Javascript: dominar los conceptos básicos

Hoy hablaremos sobre el método de matriz reduce Javascript y cómo podemos usarlo para reducir una matriz a un solo valor. Todos los fragmentos de código escritos están en lenguaje Javascript. Se requiere un conocimiento básico del idioma para comprender este artículo e implementar el método de manera efectiva.

¿Qué es el método de reducción de Javascript?

El método reduce array de Javascript es un componente esencial de la programación funcional que toma un array y lo reduce a solo un valor. Esto se logra ejecutando la función de devolución de llamada en cada elemento de la matriz, pasando el resultado del cálculo al elemento anterior.

 const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue) console.log(sumWithInitial); // expected output: 10

El fragmento de código anterior es una matriz de números; cuando llamamos al método reduce, toma toda la matriz y devuelve solo un valor que es 10.

Comprender los parámetros y el argumento de Javascript "reducir"

Es importante tener una comprensión muy concreta de cuáles son los parámetros de Javascript "reducir" si debemos usar el método correctamente. A continuación, he resaltado estos parámetros; los tomaremos uno tras otro, luego, al final, uniremos todo para darle sentido.

1. función de devolución de llamada
2. valor inicial

función de devolución de llamada

Esta función se ejecuta en cada elemento de la matriz. En la ejecución posterior de la devolución de llamada Fn, su valor de retorno se cambia al valor del argumento del acumulador. El valor de retorno cambia a reduce(), para la invocación final.

Los siguientes parámetros se proporcionan al llamar a la función:

1. acumulador
2. valor actual
3. índice actual
4. formación

Acumulador

Este es el resultado de la última llamada a devolución de llamada Fn, en valor. Si se proporciona, initialValue se usa en la primera llamada; si no, se usa array[0].

valor actual

Este es el valor del elemento actual. Si se proporcionó un initialValue, el valor de la matriz en el índice 0 (array[0]) se devolvería en la primera llamada; si no, se devolvería el índice 1 (arreglo[1]).

ÍndiceActual

Esta es la posición de índice del valor actual de la matriz. Si se proporcionó initialValue en la primera llamada, su posición estaría en el índice 0; de lo contrario, estaría en el índice 1.

Formación

Esta es simplemente la matriz en la que se utilizó el método reduce().

valor inicial

Un valor que se usa para inicializar el acumulador en la primera devolución de llamada. Si se proporciona initialValue, callbackFn comienza a ejecutarse con currentValue establecido en el primer elemento de la matriz. Si se omite initialValue, el acumulador se establece en el primer valor de la matriz y callbackFn comienza a ejecutarse con currentValue establecido en el segundo valor de la matriz. Si la matriz está vacía en este escenario (es decir, no hay ningún elemento inicial para devolver como acumulador), se genera un error.

Poniendo todo junto

reducir (Función (acumulador, valor actual, índice actual, matriz) { /* … */ }, valor inicial)

La combinación de todos estos parámetros debería parecerse al fragmento de código anterior.

¿Cómo funciona el método Javascript "reducir"?

Profundicemos más en este método de Javascript reducido y veamos qué sucede detrás de escena.

 const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce( (accumulator, currentValue) => accumulator + currentValue, initialValue );

Todo lo que hace el método reduce de Javascript es recorrer el elemento, y cada vez que se recorre, devolvemos un elemento individual y obtenemos el valor anterior que devolvimos de reduce(). Si es el primer elemento en reduce(), solo obtenemos cero porque ese es nuestro valor predeterminado. Si cambiamos el valor predeterminado a 50, por ejemplo, afectaría a la matriz.

Tomamos cero o el número predeterminado y lo agregamos a nuestro primer elemento; obtendríamos un total que sería 1 en el código anterior. Lo hacemos de nuevo para el siguiente elemento, que es 2. Sumamos 1 + 2 y obtenemos 3; continuamos este proceso hasta llegar al elemento final.

La tabla de arriba da una idea más clara de lo que sucede cada vez que usamos este método. Tenga en cuenta que este resultado variará según initialValue.

Conclusión

En una nota final, reduce Javascript es un método iterativo. Recopila todos los elementos de la matriz en un solo valor aplicando una función de devolución de llamada "reductora" a cada elemento en orden de índice ascendente. El valor de retorno de callbackFn siempre se proporciona como un acumulador cuando se vuelve a llamar a callbackFn. Reduce devuelve su valor de retorno desde el último valor del acumulador, que es el valor devuelto por la devolución de llamada Fn en la última iteración de la matriz ().

Si bien la función proporcionada como devolución de llamada-Fn puede modificar, la matriz en la que se llama, reduce() no lo hace. Sin embargo, tenga en cuenta que la longitud de la matriz se conserva antes de la ejecución de Fn de devolución de llamada inicial.