Map, Filter e Reduce: Explicando de forma Simples.

Eu sempre vejo o pessoal se perguntando quando usar map, reduce ou filter então mesmo tendo muita coisa por aí falando sobre resolví criar este post explicando da forma mais simples possível e quem sabe ajudar você(s) nisso e ainda fixar melhor o conceito.

É importante reforçar que existem:
“Arrays, representados por []”
“Objetos ou listas, representados por {}”

Basicamente…

MAP : Corre/ pega/ mapeia cada um dos elementos do array e te retorna aplicando uma determinada regra um novo Array sempre com o mesmo tamanho.

No exemplo abaixo eu estou pegando cada um dos elementos do Array Inicial e multiplicando cada elemento dele por 2.

Codificando ficaria:

const array = [2,4,5,10,8,1];

function dobro(num) {
    return num * 2
}

const novoArray = array.map(dobro);

console.log(novoArray);

// o retorno deverá ser [ 4, 8, 10, 20, 16, 2 ]

FILTER: Basicamente corre os elementos de um array implementando as regras para lhe gerar outro Array com os resultados desta filtragem. Este array não necessáriamente precisa ser do mesmo tamanho.

No exemplo abaixo o filtro é aplicado em um Array, selecionando aqueles elementos que são maiores ou iguais a 5. Com isso temos os retornos “true” somente para 3 posições do Arrray, a 2, 3 e 4.

Literalmente um filtro.

Codificando, ficaria:

const array = [2,4,5,10,8,1];

function regraDoFiltro(num) {
    return num >= 5
}

const novoArray = array.filter(regraDoFiltro);

console.log(novoArray);

// resultado esperado 5,10,8

REDUCE: Vai correr os elementos de um Array os somando. Para isso ele usa dois parâmetros. Um acumulador e o próximo elemento do Array.

1	(acumulador, elemento)

Esse acumulador poderá ser um array ou objeto ou string ou número ou qualquer coisa que você queira colocar pra esse acumulador. O Elemento será cada um dos elementos do Array que está sendo aplicado o reduce.

Se não existir um valor inicial ele utilizará os dois primeiros elementos do Array para inicializar as operações de reduce.

No exemplo abaixo bastante simples, faço um reduce em cima de um Array onde inicializo o valor do acumulador com “0”. Ele vai efetuando a soma de todos os elementos do array junto ao acumulador.

Neste caso acredito que o código puro mesmo deixe mais fácil entender…

const array = [2,4,5,10,8,1];

// a = acumulador e b = elemento
a = 0;

function somar(a,b) {
    return a + b
}

const novoArray = array.reduce(somar)

console.log(novoArray);
// resultado esperado 30

Boa Quarentena pra todos, fiquem bem!