4

Gostaria de saber como o método .map trabalha "atrás das cortinas".

Por exemplo, criei uma função para desenvolver uma função similar ao método forEach e ficou assim:

const conjuntoDados = [
  20,
  15,
  10,
  5,
  30
]

function newForEach(callbackFn, thisArg, arrayIterado) {
  for (let contador = 0; contador < arrayIterado.length; contador++) {
    const elemento = arrayIterado[contador];
    const index = contador;
    const array = arrayIterado;
    callbackFn(elemento, index, array)
  }
}

newForEach((elemento, index, array) => {
  console.log(elemento)
}, null, conjuntoDados)

Gostaria de saber como faço uma função similar a map sem usar o método.

6
  • Cara, não tá claro, para mim, exatamente o que tu precisas. Estás com algum problema? Alguma dificuldade? Commented 20/06/2022 às 15:26
  • 4
    Não tenho tempo agora para dar uma boa resposta, mas essa pergunta merece uma boa resposta. Antes de alguém responder uma besteira, a implementação que o AP apresentou para o método Array.prototype.forEach() é o que se chama de abordagem ingênua aqui está a especificação do algoritmo a ser implementado com o método Array.prototype.forEach() e aqui a especificação a ser implementada com Array.prototype.map() Commented 20/06/2022 às 15:34
  • 2
    @AugustoVasques A pergunta parece boa, e foi bom destacar a especificação, porém o AP comentou algo que contradiz a pergunta. Ele perguntou como funciona, mas no comentário ele falou que quer fazer algo parecido com o map. Se fossemos responder, teríamos que detalhar o algoritmo de implementação, não acha? Fiquei um pouco na duvida... Commented 20/06/2022 às 16:23
  • 1
    @CmteCardeal, já havia visto o seu comentário, mas só agora o posso responder(um pouco atrasado). Eu compartilho da sua dúvida pois ao destacar a especificação, minha orientação teve o como objetivo pontuar a existência de um contexto ao qual os métodos citados estão inseridos e assim evitar que fossem formuladas respostas baseadas em analises incompletas ou impulsivas. Fico em dúvida em se poderia orientar sobre a forma ou meios utilizados para produzir a resposta, eu não acho que não, pois isso é pessoal e cada um dá o seu enfoque ao que acha mais relevante sendo livre a escolha de meios. Commented 21/06/2022 às 4:09
  • 2
    Deixando minha impressão pessoal, as duas respostas são excelentes com destaque para resposta aceita. Commented 21/06/2022 às 4:14

2 Respostas 2

4

O método map, além de chamar a função de callback para todos os elementos do array, também cria um novo array com o resultado dessas chamadas, e retorna esse array.

Sendo assim, bastaria percorrer o array, chamar a função e adicionar o resultado em outro array:

function callbackFn(element, index, array) {
    // faz algo com o elemento e retorna o resultado (estou multiplicando por 2 só pra não retornar o mesmo número)
    return element * 2;
}

const conjuntoDados = [20, 15, 10, 5, 30];
const result = [];
for (var i = 0; i < conjuntoDados.length; i++) {
    // chama a função e adiciona o resultado em outro array
    result.push(callbackFn(conjuntoDados[i], i, conjuntoDados));
}
console.log(result);

Mas se você já tem a função de callback pronta, por que não fazer apenas conjuntoDados.map(callbackFn)?

Claro que daria para criar uma função, algo como:

function callbackFn(element, index, array) {
    // faz algo com o elemento e retorna o resultado (estou multiplicando por 2 só pra não retornar o mesmo número)
    return element * 2;
}

function map(array, callbackFn, thisArg) {
    const result = [];
    for (var i = 0; i < array.length; i++) {
        result.push(callbackFn.call(thisArg, array[i], i, array));
    }
    return result;
}

const conjuntoDados = [20, 15, 10, 5, 30];
const result = map(conjuntoDados, callbackFn, null);
console.log(result);

Modifiquei a chamada do callback para usar call, pois com isso posso setar o thisArg, que é basicamente o this que o callback enxergará (veja a documentação para mais detalhes). Fiz assim porque o método map aceita este parâmetro (não ficou claro se você quer todas as funcionalidades que o método map nativo possui).


Mas vale lembrar que, conforme lembrado nos comentários, esta é uma implementação simplificada do método map, já que segundo a especificação da linguagem, o algoritmo é um pouco mais complicado.

Por exemplo, o método map verifica se foi de fato passada uma função como callback (fazer algo como conjuntoDados.map('abc') dá erro), além de ignorar índices que não existem no array.

Ou seja, para casos assim não daria o mesmo resultado:

function callbackFn(element, index, array) {
    // faz algo com o elemento e retorna o resultado (estou multiplicando por 2 só pra não retornar o mesmo número)
    return element * 2;
}

const array = [];
array[2] = 42;
array.length = 6;
// somente o elemento da posição 2 está setado
console.log(array);

const result = [];
for (var i = 0; i < array.length; i++) {
    result.push(callbackFn(array[i], i, array));
}
console.log(result);
console.log(array.map(callbackFn));

Usando map, os elementos cujos índices não existem no array acabam sendo undefined (ver mais detalhes aqui), enquanto que se fizer o loop, eu acabo chamando o callback passando esses undefined, e ao fazer contas com undefined, o resultado acaba sendo NaN (claro que o resultado pode ser outro, dependendo do que o callback faz, mas de qualquer forma veja que há diferença).

Até daria para fazer algo como:

const result = [];
for (var i = 0; i < array.length; i++) {
    if (array.hasOwnProperty(i)) {
        result[i] = callbackFn(array[i], i, array);
    }
}
result.length = array.length;

Assim, o resultado ficaria com a mesma quantidade de "elementos vazios", mas aí já acho que é "ginástica" demais para pouco ganho, e o melhor seria usar map mesmo.

Por fim, eu não entendi porque você quer criar uma função para substituir o map. Se não quer usar map, o loop simples me parece a melhor alternativa. Se for para jogar a lógica do loop em uma função, não vejo muito ganho, pois você trocou uma função nativa (o map) por uma função sua que ainda por cima não é tão completa (e se não for fazer tudo que o map faz, como validar se o argumento é uma função, ou se o caso do array com "espaços vazios" não se aplica, etc, ainda sim acho que um loop simples já resolve).

2
  • Obrigado a todos,precisava dessa função para substituir o map para entender como funciona "debaixo dos panos" a estrutura do map,para fins didáticos mesmo.
    – AntonioV6
    Commented 20/06/2022 às 16:58
  • 2
    "Se não quer usar map, o loop simples me parece a melhor alternativa" - Até complemento: "Se não tem callback, o loop simples é melhor alternativa, quase que incondicionalmente, principalmente agora que viu que o map não é tão mágico assim" :D (para quem não entendeu a motivação, basta fazer benchmark - callback é um custo a mais, e usando map() você invariavelmente precisa de um, sendo que em loops convencionais dá para fazer as operações diretamente.)
    – Largato
    Commented 20/06/2022 às 21:49
4

O método map(), da forma mais simples possível, é um método transformador. Seu papel é criar um array novo percorrendo os itens do array original e transformando-os no retorno da função que você definir.

Exemplo:

vamos supor que você tenha um array com alguns números let numbers = [1, 2, 3]; e deseja que cada número deste array seja dobrado. Logo a abordagem seria:

let doubledNumbers = numbers.map(number => number * 2);

Novamente e muito importante: o map() cria um array novo. Não afetará em nada o array original.

Foreach

O foreach, como você comentou no exemplo, tem outra finalidade: percorrer o array. Normalmente é utilizado quando você precisa executar uma ação para cada item, como chamar uma função.

Re-implementação do map():

Em sua pergunta, você disse que deseja fazer uma função correspondente ao map. Eu não entendi os motivos pra isso, uma vez que já existe o método no prototype do array. Mas a forma de fazer isso seria simplesmente receber um array e uma função transformadora, criar um array novo dentro desta função com base na função transformadora e retorná-lo.

Exemplo:

    function map(originalArray, transformer) {
       let newArray = [];
       // Fazemos um loop para pegar os ítens do array
       for (let i = 0; i < originalArray.length; i++) {
          // Chamamos a função transformadora passando o item e o índice atual e adicionamos a um novo array o valor que ela irá retornar
          newArray.push(transformer(originalArray[i], i));
       }
       
       return newArray;
    }

    // Como usar
    let numbers = [1, 2, 3];
    let doubledNumbers = map(numbers, number => number * 2);
    console.log(doubledNumbers);
    // [2, 4, 6]

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .