Javascript Map(): o que é e como funciona o método map ()?
Quando trabalhamos com o JavaScript, em diversos momentos precisamos manipular dados dentro de arrays. Para que isso se torne mais célere e produtivo para as pessoas desenvolvedoras, a própria linguagem de programação traz consigo diversos métodos nativos que auxiliam nesse processo.
No artigo de hoje, aprenderemos sobre o map, um dos principais métodos do JavaScript, e o seu funcionamento dentro do nosso código.
O que é map JavaScript?
O map é um método nativo do JavaScript, utilizado na manipulação de dados dentro de arrays. Seu funcionamento é semelhante a uma estrutura de repetição, como, por exemplo, um loop for, pois executa uma determinada ação em todos os elementos do array.
Para que serve o map na programação?
Quando precisamos manipular dados dentro de um array, o map é um alternativa as estruturas de repetições mais tradicionais, como o loop for e while. A sua utilização faz com que nossos códigos fiquem mais enxutos e legíveis, facilitando uma futura manutenção e reduzindo as linhas de código.
Outro ponto importante sobre esse método é o fato dele não fazer nenhuma alteração nos dados originais do array. O seu retorno cria um novo array com as informações anteriores atualizadas de acordo com uma ação determinada pela pessoa desenvolvedora.
Como usar a função map do JavaScript?
Sua sintaxe é bem simples. O método map recebe como parâmetro uma função de callback e, opcionalmente, um argumento, que será utilizado como o this no momento da execução da callback.
Dentro dessa callback, recebemos outros três parâmetros. São eles:
- Elemento atual
Valor do elemento atual no array original.
- Index
O índice do elemento atual que está sendo processado no array.
- Array
O array de origem.
A construção da sintaxe por completo ficaria da seguinte forma:
Como funciona o método JavaScript map? Confira 5 exemplos práticos
O map pode ser utilizado em diferentes contextos para chegar a um resultado específico. Abaixo exemplificaremos algumas das suas utilizações.
Exemplo 1
Nesse primeiro exemplo, temos um array de números e o nosso objetivo é percorrer todos os itens da lista e retornar os números multiplicados por dois.
Sabemos que o método map retorna um novo array, sem alterar os dados do array original. Devido a isso, precisamos criar uma constante para armazenar esse valor. No nosso exemplo, criamos a constante novoArray e fizemos um map, passando como parâmetro os elementos do array original, onde todos esses elementos serão percorridos e multiplicados por dois.
Exemplo 2
Agora vamos exemplificar de uma maneira diferente. Primeiro, vamos criar um arquivo index.html e linkar com o nosso arquivo index.js. O nosso arquivo index.html ficará da seguinte forma:
Já em nosso arquivo index.js, o nosso objetivo será capturar todos os parágrafos presentes em nosso HTML e alterar a cor de texto de todos para vermelho.
Vamos entender o código:
Primeiro, criamos uma constante paragrafos para capturar todos os elementos do nosso HTML. Feito isso, vamos precisar transformar essa NodeList em um array através do método Array.from. Dessa forma, poderemos utilizar o map e percorrer cada elemento da lista, alterando a sua cor através da propriedade style.
Exemplo 3
Nesse exemplo, teremos um array de objetos contendo propriedades de nome e preço de alguns produtos. Nosso objetivo com o map será armazenar em um novo array o nome do protudo junto com o preço em uma string da seguinte forma: “Nome do produto – R$ 10,00”. Vamos lá?
Repare que utilizamos o método map para percorrer o nosso array produtos e retornar um novo array contendo o nome e valor de cada um dos elementos presentes no array original.
Exemplo 4
Vamos imaginar o seguinte cenário: Irá ocorrer uma competição de melhor fantasia na sua cidade, onde três pessoas receberão uma premiação. O sistema de ranking de posições será feito utilizando os arrays para armazenar os competidores, onde a posição dentro da lista reflete o desempenho na competição. Foi solicitada que você, como pessoa desenvolvedora, listasse competidores em um novo array, colocando a sua respectiva posição. Exemplo: “Matheus Felipe – 1ª posição”.
Vamos entender o código:
Estamos fazendo um map no nosso array original de competidores, recebendo como parâmetro o elemento atual e o seu index. Porém, o index de um array sempre começa em zero. Em nosso ranking da competição, não existe nenhuma posição zero. Por isso, ao retornarmos a string contendo as informações dos vencedores, precisamos somar o index tual + 1.
Exemplo 5
Para finalizar nossos exemplos utilizando o método map, vamos receber um array contendo o nome de algumas pessoas. Nosso objetivo será colocar em letra maiúscula todos os nomes que comecem com a letra A.
Para chegarmos ao objetivo proposto inicialmente, precisamos percorrer o array de nomes com o map e criar uma condicional, verificando se a primeira letra do elemento era “A”, através do método charAt() na posição zero. Se essa condição for verdadeira, o elemento será retornado com o nome todo em maiúsculo. Caso contrário, permanecerá normal.
Compatibilidade do Map () com os navegadores?
O map foi adicionado ao JavaScript em sua 5ª versão. Atualmente, esse método já possui compatibilidade e suporte da maioria dos navegadores, conforme informações do Can I Use. Apenas o Android Browser, em suas versões 2.1 – 4.3, não suporta esse recurso.
Conclusão
O JavaScript é uma linguagem com diversos recursos nativos poderosos e essenciais para manipulação de dados em nossos códigos. Assim como método map, existem diversos outros que podem auxiliar a pessoa desenvolvedora a chegar ao resultado desejado.
Possuir o conhecimento sobre esses métodos e saber utilizá-los corretamente irá transformá-lo em um profissional diferenciado e valorizado no mercado de trabalho. Pensando nisso, aqui na Kenzie Academy Brasil, preparamos os nossos estudantes com exemplos práticos e reais, ensinando os principais métodos e como utilizá-los em seus códigos de maneira produtiva e eficaz.
Comece agora mesmo os seus estudos em programação e dê um passo a mais na sua carreira!