Neste artigo você vai aprender melhor sobre o JavaScript map, um método que é utilizado para trabalhar com os itens do array
Fala programador(a), beleza? Bora aprender mais sobre o método map de JavaScript!
Quando falamos em map, estamos falando também de arrays
Pois é um método próprio para este tipo de dado, que tem como objetivo percorrer todo o array
A ideia é que ele sirva como um loop for ou while, porém em uma instrução mais condensada
E sua principal função é realizar alguma manipulação em cada um dos itens do array
Esta alteração ocorre por meio de uma função anônima que também é parte do método, ela é um dos argumentos que passamos para ele
Utilização simples do método map
Vamos entender melhor este método se vemos em ação na prática
Observe esta situação:
const names = ["Matheus", "João", "Pedro"]
names.map((name) => {
console.log("Sr. " + name)
})
Aqui estamos aplicando map para adicionar um prefixo a todos os nomes do array names
Note que a função anônima precisa de um argumento, aqui chamamos de name
A função dele é se referir ao item atual da iteração, ou seja, cada vez que a função é executada nós avançamos no array e o valor em name muda
Isso que nos dá a possibilidade de manipular cada um dos itens individualmente
Então esta maneira de chamar o item de forma individual é algo recorrente, que você verá na hora de rodar um map
Geralmente o array tem o nome dos items no plural e o argumento é o nome dos itens no singular, ou seja: names => name
O resultado desta função será:
"Sr. Matheus" "Sr. João" "Sr. Pedro"
Outras utilizações do método map
As vezes o map pode ter uma execução super simples, então não precisamos nem declarar o corpo da função
Resolver ele em um código de uma linha é bem normal também
Por exemplo:
const numbers = [1, 2, 3] const greaterThanOne = numbers.map((number) => number > 1) console.log(greaterThanOne) // [false, true, true]
No caso acima temos um array de números e estamos querendo saber quais deles são maiores que um
Então o retorno de map são valores booleanos, com a resposta dos números que são maiores que um
Por isso o retorno é: false, true, true
Veja que neste caso criamos um novo array com estes valores em boolean
Índice do item com map
Outra particularidade do JavaScript map é a possibilidade de obter o índice do item atual
As vezes isso pode ser útil, por exemplo: queremos apenas os três primeiros itens de um array, então podemos contá-los pelos índices
Veja este exemplo:
const numbers = [1, 2, 3, 4, 5]
const multThreeNumbers = numbers.map((n, index) => {
if(index <= 2) {
return n * 2
}
return n
})
console.log(multThreeNumbers) // [2, 4, 6, 4, 5]
Neste caso só multiplicamos só os itens que possuem índices menores ou igual a 2
A ação do índice foi fundamental, pois assim conseguimos controlar exatamente os itens que queremos
Retornando eles de forma multiplicada no novo array, e mantendo os demais números sem alteração
O índice é extraído através do segundo argumento do map em cada interação, assim como o valor unitário ele também alterado a cada passagem do map pelo array
Outros casos de uso para o JavaScript map
O map também é amplamente empregado no React, utilizado para manipular o JSX
Geralmente exibindo itens de uma lista no template
Por isso é interessante dominar os métodos de array, eles são amplamente utilizados em ferramentas mais modernas
Veja um exemplo de map em React:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{number}</li>);
Neste caso a lógica pode ficar entre o HTML e a execução do map, o que é algo bastante comum em React.js
Utilizar um loop for ou o map?
Hoje em dia acaba se tornando um padrão utilizar as funções de array em vez dos loops tradicionais
Pois temos diversas funções como: map, filter, reduce e forEach
Cada uma resolvendo uma situação diferente, então não se trata apenas de qual utilizar, mas sim do porque estamos utilizando
Além disso, a sintaxe torna mais enxuta, veja uma comparação:
const numbers = [1, 2, 3, 4, 5]
const doubleFor = []
for(let i = 0; numbers.length > i; i++) {
doubleFor.push(numbers[i] * 2)
}
const doubleMap = numbers.map(n => n * 2)
console.log(doubleFor) // [2, 4, 6, 8, 10]
console.log(doubleMap) // [2, 4, 6, 8, 10]
Conseguimos chegar no mesmo resultado final com as duas abordagens
Mas observe a simplicidade que map nos trouxe
Não precisamos lidar com outros métodos, como o push, pois o retorno já está implícito
Outra vantagem é não precisar de um contador, pois é garantido que o loop seja executado em todos os itens com o map
E também não precisamos acessar o item atual com o índice, pois o map nos dá essa possibilidade a partir do primeiro argumento da função anônima
Então pela possibilidade de chegar num mesmo lugar com o map, ele está sendo cada vez mais preferido do que um for ou while
Note que também temos os outros métodos de array, que já citei anteriormente e possuem seus casos de uso
Podemos entender o for como um iterador mais genérico, onde podemos fazer tudo
E as outras funções de array como situacionais
Ebook sobre JavaScript
Cortando um pouco o assunto, escrevi um ebook sobre JavaScript, que inclusive fala mais sobre o map
Você pode obtê-lo gratuitamente clicando aqui
Nele você vai aprender todos os recursos essenciais para aplicações modernas em JavaScript
Que são amplamente utilizados nas bibliotecas e frameworks do momento: React, Vue e Angular
Como estão muito em alta no mercado de trabalho, aprender todos estes recursos a fundo vai te preparar melhor para as oportunidades que envolvem JavaScript
Como é uma linguagem em constante crescimento, a maioria das vagas acaba pedindo conhecimento em JS 🙂
A função anônima não precisa ser anônima
É possível também criar uma função separada e inserir como argumento do map
O resultado final será o mesmo, mas teremos uma função que pode ser reaproveitada em outras estruturas de loop
Então é algo que pode ser encaixado em alguma abordagem onde precisamos da mesma função em dois locais diferentes, veja:
const numbers = [9, 49, 121]
function squareRoot(n) {
return Math.sqrt(n)
}
const squareRootList = numbers.map(squareRoot)
console.log(squareRootList) // [3, 7, 11]
No caso acima temos uma função chamada squareRoot que é passada no map como argumento
Ela vai receber cada um dos números do array numbers, e nos retornará a raiz quadrada deles
Como é possível ver em squareRootList, que é onde o resultado foi salvo
Desta maneira a função squareRoot pode ser reutilizada em outros métodos de array ou até mesmo loops, ou outras situações que você precisa
A sintaxe de map neste caso também é interessante, pois nem passamos o item individual ou adicionamos o parênteses da execução da função na sintaxe
O que difere um pouco da utilização normal das funções que executamos no nosso código
Mas é um resumo interessante que a função map nos permite, porém o código de forma tradicional também funciona, veja:
const numbers = [9, 49, 121]
function squareRoot(n) {
return Math.sqrt(n)
}
const squareRootList = numbers.map(n => squareRoot(n))
console.log(squareRootList) // [3, 7, 11]
Array como argumento de map
Outro argumento que o map possui é o próprio array que está percorrendo
Desta maneira temos como acessar qualquer elemento dentro de cada uma das iterações
Veja um exemplo:
const numbers = [1, 2, 3, 4, 5]
const doubleMap = numbers.map((n, i, arr) => {
console.log(n)
console.log(i)
console.log(arr) // [1, 2, 3, 4, 5]
})
No caso acima temos o array como terceiro argumento, que é opcional, não precisamos utilizá-lo, mas sempre temos acesso
Então podemos realizar alguma checagem ou alguma manipulação baseado nos valores que o array possui
Então assim temos: o valor do item atual, seu índice e o array completo, todos como argumentos do map
Map e forEach
Estes dois métodos costumam confundir os desenvolvedores
Em tese fazem a mesma coisa, percorrem um array e modificam ou executam algo nos elementos do array
Porém a grande diferença é que map faz o retorno do elemento, proporcionando montar um novo array com as modificações
Já o forEach não retorna nada, ou seja, não podemos montar uma lista a partir do que foi executado neste método
Então vamos utilizar o map sempre que precisarmos do resultado modificado em uma nova variável, por exemplo
E o forEach quando apenas é necessário percorrer uma lista de itens, e executar algo em cada um deles
Veja um exemplo:
const numbers = [1, 2, 3, 4, 5] const newNumbers = numbers.map((n) => n + 1) const newNumbersForEach = numbers.forEach((n) => n + 1) console.log(newNumbers) // [2, 3, 4, 5, 6] console.log(newNumbersForEach) // undefined
Note que a variável newNumbers contém os itens modificados, porém newNumbersForEach é undefined, já que os números não foram retornados
Então quando precisar de um retorno, você vai optar por map, em vez de utilizar o forEach
Para onde ir agora?
Sugiro pegar o embalo no map e procurar sobre os outros métodos que JavaScript possui para lidar com arrays
Escrevi um artigo que resolve um problema real com o método filter: como encontrar valores não únicos em um array
E também este outro artigo que resolve um problema com reduce: como somar os elementos de um array
Gosto destes dois pois eles aplicam as funções em situações reais, então você vai conseguir fazer analogia com as vezes que podia ter utilizado estes recursos
Tente também fazer um exercício: refaça as mesmas funções porém com os loops convencionais
Isso vai te dar mais experiência na linguagem, e também sentir a importância dos métodos mais recentes de JavaScript
Conclusão
Neste artigo você aprendeu mais sobre o JavaScript map
Uma função exclusiva de arrays, que percorre cada um dos itens de uma lista
E tem como objetivo principal modificar o valor de cada item e retorná-lo, formar um novo array com itens alterados
Não esqueça também que há outros métodos, como: filter, reduce e forEach
É interessante procurar conhecê-los melhor também, caso você queira se especializar mais em JavaScript
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!