Map, Filter y Reduce

Map, filter, y reduce son funciones de las listas, en JS llamadas array’s, que te permiten manejarlas fácilmente, aunque estas funciones son fáciles de usar vamos a ver que se puede hacer con ellas, para esto primero veamos como se harían desde 0.

La función map transforma, esto haciendo que te permita retornar un nuevo array con la función que se declare. La Y ahora la implementación del map, como vamos a iterar listas hay que tener claro los conceptos de iteración y de ciclos en programación.

map recibe una función y una array de elementos, en cada iteración está ejecutando la función y le pasa el elemento actual, el índice y el array completo, y el valor que retorne esa función será asignado a cada posición de la nueva array, y por último retorna el nuevo array

      
        
      
      const map = (mapper, array) => {
  let newArray = []
  for (let index = 0; index < array.length; index++) {
    newArray[index] = mapper(array[index], index, array)
  }
  return newArray
}

const squares = map(
  (number) => {
    return number * number
  },
  [1, 2, 3, 4]
)

console.log(squares) // [1, 4, 9, 16]
    

Esta es la manera en la que funciona map, recibe un array y una función y retorna una nueva array transformada según la función.

El filter sigue una estructura similar al map, lo diferente es que ahora él va a incluir los elementos de una lista según un predicado (función que retorna un booleano). El fin de este filter es que va a retornar una nueva lista, pero solo con los elementos que cumplan la condición, entonces miremos su implementación.

filter recibe una función y un array, esta función retornará un booleano y según sea el caso se añade a una nueva array que retornara.

      
        
      
      const filter = (predicate, array) => {
  let newArray = []
  for (let index = 0; index < array.length; index++) {
    if (predicate(array[index], index, array)) {
      newArray.push(array[i])
    }
  }
  return newArray
}

const evens = filter(
  (number) => {
    return number % 2 === 0
  },
  [1, 2, 3, 4]
)

console.log(evens) // [2, 4]
    

El filter incluye según el predicado, si cumple la condición se pondrá en la nueva lista, también hay que tener en cuenta los falsy values .

Él reduce a diferencia del map y el filter te permite más flexibilidad, porque te permite tener un acumulador que se inicialice y luego se modifique. La implementación de reduce es similar a las funciones vistas, pero la forma en la que se puede usar es diferente.

Él reduce recibe un reductor, un valor inicial y una lista, el valor inicial va a ser del acumulador que va a modificarse, por cada iteración y por último retornarlo, así las suma del la lista de números, sería 0 + 1 + 2 + 3 + 4.

      
        
      
      const reduce = (reducer, init, array) => {
  let newValue = init
  for (let index = 0; index < array.length; index++) {
    newValue = reducer(newValue, array[index], index, array)
  }
  return newValue
}

const totalSum = reduce(
  (sum, number) => {
    return sum + number
  },
  0,
  [1, 2, 3, 4]
)

console.log(totalSum) // 10
    

Él reduce te da ventajas mayores porque te permite modificar el valor inicial para lo que sea necesario, por lo cual tú podrías hacer un map y un filter usando un reduce.

Entonces primero declaramos reduce con su funcionalidad, luego lo que se hace es iniciar el acumulador con una lista vacía y dentro del reductor se hace la lógica del map y filter.

      
        
      
      ...

const map = (mapper, array) => {
    return reduce((list, element, index, array) =>
        [...list, mapper(element, index, array)],
        [],
        array)
}

const filter = (predicate, array) => {
    return reduce((list, element, index, array) =>{
            if (
                predicate(element, index, array)
            ) list.push(element)
            return list
        },
        [],
        array)
}
    

Ya estaría, aunque no es tan legible esta forma nos introduce a los transduction para poder tener map y filter en una misma iteración.

Y listo has aprendido como está compuesto map, filter y reduce, ahora puedes usarlo en tus proyectos