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.
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.
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}`)
}
Como lição de casa: