Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Dúvida sobre função executada "( )" e return, e função passada como referência.

Referente ao curso JavaScript na Web: manipule o DOM com JavaScript, no capítulo Concluir tarefa e atividade Criando botão concluir

por Davilson Lopes Rodrigues
| 85k xp | 117 posts
Photodesigner

Olá pessoal.

Tenho uma dúvida sobre funções que no exemplo do curso JS na Web: Manipule o DOM com JavaScript - 04 aula 07, temos 2 funções parecidas mas que uma função "criarTarefa" ele passa como referência no novaTarefa.addEventListener('click', criarTarefa);

e outra tarefa.appendChild(BotaoConcluir()); que possui um return e ele chama com (). Até chamei elas no console pra ver se notava alguma diferensa clara, mas na essências elas são iguais.

Olhei nas perguntas anteriores do forum, pra ver se entendia, mas ainda não ficou claro.

Sendo assim, vou precisar de uma resposta como se eu tivesse 8 anos... e talvez tenha, rs!

Código Js da aula.

// Criando botão concluir

const criarTarefa = (evento) => {
    evento.preventDefault();

    const input = document.querySelector('[data-form-input]');
    const valor = input.value;
    const lista = document.querySelector('[data-list]');

    const tarefa = document.createElement('li');
    tarefa.classList.add('task');
    const conteudo = `<p class="content">${valor}</p>`;

    tarefa.innerHTML = conteudo;
    tarefa.appendChild(BotaoConcluir());
    lista.appendChild(tarefa);

    console.log(tarefa);
    console.log(lista);
    input.value = "";

} 

const novaTarefa = document.querySelector('[data-form-button]');

novaTarefa.addEventListener('click', criarTarefa);

const BotaoConcluir = () => {
    const botaoConclui = document.createElement('button');
    botaoConclui.classList.add('check-button');
    botaoConclui.innerText = 'concluir';
    botaoConclui.addEventListener('click', ()=> {
        console.log('ok!');
    });
    return botaoConclui;
}

HTML da aula.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=BioRhyme&family=Space+Mono&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Ceep</title>
</head>
<body>
  <div class="app">
    <div class="todo-list">
      <h1 class="title">
        Ceep
      </h1>

      <form class="form" action="">
        <input class="form-input" type="text" data-form-input>
        <button class="form-button" data-form-button> Novo Item </button>
      </form>

      <ul class="list" data-list>

      </ul>
    </div>
    <script src="listaDeTarefas.js"></script>
</body>
4 respostas
por Mateus Henrique
| 992.2k xp | 1546 posts
Instrutor Desenvolvedor

Fala Davilson, tudo bem?

O que acontece é que ao utilizarmos o método appendChild esperamos passar como parâmetro um elemento do DOM, que é justamente o que a nossa função BotaoConcluir nos retorna! Então por isso ja executamos essa função como parâmetro para o appendChild, pois ela nos retornará o nosso botão, que assim então poderá ser adicionado ao elemento da lista que selecionamos na variável lista. Ja no addEventListener, ele espera receber uma função para ser executada quando o evento for disparado, então essa função não pode ter sido executada entendeu? pois ela será executada somente quando o evento for disparado, então por isso passamos apenas o nome da função, pois internamente, quando o evento for disparado o método addEventListener executará essa função! Resumindo:

  • Chamamos e executamos a função dentro do appendChild pois a fução nos retorna o elemento a ser adicionado na lista.
  • Apenas passamos o nome da função criarTarefa para o addEventListener pois queremos que esse método cuide de quando essa função será executada, que nesse caso será quando o evento de click for disparado.

Espero que agora tenha entendido! Se continuar pode dizer pra gente que eu tento de explicar de outra maneira! Abraços :D

por Davilson Lopes Rodrigues
| 85k xp | 117 posts
Photodesigner

Opá Mateus Henrique,

Então basicamente depende de qual método a função vai interagir,

  • Se o método esperar um valor como retorno, return e executa ().
  • Se o método vai só executar, mas não precisa do retorno pra ele, ai só referência o nomeDaFuncao.

É isso?

Obrigado!

solução!
por Mateus Henrique
| 992.2k xp | 1546 posts
Instrutor Desenvolvedor

O () serve para executar a função! Independente se ela tem um retorno ou não, ali no appendChild como precisamos do elemento naquela exata linha de código, executamos a função e então no caso daquela função em específico ela nos retorna o elemento, que é o que queremos mesmo, ja no addEventListener não queremos executar a função naquele momento, eu quero é deixar que o addEventListener decida quando executa-la, então estamos passando somente o nome dela, que ai por baixo dos panos ele executaria essa função que passamos, seria mais ou menos assim que aconteceria por de baixo dos panos:

function addEventListner(evento, funcaoASerExecutada) {
        //Toda a lógica para detectar quando o evento foi disparado

        funcaoASerExecutada() //Aqui executamos a função pois estamos utilizando ()
}

Então para entender melhor, utilizando () estamos executando uma função, independente se ela tem ou não um retorno, passando somente o nome estamos apenas passando a referência dela, para que o que a função que esta recebendo essa função possa decidir quando irá executa-la.

Se preferir pode acessar a documentação das funções clicando aqui

por Davilson Lopes Rodrigues
| 85k xp | 117 posts
Photodesigner

Muito obrigado, Mateus Henrique.

Deu pra descer um pouco mais nesta questão.

Documentação de funções js é um mergulho sem cilindro pra quem tá começando... na terceira scrolla já bati numa syntax que nunca vi. rs!

Obrigado pela ajunda e disponibilidade.