JavaScript: diferença entre forEach(funcao) e forEach(funcao())?

JavaScript: diferença entre forEach(funcao) e forEach(funcao())?

28 de setembro de 2019 0 Por Ramos de Souza Janones
Powered by Rock Convert

Entenda as diferença entre forEach(funcao) e forEach(funcao()) no JavaScript, com exemplos práticos e boas práticas no desenvolvimento de software.

Primeiro, vamos simplificar a função para você entender melhor, sem alterar seu comportamento.

A função nativa console.log exibe uma mensagem de log no console do navegador e nunca retornará algum valor. Isso implica que quando você associa o valor retornado a uma variável ela ficará undefined. Veja:

const retorno = console.log("Mensagem de log");

console.log("Retorno", retorno);

Assim, a sua função na verdade é:

function dotinha(nome) {
    console.log(`'heroi é: ${nome}`);
    return undefined;
}

Ou seja, o retorno da sua função sempre será undefined.

Agora, analisando o comportamento do forEach. Se você ler a documentação verá que o primeiro parâmetro que o forEach espera é o callback, que é descrito como “função para executar em cada elemento, recebendo três argumentos”. Ou seja, a função forEach espera receber como parâmetro uma função.

Curso completo de Games, inclusive Realidade Aumentada.Powered by Rock Convert

Quando você faz heros.forEach(dotinha) você está passando uma função, portanto funcionará. Porém, quando você faz heros.forEach(dotinha()) você está passando o retorno da função como parâmetro, pois os parenteses aí indicarão que você quer chamá-la. Como a sua função sempre retorna undefined você está, na verdade, passando undefined como parâmetro do forEach, por isso o erro citado.

Leia também:  

error: undefined is not a function

Inclusive, perceba que quando você faz isso aparece a mensagem 'heroi é: undefined antes de dar o erro, pois como você fez a chamada sem identificar o parâmetro, dotinha(), o valor de nome na função também será undefined.

const heros = ['visage', 'enchant', 'lone']
function dotinha(nome) {

    return console.log(`'heroi é: ${nome}`)

}

heros.forEach(dotinha())

Se a ideia é apenas exibir a mensagem para cada herói, você não precisa de return na função. Na verdade, quando utilizada em conjunto com o forEach nunca fará sentido ter o return, pois o forEach ignora o retorno.

Também é possível utilizar funções anônimas:

const heros = ['visage', 'enchant', 'lone']

heros.forEach(function (nome) {
  console.log(`Herói é: ${nome}`)
});

Ou utilizar as arrow functions:

const heros = ['visage', 'enchant', 'lone']

heros.forEach(nome => {
  console.log(`Herói é: ${nome}`)
});

Ou ainda utilizar o for do JavaScript:

const heros = ['visage', 'enchant', 'lone']

for (let nome of heros) {
  console.log(`Herói é: ${nome}`)
}

Leituras complementares:

VOCÊ ESTÁ NAS SEÇÕES:  » Programação » Javascript

React Native Do Zero Ao Profissional: crie apps para Android e IOSPowered by Rock Convert
Siga os bons!




Frontend Do Zero Ao Profissional