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!

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.




Frontend Do Zero Ao Profissional