1

Olá, o código a seguir está correto, mas gostaria de entender uma coisa:

const Carros = ['Mercedes', 'Ferrari', 'BMW']

function imprimir(nome, indice){

    console.log(`${indice + 1}. ${nome}`)

}

Carros.forEach(imprimir)

Quando passo o parâmetro nome, e chamo-o no console.log(), como minha função sabe que se trata do nome dos carros dados no array? Sendo que em momento algum passei tais informações como nome?

2 Respostas 2

6

A implementação de forEach() é assim. Internamente ela chama uma função que ela ainda não sabe qual é, mas ela sabe qual é o contrato que essa função deve ter, ou seja, ela sabe o que essa função deve retornar (nesse caso deve retornar nada) e sabe quais os argumentos que ela deve passar, assim ela pode chamar a função sem problemas e ela chamará de uma forma adequada. É sua responsabilidade criar uma função que siga esses contratos esperados e passar para ela, no caso você criou uma função chamada imprimir() e que tem dois parâmetros, um deles é o valor de um elemento e o outro é um índice desse elemento, no caso você deu os nomes nome e indice, mas poderia ter dado qualquer nome. Obviamente que você tem que usar isto na função de uma forma que faça sentido, e você fez.

Isto que fez chama-se callback, você diz o que deve ser chamado e segue um contrato estabelecido. Eu não vou entrar em detalhes sobre porque a resposta linkada aí fala muito bem como este mecanismo funciona.

Só uma dica, em geral isso é bonitinho, mas se não tiver uma motivo muito importante não deveria usar, não spi por que é mais lento, mas também porque é menos poderoso e mais confuso. Este é um caso que o for funcionaria melhor, na verdade quase 100% do uso da forEach() não é necessário, as pessoas usam porque querem fazer graça sem entender o motivo e complicações disso. Hoje nem mesmo o fato de fazer em uma linha serve muito, porque o mesmo pode ser feito com até menos linhas.

A grosso modo esse forEach() seria algo assim:

function foreach(array, func) {
    for (let key in array) func(array[key], key);
}
function imprimir(nome, indice) {
    console.log(`${indice + 1}. ${nome}`);
}
const carros = ['Mercedes', 'Ferrari', 'BMW'];
foreach(carros, imprimir);

Ou você pode fazer apenas isto:

const carros = ['Mercedes', 'Ferrari', 'BMW'];
for (let indice in carros) console.log(`${indice + 1}. ${carros[indice]}`);

Coloquei no GitHub para referência futura.

2
  • 2
    Eu enxergo o contrário em relação ao uso do forEach: se não tiver um motivo forte para a performance ou para a flexibilidade do for imperativo, prefiro a versão declarativa por ser mais legível. Legibilidade, onde eu tenho trabalhado, é o primeiro objetivo, contanto que não interfira negativamente (de modo sensível) na performance Commented 17/10/2019 às 21:01
  • 1
    legibilidade acaba sendo meio subjetivo, tinha uma época que ninguém achava uma coisa dessas legível. E mais legível não é, é mais bonitinho, em alguns cenários faz pouca diferença e justamente por isso eu prefiro o que é mais óbvio, pra mim legível é mostrar o que faz e não esconder, a não ser que seja detalhe pouco importante. Na maioria das situações sequer fica mais curto, tem casos que é ruim ou impraticável, sem falar na performance. Pra que usar duas formas se uma faz bem o serviço? Pra que ficar chaveando? Pra mim legível é o que você faz sempre.
    – Maniero
    Commented 17/10/2019 às 21:57
5

Sempre que na duvida, consulte a documentação, tipicamente o MDN.

A documentação especifica o método forEach da seguinte forma:

Sintaxe:

arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

Repare que o forEach recebe um callback, ou seja, uma função apenas. Olhando para o seu código tem exatamente isso:

Carros.forEach(imprimir)
                   ^---- callback

Depois essa função passada vai receber vários valores como argumentos. Vejamos de novo a documentação:

callback

Função para executar em cada elemento, recebendo três argumentos:

    currentValue

    O valor atual do elemento sendo processado no array.

    index

    Optional O índice do elemento atual sendo processado no array.

    array

    Optional O array que forEach() está sendo aplicado.

Então pegando na sua função:

function imprimir(nome, indice){

Você vê que o parâmetro nome corresponde ao currentValue indicado na documentação, e o indice ao index. Relembro que os parâmetros podem ter o nome que você quiser, pois eles são atribuídos pela ordem e não pelo nome.

Se precisasse também podia aceder ao próprio array, acrescentando mais um parâmetro para tal:

function imprimir(nome, indice, array){

Estes valores são passados à sua função pelo próprio forEach, sem que você tenha que fazer a mais para isso. Apenas tem que os interpretar e executar a lógica pretendida.

A titulo de curiosidade fica aqui um exemplo de implementação do forEach (coloquei como meuForEach, para tornar evidente):

//exemplo de implementação do forEach. 
//O Array.prototype é para que a função fique no objeto Array com o nome meuForEach
Array.prototype.meuForEach = function(callback) {
    //dentro do array o this refere o proprio array
    for (let i = 0; i < this.length; i++){ 
        //chamando sua função(callback) com o elemento, a posição e o array
        callback(this[i], i, this);  
    }
};

//o mesmo código que você ja tinha mas agora usando o meuForEach
const Carros = ['Mercedes', 'Ferrari', 'BMW']

function imprimir(nome, indice){
    console.log(`${indice + 1}. ${nome}`)
}

Carros.meuForEach(imprimir) //meuForEach em vez de forEach

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 .