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.

Como vender Software - Seja desktop, web ou MobilePowered 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.

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

Powered by Rock Convert
Siga os bons!
Últimos posts por Ramos de Souza Janones (exibir todos)
vote
Article Rating
LEIA TAMBÉM:  Apollo lança a Plataforma GraphQL e extensão para VS Code