Array métodos — map, filter e reduce

Vamos agora conhecer e ver o uso desses métodos para tratativas de arrays, ambos são simples e os mais famosos em relação a tratativas.
Vamos conhecer o objetivo de cada um deles primeiramente.

.map( )

Basicamente a função do .map() é criar um novo objeto com os dados pedido, vamos imaginar um cenário assim:
Temos 3000 usuários, todos eles possuem NOME, CPF e ENDEREÇO. Mas na nossa aplicação só precisamos mostrar um único item desses, digamos o “NOME”.
Vamos fazer assim pra não trazer dados desnecessários:

Aqui no exemplo acima eu só falei me cria uma outra lista com os itens nome.
Mas podemos fazer validações com .map() também, por exemplo: de trazer itens que sejam até determinado número e assim criar um array novo com eles, mas isso depende da necessidade.

Obs. Com arrow functions não precisamos nos preocupar em colocar return, pois o conceito de arrow functions é de função com retorno imediato, assim dispensando a palavra function e return na função. ;)

.filter( )

O nosso .filter(), como o nome mesmo diz ele filtra objetos pelo valor que o objeto recebe.
Basicamente, usando esse mesmo código vamos fazer com que ele nos retorne quem é de São Paulo:
Cenário:
-Temos uma lista de animais de diversos tipos e queremos trazer somente os DOG’S em um novo array, faremos assim:

Dica: Se eu quiser posso dar um .map() nesse array chamando a variável dogs e trazer somente os dogs de Sao Paulo, nada me impede de usar outro método no resultado de cada um deles.

.reduce( )

O reduce basicamente soma os itens de um array usando o primeiro parâmetro como o valor fixo e percorrendo pelo índice de array com o segundo parâmetro:
Cenário:
-Tenho 6 números no meu array e quero fazer a soma total deles.

Observe, podemos realizar diversas operações usando o .reduce(), por a característica dele é única de pegar o valor acumulado e próximo da interação até que acabe os itens, no nosso exemplo eu somei eles.
Estrutura do reduce:

const soma = arrayMoney.reduce((acumulativo, item) => {
  return acumulativo + item.money;
}, valorInicial);

Meu valor inicial poderia ser qualquer um, se eu colocasse -10 eu subtraia 10 da minha soma final.

Quando eu me refiro como acumulativo é o valor que vai ser armazenado lá como resultado de cada interação de soma.

Em todos os exemplos nosso item pode ser alterado, pois eu sempre me refiro como o item de saída do meu resultado do método, eu poderia por exemplo colocar:

const newArray = userList.map(pao => pao.name);

Bom galera, acho que simplifiquei ao máximo esse tres métodos com exemplos diferentes. qualquer duvida comenta aqui que responderei e se te ajudei talvez eu possa ajudar mais pessoas, então compartilha com o amiguinho.