DEV Community

loading...
Cover image for Entendendo as funções Map, reduce e filter

Entendendo as funções Map, reduce e filter

Keren Arielle
Frontend Developer
Updated on ・2 min read

A vida de um programador é baseada em alterar um array quase todos os dias. Quem nunca precisou extrair um dado de alguma API que retorna um array gigante?.

No post de hoje vou contar um pouco de cada função de manipulação de array.

MAP

É possível percorrer todos os item do array, executar alguma transformação nesses itens e retornar um novo array sem modificar o atual.

VAMOS AO EXEMPLO:

Você tem um array de número:

Alt Text

Eu quero que nesse array todos os número sejam multiplicado por 2, então você faria um MAP desse array, pegando o item e multiplicando por dois.

Alt Text

Porém o map sempre retorna um array novo, ele não modifica o atual, por conta disso atribui esse novo retorno na variável resultArray.

Filter

Como o próprio nome já diz filtro! Ele é usado para quando precisamos fazer um filtro dentro do array.

Também retorna um novo array, porém dessa vez só com elementos selecionados.

VAMOS AO EXEMPLO:

Dessa vez teremos um array com número de 1 até 10.

Alt Text

Pensando em usar o filtre, eu quero que ele filtre por números que sejam pares.

O resultado seria:

Alt Text

Reduce

O Reduce muito das vezes parece ser o mais complicado de entender, mas a ideia de usar ele é para retornar um único valor.

VAMOS AO EXEMPLO:

Abaixo vou ter um array com diversos número e vou utilizar o reduce para fazer a soma de todos eles e me retornar somente um dados.

O retorno desse array será 41.

Alt Text

Discussion (4)

Collapse
urielsouza29 profile image
Uriel dos Santos Souza

Oi, ótimo texto!
Gostaria de recomendar o uso de #braziliandevs
Ideia desta moça hneste post : ttps://dev.to/pachicodes/pt-br-por-que-escrever-e-por-que-dev-to-3f46

Como seu texto se refere a parte funcional do JS. Sugiro também #functional

Abraços

Collapse
kerenarielle profile image
Keren Arielle Author

Muito obrigada pelas dicas :)

Collapse
kg_thebest profile image
Kaique Garcia

Eu sempre me atrapalho com o reduce pela ordem dos parâmetros, mas nada que uma documentação não resolva, rs.

Parabéns pelo post, Keren!

Collapse
kerenarielle profile image
Keren Arielle Author

Muito obrigada. Realmente o reduce, é o mais complicadinho de entender rsrs