Digamos que temos um determinado array com valores e será necessário inteirar cada um desses valores e transformá-los?
Alguns provavelmente podem pensar em um for passando por cada um dos elementos e alterando. Sim, esta e outras formas podem chegar ao mesmo resultado.
Porém com map você constrói um novo array a partir do outro. Este novo array terá o mesmo tamanho, mas o conteúdo poderá ser mapeado.
Frisando que o array de origem não se altera e este conceito vem do Funcional e está sendo muito utilizado. Você evita side effects, melhora os testes e outros benefícios são ganhos com este tipo de paradigma.
Não vou detalhar muito este conceito, mas você pode pesquisar algo relacionado que encontrará vários artigos sobre.
Aqui se encontra um array de usuários que iremos utilizar neste post.
Imagine que dado um array você precise mapear apenas as idades dos usuários para um novo array.
Sem o método map, uma das formas de realizar este mapeamento seria assim:
Agora com o método map, você verá como isso será feito utilizando muito menos código.
Sim, isso acima traz o mesmo resultado do código anterior.
O método map chama a função callback recebida por parâmetro para cada elemento do Array original, em ordem, e constrói um novo array com base nos retornos de cada chamada. No nosso caso, todo o retorno é os objetos com a propriedade age.
Para podermos entender melhor como este fluxo é feito. Iremos escrever uma função chamada map que irá realizar o mesmo conceito de função original.
Na variável mapAges vamos ter um array com somente as idades dos usuários.
Utilizando map para formatar moeda
Neste caso, temos um array de objetos com informações necessárias para podermos formatar o valor de moeda. Criamos uma função que recebe um item e retorna um objeto com a propriedade amountFormatted
Criamos uma nova variável chamada amountFormattede iremos inteirar nosso array com a função formatCurrency()
O retorno contido em amountWithCurrencyserá um novo array com objetos e os valores já formatados de acordo com o currency e language de cada objeto.
Map e React
Em React, transformar array em listas de elementos é feito de forma parecida.
Você poderá renderizar múltiplos elementos em React incluindo-os no JSX. No exemplo abaixo, iremos utilizar o mesmo array de usuários para poder dar um Hello para cada um deles.
