Entendendo o Array map

05.12.20182 Min leitura — em Javascript

Uma pequena descrição da método map().

"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. A função callback é chamada apenas para os elementos do array original que tiverem valores atribuídos; os elementos que estiverem como undefined, que tiverem sido removidos ou os que nunca tiveram valores atribuídos não serão considerados."

Vamos para o Codígo - Let's go

Considere esse um array

const array = [2, 3, 5, 7, 11, 13];

Usando map para criar um novo array com o dobro dos valores.

const novoArray = array.map(function(item) {
  return item * 2;
});

// Com ES6+
// const novoArray = array.map(item => item * 2)

cosole.log(novoArray); // [4, 6, 10, 14, 22, 26]
// cosole.log(array); continuar sendo [2, 3, 5, 7, 11, 13]

Como podemos ver, a método map() criar um novo array usando as informções do array que estamos interando.

Mas como o map() faz isso?

Para descobrir como o map funciona por baixo dos pano e entende-lo melhor vamos criar o nosso proprio array.map().

Para isso vou usar o metodo Prototype para substuir uma função global do Javascrpt vou chama de meuMap().

Array.prototype.meuMap = function(callback) { ... };

Ele vai receber um função com callback que recebera a função que passamos no array.map()

Para o codigo da interação primero vamos declara uma variavel para guarda o novo array Mapeado, logo em seguida usei o loop for para interar o array que recebemos pelo callback, dentro do for temos uma variavel que receberar o valor ou objeto na posição do indice, e no final use o push para criar o novo array agora foi bem simple só foi da o return da novo array para utiliza-mos.

Veja como ficou a nossa novo método:

Array.prototype.meuMap = function(callback) {
  const novoArrayMapeado = [];
  for (let indice = 0; indice < this.lenght; indice++) {
    const resultado = callback(this[indice], indice);
    novoArrayMapeado.push(resultado);
  }
  return novoArrayMapeado;
};

Pronto já temos nosso proprio array.map()! Simples não eh. :)

Agora ja podemos usar nosso método array.meuMap()

const novoArray = array.meuMap(function(item) {
  return item * 2;
});

cosole.log("novoArray", novoArray); // [4, 6, 10, 14, 22, 26]

Olha só que legal temos o mesmo resultado!

Conclusão

Foi bem facil criar nosso proprio método map() e com isso pude entender melhor como funciona e agora sei como melhor aplica-lo nos meus proximos projetos.

Gostou? então deixe seu like isso ajuda bastante a continuar escrevendo