DEV Community

Cover image for Principais métodos de array no Javascript (filter, map e reduce).
João Gabriel
João Gabriel

Posted on

Principais métodos de array no Javascript (filter, map e reduce).

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. Embora não seja um dos dataTypes primitivos, 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:

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

Repare que no exemplo acima foi passado como parâmetro do método uma Arrow Function 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.

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

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.

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

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!

Top comments (0)