Principais métodos de array no Javascript (filter, map e reduce).
Tags: javascript, tutorial, beginners, learning
Published: 2024-02-17 18:38:01

O javascript é uma linguagem comumente utilizada por desenvolvedores independente de stack ou sênioridade, justamente pelo fato de ser muito flexível e principalmente por ser uma linguagem que funciona nativamente em todos os navegadores.

Como toda linguagem de programação, javascript possui ``Arrays`` que, no JS, podem armazenar dados de diferentes [dataTypes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures). Embora não seja um dos [dataTypes primitivos](https://developer.mozilla.org/en-US/docs/Glossary/Primitive), o ``Array`` é um ``Object`` como qualquer outro, mas que herda alguns métodos e propriedades do ``Array.prototype``, nesse post você verá sobre alguns dos métodos comumente utilizados em ``Arrays``: 

- [.filter()](#filter);
- [.map()](#map);
- [.reduce()](#reduce);

<a id="filter"/>
## Método filter:
O método filter, como o próprio nome diz, serve para filtrar os dados presentes em um Array. O método recebe como parâmetro uma função de callback que é executada uma vez para cada elemento dentro do Array que foi chamado. O retorno do método é um novo Array com somente os itens que passaram no filtro, caso a função de callback retorne ``true`` o elemento é mantido no Array de retorno da função filter, por outro lado, caso a função de callback retorne ``false`` para o elemento em questão, ele é eliminado do Array de retorno da função filter.

Vamos ver no exemplo abaixo uma utilização do método filter na prática:

![Trecho de código explicando o método filter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvvbum02a1qax85lex25.png)

Repare que no exemplo acima foi passado como parâmetro do método uma [Arrow Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) que retorna ``true`` para elementos que sejam do tipo ``String`` e false para outros elementos, dessa maneira acabamos de aplicar um filtro em cima do array original para obter apenas os elementos do tipo ``String``. Vale ressaltar que o método não altera o Array original, e retorna uma cópia filtrada do mesmo, como podemos ver no retorno abaixo do código.

<a id="map"/>
## Método map
O método map é utilizado como um loop dentre todos os elementos do Array, é um método muito semelhante ao forEach por exemplo, porém o map consegue retornar um novo Array, sem alterar o Array original (assim como o filter) com os novos elementos que retornarmos. 

> Como o método map retorna um novo Array, diferente do método forEach, é possível encadear outros métodos em cima do retorno do map.

O método também funciona através de uma função de callback passada como parâmetro que manipula os elementos do Array. Veja um exemplo abaixo:

![Trecho de código explicando o método map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7za6wgswp68yee40653.png)

No exemplo acima, todos os elementos da constante **array** foram multiplicados por 2 e o novo Array gerado pelo método map foi alocado na constante **newArray**, é possível observar os dois Arrays no final da execução, observe que o Array original não foi alterado.

<a id="reduce"/>
## Método reduce
O método reduce serve para reduzirmos todo um Array para um único número. Diferente dos outros métodos aqui citados, o método recebe dois parâmetros, o primeiro ainda é uma função de callback e o segundo é o valor inicial do retorno da função. 

A função de callback do método reduce recebe dois parâmetros: o primeiro é um "acumulador" que contém o retorno dos elementos anteriores e o segundo é o atual elemento em que a função está no Array original, aqui vamos chamá-los de: ``accumulator`` e ``currentValue``. O método retorna um número.

Veja um exemplo somando todos os números de um Array:

![Trecho de código explicando o método reduce](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08fay81potsd2q3ia51f.png)

Repare que foi passado como segundo parâmetro do método o número 0, como dito acima, esse número é o valor inicial de retorno do método, caso esse número fosse 1 o retorno do método seria a soma que foi calculada + 1, já que o valor inicial começa em 1 e não 0. Para realizar a soma do Array, retornamos o ``accumulator`` + ``currentValue``, dessa forma o accumulator do próximo elemento sempre será a soma de seus antecessores e quando chegar no fim do Array teremos a soma de todos os seus valores!

## Conclusão
Chegamos no final do post e agora você tem conhecimento sobre alguns dos principais métodos do javascript! Esses métodos com certeza são os mais utilizados (além de métodos mais simples como push e pop) dentro da linguagem, seja qual for o problema que for enfrentar, é sempre bom saber como utilizar esses métodos que auxiliam na resolução de qualquer problema!