Cómo derrotar al imperio (en JavaScript) mediante map, filter y reduce.

Óliver Hierro
2 min readMar 1, 2021
Photo by Daniel Cheung on Unsplash

Hoy vamos a ver cómo derrotar al imperio utilizando las funciones map, filter y reduce.

Para poder hacerlo, vamos a contar con una serie de “pilotos”, tanto de la alianza rebelde como del imperio, en formato de array de objetos:

Antes de ponernos a salvar la galaxia, vamos a ver la definición de las funciones

Filter

Quizás la más intuitiva de las 3 y, a la vez, una de las más utilizadas

let newArray = arr.filter(callback(currentValue[, index[, array]]) {
// return element for newArray, if true
}[, thisArg]);

Filter nos permite “filtrar” los elementos de una array en base a una función. De hecho, el único propósito de esta función es determinar si un elemento pasa o no pasa el filtro.

Es decir, si quisiéramos seleccionar únicamente los pilotos rebeldes, tendríamos algo de código cómo:

CÓDIGO DE EJEMPLO

Map

var nuevo_array = arr.map(function callback(currentValue, index, array) {
// Elemento devuelto de nuevo_array
}[, thisArg])

La función map nos permite aplicar una función de transformación, de cada un de los valores, en elementos totalmente nuevos. Es decir, nos permite transformar cada uno de los elementos del array en un objeto nuevo.

Para ver un ejemplo, vamos a partir del siguiente array de objetos, donde tenemos, tanto soldados imperiales como rebeldes.

Si lo que queremos es únicamente obtener los nombres de cada uno de los pilotos, podríamos aplicar algo cómo

Reduce

Quizás la función que, a priori, nos pueda parecer más compleja.

arr.reduce(callback( accumulator, currentValue, [, index[, array]] )[, initialValue])

La función reduce, recibe 2 parámetros:

  • Callback para aplicar en cada elemento
  • Valor inicial (opcional)

Con esta función, podemos aplicar un comportamiento de agrupación sobre los elementos, a partir de un valor inicial.

Por ejemplo, saber cuantos misiles tenemos disponibles entre todos los pilotos

Una de las cosas interesantes de estas funciones, es que nos van a permitir anidarlas para, realizar múltiples operaciones simultáneas.

De hecho, para derrotar al imperio, necesitaremos:

  • Seleccionar únicamente los pilotos rebeldes
  • Aplicar una función de mapeo para calcular los porcentajes de acierto
  • Hacer un cálculo para saber qué batallas podemos ganar o no, en base al total de “power” del que disponemos.

Proyecto completo:

https://github.com/ohierro/medium/tree/master/01_filter_map_reduce

--

--

Óliver Hierro

Desarrollador de software en @Hiberus. Java, JavaScript, Angular, Vue. Profesor en @Sanvalero. Papá de Ian y Zoe.