O Map é um dos métodos JavaScript para manutenção de arrays. Utilizamos ele para uma infinidade de ocasiões; mas você sabe como ele funciona? Aprenda aqui!
O array é uma das mais básicas e mais importantes estruturas que existem no JavaScript. É com ele que se pode criar coleções de informações, guardá-las na memória e utilizá-las depois. E, para fazer esse uso, existem diversos métodos dentro da linguagem de programação, alguns deles bastante simples e outros nem tantos. No entanto, para todo efeito, um dos mais importantes é o JavaScript Map.
Ele tem a função básica de substituir o uso de um bloco while, isto é, ele percorre os elementos do array executando uma função. Sendo assim, é uma forma de, como o nome sugere, mapear o conteúdo da estrutura para outra forma; imaginemos, por exemplo, a seguinte ocasião: temos dois arrays, um cheio de números e outro vazio. Através deste método, é possível preencher o segundo array com o dobro de cada um dos valores do primeiro array.
Os arrays têm, ainda, diversos outros métodos e usos, os quais nós já explicamos antes neste artigo só sobre eles. Sem mais delongas, vamos à explicação de como o método Map funciona!
Como funciona o método map?
O método map, como já citamos antes, percorre o array fazendo a execução de uma função para cada elemento. Desta forma, ele resume um laço que percorreria os elementos realizando alguma ação e retornando novos elementos. Portanto, ela se parece bastante com o método forEach(), que tem a mesma função; no entanto, há uma diferença capital entre os dois: enquanto que o Map não modifica o array inicial, o forEach sim. Portanto, caso queira manter o array original intacto após o processo, deve-se usar o Map.
O método map funciona através da execução de uma função de callback. Isto significa que ele é uma função que recebe outra função como parâmetro, para poder executá-la. Portanto, ele não tem um comportamento padronizado, mas sim age conforme o programador queira. Isto se dá porque o Map é uma das chamadas Higher Order Functions (HOF). Para completar o entendimento de como isso se dá, vamos explicar melhor o que são estas:
O que é uma Higher Order Function?
Uma HOF, ou função de nível superior em tradução direta do inglês, é um conceito matemático e da ciência da computação que define uma função que faz pelo menos um dos seguintes:
- Recebe uma função como parâmetro;
- Retorna uma função ao final da execução.
E, principalmente no JavaScript, a maioria das vezes que utilizamos esse tipo de função, nós enviamos outras funções como parâmetros. É pouco usual os casos em que retornamos funções de outras funções; embora seja perfeitamente usável, acaba acontecendo poucas vezes (a menos que ou você seja muito bom ou esteja tratando com componentes de frameworks, que são no fundo do fundo funções, mas isso é um assunto mais complexo). É por isso que as funções de alto nível, como o próprio forEach, não têm um comportamento pré-definido: ela faz exatamente aquilo que você passa como parâmetro.
É, portanto, uma função com alto grau de customização e que por vezes é de difícil entendimento à primeira vista, especialmente quando construída fora de algumas das estruturas pré-definidas da linguagem. Apesar de ser conceitualmente estranha, com a prática você se acostuma, após alguns usos. Fora o map, em JavaScript, temos ainda alguns outros exemplos de Higher Order Functions, como o próprio forEach, .filter(), .reduce() e mais algumas outras.
Como isso se aplica ao Map?
Agora, chegamos ao nosso desejado Map. Conforme citamos anteriormente, ela irá iterar sobre todo o array e aplicar alguma lógica definida pelo programador, retornando depois algum novo valor. Novamente, vale salientar: ele nunca terá efeito colateral, isto é, ele não modifica o array original! O que ele faz é ler aquele em que ele foi chamado e executar alguma ação em cima disso. Vejamos agora a sintaxe básica do Map:
Explicando por partes:
- array: se refere ao array no qual queremos que essa regra seja chamada;
- map: é a chamada da função de nível superior;
- elemento: é um parâmetro obrigatório que se refere ao elemento que está sendo iterado agora. Lembra que a regra do map se aplica a cada um dos elementos do array? É com esse parâmetro que você irá utilizá-los;
- index: é um parâmetro opcional que se trata de um índice de elemento fornecido pela própria função. É muito útil em frameworks que pedem que elementos renderizados em uma página web tenham índices próprios (como acontece no React, por exemplo);
- array: é um parâmetro opcional que trata de repassar o array em que o método mapirá iterar (sim, a ideia de ter o próprio array passado como parâmetro é estranha, mas mais à frente fará sentido! Confie em mim);
- argumentos: é a função que será executada para cada índice do array.
Lidando com o callback
Agora que tivemos esse contato inicial com o map, é preciso explicar o que é o callback. A chamada função de callback, que é a que vem dentro dos parênteses do map (e, portanto, é a função passada como argumento para a outra função), está, no caso do exemplo dado antes, criada em formato de arrow function. No entanto, você pode também criar uma função externa e chamá-la dentro do callback, contanto que ela se encaixe à norma obrigatória, que é de ter pelo menos um parâmetro para ser iterado.
Vamos ver exemplos claros dessa função em execução:
A função de callback deve imprimir no console cada elemento do array array. Vejamos em execução:
Como o comportamento ocorre conforme previsto, vejamos agora a outra forma de desenhar essa função: vamos criar a função do callback em separado e apenas invocá-la como parâmetro para o map:
Como você pode ver, na chamada da função, sequer precisamos informar quais são as variáveis. Isso ocorre porque a própria implementação do método map entende esse uso, e pede apenas que a função passada como variável esteja conforme o requerido, que é aceitar pelo menos um parâmetro para servir de iterador. Essa forma de uso segue os princípios do código limpo por ser mais semântica e facilmente entendível, dado que ela reduz a quantidade de código aninhado e mantém intacto o preceito de que cada função deve fazer apenas uma coisa. É, portanto, preferível que se construa e chame a função do callback assim; contudo, sinceramente, às vezes a preguiça fala mais alto e acabamos fazendo da primeira forma, mesmo.
Utilizando os parâmetros index e array
Explorando um pouco mais da sintaxe da função map, vamos explorar o uso dos parâmetros index e array. Primeiro, adicionemos apenas o index:
Como você pode ver, pela própria sintaxe da função, não precisamos modificar nada na chamada do callback no map; ele irá entender o que está em execução sem problemas. Se atente para o fato de que eu modifiquei o array de entrada, para que não fique confuso. Agora, vejamos a execução:
Como se percebe, a função dá um índice ao elemento sendo iterado com base na sua posição do array de entrada, o que, como citado anteriormente, é útil para o uso em frameworks que pedem indexação para componentes repetidos. Por exemplo, em React, imaginemos um feed de notícias: cada notícia é uma repetição de um mesmo componente, sendo que cada um vai ser preenchido com dados diferentes extraídos do back-end. Então a livraria pede que cada um deles tenha um índice único, para que não haja bugs na experiência do usuário. É agora que o index vem a calhar!
Agora, vejamos o array:
Acontece basicamente a mesma coisa que no index, por isso, não é preciso repetir a explicação. No entanto, note que interessante: o array que está iterando é passado por inteiro para a função do callback, para que ela possa conhecê-lo. Dessa forma, não é preciso utilizar de uma variável global caso, por algum motivo, fosse preciso fazer uso do array por inteiro dentro do callback: a própria implementação da função oferece suporte para essa necessidade.
Se você tiver tentado copiar algum dos exemplos apresentamos, notou sem dúvidas que durante todo o tempo o console pede que seja adicionado um return no callback da função. Isso se dá porque, conforme citamos antes, o Map não altera o array inicial. Portanto, ele serve sempre para se utilizar do que será retornado na chamada. Sempre! Sem isso, o melhor é que se use o forEach(), que é o método apropriado por não pedir retorno.
Mapeando elementos para a tela em frameworks
Quando se trata do desenvolvimento web front-end, o método Map adquire um caráter novo e ainda mais importante: ele é capaz de fazer com que arrays de itens sejam renderizados na tela. Isto é, você pode guardar longas coleções que quer que apareçam em tela, e em seguida fazê-las aparecer sem que seja necessário programar na tela uma infinidade de componentes. É assim, por exemplo, que é possível receber listas de informações do back-end e fazê-las ir para a tela, independente de quantos itens esta lista tiver.
O funcionamento desta ferramenta é muito simples. Vamos ver como ela funciona utilizando o framework do React:
No exemplo, que, como costumamos fazer, é de um projeto real, temos um array de diferentes cotações que serão renderizadas em tela. Para tanto, na formação do componente com o JSX, temos a chamada do array com o método Map, que retorna, na função de callback, o componente que queremos. Dessa forma, eles são renderizados na tela dessa forma:
Como se pode notar, essa é uma ferramenta não só muito útil, como na verdade crucial para o desenvolvimento web. Imagine que você, no front-end, recebe do back-end uma lista de informações. Agora imagine que essa lista pode mudar de tamanho: às vezes, ela terá 10 itens; às vezes, 20. Imagine o caso para tentar fazer isso aparecer na tela manualmente! É fácil de perceber que não é nada escalável e, por vezes, até impossível de se fazer.
Aviso quanto ao método Map
Além dos problemas de legibilidade do Map, que resolvemos em parte programando a função separadamente e chamando-a no callback, ela também sofre de um mal: é uma função com um tempo de execução inferior. Pela própria definição da função em JavaScript, ela sofre de problemas de lentidão se usada em arrays muito grandes. Por isso, por vezes, pode ser melhor construir um laço for e iterar sobre o array “à moda antiga”. Afinal de contas, se observarmos bem, é isso que o Map faz: resume um laço for a uma simples função de nível superior, desta forma reduzindo a necessidade de codificar mais, às custas de um tempo de execução maior.
Claro, caso o array em questão seja pequeno, isso não será algo que irá atrapalhar o funcionamento do seu programa. É algo que se deve pensar, contudo, quando o código deve iterar 1000, 10.000 vezes, ou até mais. É problema para projeto grande! Portanto, no uso geral do Map, você deve se preocupar com se o seu código está entendível e se é possível fazer manutenções nele, para aprimorá-lo ou consertá-lo. Isso é mais importante do que toda a parte conceitual “chique” que ensinamos aqui! Mantenha o seu projeto funcionando.
Além disso, há um bug comum ao renderizar componentes na tela em programação front-end: às vezes, o mapeamento acaba disparando re-renders sucessivos, o que levará a uma lentidão no carregamento da página. Às vezes, se o Map ou o componente a ser renderizado estiver mal construído, a página pode simplesmente deixar de carregar, e a sua tela ficará toda branca. Tome muito cuidado com isso!
E, caso tenha gostado desse artigo, lembre-se de recomendá-lo aos seus amigos! Até mais.
