o loop map no javascript

Com o avanço das linguagens, algumas tarefas que eram construídas manualmente ganharam aliados interessantes. E um deles é o método map.

O map faz parte do conjunto de métodos disponíveis na linguagem para a manipulação de array.

Acredito que o que a torna uma queridinha é que funciona como uma estrutura de repetição que percorre todos os elementos do array, executa determinada ação e retorna um novo conteúdo.

O ganho de utilizar o map ao invés das estruturas de repetição tradicionais, como while, for ou do.while é sua simplicidade em quantidade de código e clareza lógica.

Novamente, o map() faz a leitura de todos os elementos do array, executa uma função callback para cada um e devolve como retorno um novo array. É importante dizer que o método map() não executa nenhuma alteração no conteúdo do array original.

forEach vs. map

A principal diferença entre os dois métodos é que o map() devolve o resultado em um novo array, enquanto o forEach() apenas executa determinada função para cada elemento.

É importante entender essa diferença para utilizar o método mais indicado, de acordo com a necessidade da aplicação web.

Sintaxe do map()

O método map() é acionado a partir de uma array e utiliza uma função callback como argumento.

Onde

  • array_original: corresponde ao objeto do tipo array que contém os elementos originais;
  • funcao_callback:
  • elemento_atual: representa o elemento corrente durante o loop de execução do método;
  • índice: valor opcional e corresponde à posição do elemento_atual no array;
  • array_original: (argumento) conteúdo opcional, que representa o array de origem;
  • this_argumento: valor opcional, que corresponde ao this utilizado pela função callback.

Manipular o método map precisa de entender alguns detalhes no seu funcionamento.

Os elementos que serão processados pelo map() são listados no momento em que o método é chamado. Por isso, caso haja alteração na lista, a função callback não irá visualizar essa alteração e terá resultados inesperados.

Vamos ao exemplo

Utilizar o índice do array para exibir a posição de cada elemento na lista de dados ou para indicar a sua classificação.

Temos um array que representa a colocação dos alunos e utilizamos o JavaScript map index como forma de apresentar a ordenação.

No array original, temos a lista de alunos que já está indexada de acordo com a nota máxima do aluno. Utilizamos o método map() e passamos o elemento e o índice do array como parâmetros.

Além disso, utilizamos a arrow function, que é uma forma de utilizar funções de maneira declarativa. Dessa forma, tudo o que está após a seta “=>” e entre as chaves {} faz parte da função.

A seguir, criamos um elemento que retornará o nome completo e a classificação, que precisamos adicionar um, pois o índice do array sempre começa com zero.

Por fim, adicionamos a nota do aluno e exibimos o resultado na console do navegador.

Esse exemplo e outros bem detalhados consultei no artigo da betrybe.

Durante o desenvolvimento da aplicação é interessante consultar a documentação oficial para entender com detalhes o funcionamento do método/tecnologia que está pretendendo usar para solucionar o problema em questão.

O JavaScript map é um poderoso recurso da linguagem, que permite a manipulação de arrays.

Sua utilização contribui para o desenvolvimento de um código com menos aplicação das estruturas de repetição tradicionais, além de não alterar o conteúdo original da variável, o que garante a sua imutabilidade.

Essas características o tornam um dos métodos utilizados para o desenvolvimento de programação funcional.

Esse artigo ficou menor que os demais, mas a intenção é tratar situações mais específicas nesse tipo de tema técnico e prático. Tomara que tenha gostado, aplauda o artigo! Até o próximo artigo e ótimos códigos.

--

--

--

Developer Frontend Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
douglasabnovato

douglasabnovato

Developer Frontend Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

More from Medium

Use normalize() to duel with non-English string in javascript

What is npm and How do I use it? — JavaScript

call, apply and bind in JS

What is recursive function?