Já vimos em outros artigos o que cada função faz e como podemos utilizar elas. Você verá neste artigo as principais diferenças e poder ver na prática como unir as funções em nosso código.
Primeiro temos que saber que o map() transforma os elementos de dentro de um array conforme a lógica passada dentro dele, mas nunca altera o número de posições desse array. Por outro lado o filter() pode tanto retirar elementos do array, como também os manter com o mesmo número de posições do original. Tudo dependerá dá logica que você esta definindo e passando dentro desses dois métodos. Caso tenha dúvidas leia antes os artigos que escrevi explicando sobre cada um.
Agora que já sabemos as diferenças, é possível usar esses dois métodos juntos para trabalhar ao nosso favor de forma inteligente. Vamos ver uma situação simples para fazer isso, primeiro iremos criar uma constante que vai armazenar nosso array de objetos:
const cidades = [
{ city: "Campinas", age: 246},
{ city: "Rio de Janeiro", age: 455},
{ city: "São Paulo", age: 466},
{ city: "São Bernardo do Campo", age: 462},
{ city: "London", age: 2000},
{ city: "New York", age: 396},
]
Agora vamos realizar a lógica, a regra das funções, lembrando que teremos duas funções que serão armazenadas cada um em uma constante com nomes diferentes.
Vou optar por passar como arrow function para deixar a sintaxe e o código mais curto e legível, se quiser fazer com uma função normal sem problemas. Segue abaixo as duas lógicas:
const selecionaCidade = item => item.city
const selecionaIdade = item => item.age > 246 //apenas cidades maiores que 246 anos
A primeira constante selecionaCidade apenas vai trazer o nome e vamos passar ela dentro da função map(). A segunda const tem como regra idade (age) maior que 246. Agora vamos aplicar o filter e o map e ver o resultado:
const cidades = [
{ city: 'Campinas', age: 246 },
{ city: 'Rio de Janeiro', age: 455 },
{ city: 'São Paulo', age: 466 },
{ city: 'São Bernardo do Campo', age: 462 },
{ city: 'London', age: 2000 },
{ city: 'New York', age: 396 },
]
const selecionaCidade = item => item.city
const selecionaIdade = item => item.age > 246
const filtroDaCidade = cidades
.filter(selecionaIdade)
.map(selecionaCidade)
console.log(filtroDaCidade)
O resultado disso tudo, se você testar no seu browser ou utilizando do Code Runner, será esse na imagem:
Como já era esperado a cidade de Campinas foi excluída do filtro, pois não atendia ao critério, pois a idade não era maior que 246 anos.
Mas o que o map() está fazendo? Depois que toda a verificação no filter é finalizada ele recebe o array original com o resultado do filtro. Depois ele busca apenas a propriedade city, que corresponde ao nome de cada cidade dentro do nosso array de objetos filtrado. Ele vai percorrer agora o array filtrado onde não existe mais Campinas, vai pegar cada posição do array e associar a city. Ou seja ele está percorrendo o array, verificando cada posição que contem a propriedade esperada. Só precisamos de city, e é isso que ele vai fazer, mapear e jogar apenas o nome de cada cidade dentro do novo array, vale reforçar que age não está na regra da função selecionaCidade, lembre se que passamos item.city.
Então se passar apenas o filter(), e não utilizar o map(), irei receber no resultado do terminal o objeto com city e age só que sem a cidade Campinas inclusa? Sim exatamente! Veja o resultado quando não passamos o map():
Veja que a cidade de Campinas não está inclusa no console do terminal, mas temos todas as propriedades (city e age) dentro do objeto. Você pode testar e o resultado será o mesmo!
Mas vamos ser mais curiosos ainda. E se declararmos apenas o map() passando dentro dele a regra, apenas cidades maiores que 246 anos, que é a nossa constante selecionaIdade? O resultado está na imagem abaixo:
Ué, tivemos um retorno boolean dentro do array? True e False? Sim, exatamente, conforme a imagem apresentada ele realizou uma verificação boolean. De acordo com a nossa lógica passada dentro dele, a primeira posição do array foi false por que a idade de Campinas não é maior que 246. Então se passar o mouse sobre o map() vai ver que o método também realiza operações boolean:
Mas o ponto a se destacar é que mesmo com a verificação realizada, ele não retirou o elemento Campinas do nosso array, mesmo sendo falso o elemento permaneceu e os números de posições permaneceram os mesmos do array original!
Então agora você vê a importância de juntar as funções filter() e map()? Uma completa a outra pois se tivéssemos só o map, não poderiamos retirar do nosso array o elemento que retornou na verificação como falso. Se existisse apenas filter, nunca poderíamos buscar um elemento especifico ou uma propriedade do nosso array de objetos e exibir apenas ela, o array sempre retornaria tudo de dentro do objeto, assim como foi no caso em que queríamos apenas a propriedade city, que recebia os nomes das cidades. Precisamos entender para que possamos utilizar da melhor maneira possível em nossos códigos.
Por isso minha sugestão é sempre pesquisar e praticar para fixar o que aprendeu, faça testes atrás de testes. Seja curioso! Sempre procure entender o que está codando! Para entender ainda mais recomendo realizar o debbuger desse código no navegador, vai ver tudo isso que foi comentado neste artigo passo a passo.
Agradeço por ler até o final, caso tenha alguma dúvida ou sugestão entre em contato comigo pelo LinkedIn ou deixe um comentário. Muito obrigado e até o próximo post! 😉🚀