JavaScript

JavaScript map: como funciona e quando utilizar

30 de abril de 2022

JavaScript map: como funciona e quando utilizar

Neste artigo você vai aprender melhor sobre o JavaScript map, um método que é utilizado para trabalhar com os itens do array

JavaScript map capa

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!

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x