Texto de: Cristina Leandro
Métodos de Array
Métodos de array em JavaScript são funções embutidas na linguagem que te permitem fazer alterações e manipulações em um array. Existem diversos tipos de métodos com esse objetivo no JavaScript como every(), reverse(), some(), map(), filter(), indexOf() e reduce() e para realmente tirar proveito desses métodos, é preciso entender como eles funcionam.
Neste artigo, vamos focar em três deles, usados com muita frequência na programação JavaScript: map(), reduce() e filter(). Então, vamos ao que interessa.
map()
O método map() cria um segundo array a partir de dados de um primeiro array, e para isso recebe também uma função que irá ditar como os dados do primeiro array serão utilizados para gerar o segundo. A função que é passada para o método pode ser definida de qualquer uma das formas possíveis para definição de funções dentro do JavaScript, e nesse exemplo usarei a sintaxe map(function (elemento) { instrução })
O novo array gerado pelo método é preenchido com os resultados da chamada da função que você forneceu, que será aplicada a cada elemento do array original, fazendo uma espécie de transformação nesse dado para que ele fique no formato esperado para o segundo array.
Entendendo isso, é compreendido então que, o método map() pode ser usado como uma alternativa para laços de repetição onde usamos elementos de um array para preencher outro. Vamos ver isso, na prática:
Aqui temos o array nums:
let nums = [1, 2, 3, 4, 5]
Agora, o que nós queremos fazer é criar um segundo array que contenha todos os elementos de nums multiplicados por 5. Isso pode ser feito com um laço de repetição:
let nums = [1, 2, 3, 4, 5];
let nums2 = [];
for (let i = 0; i < nums.length; i++){
nums2.push(nums[i] * 5);
}
console.log(nums2);
//Resultado esperado: [ 5, 10, 15, 20, 25 ] Mas, isso também pode ser feito utilizando o método map():
let nums = [1,2,3,4,5];
let nums2 = nums.map(function(num){
return num * 5;
});
console.log(nums2);
//Resultado esperado: [5, 10, 15, 20, 25]reduce()
O método reduce() serve para reduzir um array a um único valor. Um exemplo claro é fazer a soma de todos os elementos do array, que reduziria um array inteiro a um único valor numérico. Assim como o método map(), o método reduce() recebe como parâmetro uma função, que pode ser definida de qualquer uma das formas disponíveis dentro do JavaScript pra definição de uma função. Neste exemplo, utilizaremos a declaração de função da forma mais “tradicional”;
reduce(function (acumulador, valorAtual) { instrução }, valor inicial do acumulador)
Aqui, já é notável que, diferentemente do map(), o reduce() precisa de dois parâmetros, o acumulador e o valor atual. Abaixo entenderemos o porquê.
Esse método irá executar uma função (fornecida por você) para cada elemento do array, e deverá utilizar o resultando da execução da função para um elemento para calcular o valor que deve ser retornado no próximo elemento, resultado no final da execução em um único valor de retorno.
Dessa forma, você pode reduzir um array de cinco elementos em apenas um valor, por exemplo, somando todos eles, multiplicando todos eles, etc. Aí é com você! Como no tópico anterior, para exemplificar na prática vamos usar o array nums:
let nums = [1, 2, 3, 4, 5]
Agora, o que queremos fazer é somar todos os elementos do array e retornar um único valor. Fazendo da forma tradicional, utilizando um laço de repetição, ficaria assim:
let nums = [1, 2, 3, 4, 5];
let total = 0;
for (let i = 0; i < nums.length; i++ ){
total += nums[i];
}
console.log(total);
//Resultado esperado: 15 Refazendo com o reduce(), ficaria dessa forma:
let nums = [1, 2, 3, 4, 5];
let total = nums.reduce(function (total, num) {
return total + num;
}, 0);
console.log(total);
//Resultado esperado: 15A variável total é o nosso acumulador, que é iniciado com o valor zero. Conforme o array é percorrido, cada elemento do array é adicionado ao valor anterior do acumulador, ou seja, na primeira vez o número 1 é somado ao 0, que é o valor inicial e a partir dai o próximo elemento é somado com o valor atual da variável total até que todo o array tenha sido percorrido. Por isso, é necessário o acumulador, pois os elementos somados precisam ser salvos e somados ao resultado total atual.
filter()
O método filter() serve para filtrar elementos em um array, e assim como os outros métodos desse artigo, recebe uma função como parâmetro. O retorno desse método é um novo array contendo o resultado da filtragem dos elementos do array original, e a sintaxe que vamos utilizar para exemplificar esse método segue o padrão mostrado até agora.
var newArray = array.filter(function(elemento) {condição});
A função passada para esse método deve executar algum tipo de teste e retornar verdadeiro ou falso, sendo que verdadeiro indica que esse elemento será adicionado ao array de resultado e falso indica que isso não acontecerá.
Por exemplo, imagine que em um array que contém idades, você precisa retornar apenas a idade de quem tem mais de 18 anos. Você precisa filtrar tal array com a condição idade>18, assim você terá certeza que todas as idades retornadas serão maiores que 18.
Vamos exemplificar na prática, novamente, utilizando nosso array nums:
let nums = [1, 2, 3, 4, 5]
O que queremos dessa vez é filtrar apenas os números pares de nums, usando o filter() ficaria assim:
let nums = [1, 2, 3, 4, 5];
let array = nums.filter(function (num) {
return num % 2 === 0;
});
console.log(array);
//Resultado esperado: [2, 4]
Conclusão e Resumo
Neste artigo, entendemos como map(), reduce() e filter() funcionam na prática, sendo que:
map()é usado para transformar cada elemento de um array em algo novo.reduce()é usado para combinar todos os elementos em um único valor.filter()é usado para extrair apenas os elementos que atendem a uma condição específica, criando um novo array filtrado.
