Operadores: map, reduce y filter

MIS NOTAS:

Operadores pipeables

• pipe(): todos los operadores creacionales tienen este método, genera una cadena de operadores que se pueden enlazar uno tras otro.

• map(): itera sobre los valores que obtenemos del observable transformándolos.

• filter(): filtra los valores de un observable dada una condición.

• reduce(): combina todos los valores emitidos por un observable a través de una función acumuladora.

Es bueno comprender las cosas, y no solo utilizarlas de forma mecánica…

/* ==== OPERADORES ==== */
/* Todos los generadores de observables tienen un método llamado .pipe() que genera una especie de cadena de operadores que se pueden enlazar uno tras otro para hacer algo que queramos. */

// Operador map
const numbers1$ = from([1, 2, 3, 4, 5, 6, 7, 8]).pipe(
    map(number => number * 2),
    map(number => number ** 2)
);
numbers1$.subscribe(console.log);

// Operador reduce
const numbers2$ = from([1, 2, 3, 4, 5, 6, 7, 8]).pipe(
    reduce((acc, val) => acc + val, 0)
);
numbers2$.subscribe(console.log);

// Operador filter
const numbers3$ = from([1, 2, 3, 4, 5, 6, 7, 8]).pipe(
    filter(number => number > 6)
);
numbers3$.subscribe(console.log);

pipe: permite generar una cadena de operadores que se pueden enlazar uno tras otro
map: transforma un valor directo del observable
filter: solo emite los valores si cumple una condición
reduce: combina todos los valores emitidos por el observable, usando una función acumuladora

Map, Reduce y Filter:

Estos operadores te permiten manipular y transformar flujos de datos de manera divertida y creativa.

Map

Imagina que tienes una caja de crayones de colores y quieres pintar algunas imágenes. El operador map en RxJS es como una varita mágica que te permite transformar cada crayón en algo nuevo y emocionante.

• Con el operador map, puedes tomar cada crayón y convertirlo en un color diferente o en algo completamente nuevo. Por ejemplo, puedes convertir un crayón rojo en un crayón azul, un crayón verde en un crayón amarillo, o incluso convertir un crayón en una varita mágica.
• El operador map te permite transformar los elementos de un flujo de datos uno por uno. Puedes aplicar una función a cada elemento y obtener un nuevo elemento transformado.

Reduce

Ahora, supongamos que tienes una alcancía llena de monedas y quieres saber cuánto dinero tienes en total. El operador reduce en RxJS es como un contador mágico que te ayuda a agregar todos los valores de una colección y obtener un resultado final.

• Con el operador reduce, puedes sumar todos los valores uno por uno para obtener un total. Por ejemplo, puedes sumar el valor de cada moneda para saber cuánto dinero tienes en total.
• El operador reduce te permite combinar todos los elementos de un flujo de datos en un solo resultado. Puedes aplicar una función que acumula y combina los valores para obtener un valor final.

Filter

Ahora, imagina que tienes una bolsa llena de juguetes y quieres encontrar solo los juguetes más grandes y divertidos. El operador filter en RxJS es como un detector mágico que te ayuda a encontrar los juguetes especiales que cumplen ciertas condiciones.

• Con el operador filter, puedes examinar cada juguete y decidir si cumple con ciertos criterios. Por ejemplo, puedes encontrar solo los juguetes de color rojo, los juguetes que hacen ruido o los juguetes que tienen forma de animal.
• El operador filter te permite seleccionar solo los elementos de un flujo de datos que cumplen una determinada condición. Puedes aplicar una función que evalúa cada elemento y decides si debe ser incluido en el nuevo flujo de datos.

En resume:

• El operador map transforma cada elemento en algo nuevo y emocionante.
• El operador filter selecciona solo los elementos que cumplen ciertas condiciones.
• El operador reduce combina todos los elementos en un solo resultado.