Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Não entendi bem o uso do return em todo o código.

Eu cheguei a fazer uns testes para ver qual seria o resultado de tirar o return de cada função. E acabou que não funcionava o botão ou nem aparecia a tarefa. E achei estranho a aplicação funcionar normalmente sem o return na última função do código abaixo:

Código da última função

const deletarTarefa = (evento) => {
        const botaoDeleta = evento.target;

        const tarefaCompleta = botaoDeleta.parentElement;

        tarefaCompleta.remove(); // método(função) que remove

        return botaoDeleta;
    }

Código completo

// Função de invocação imediata ==> Vamos utilizar a “IIFE”, ou Immediately Invoked Function Expression ou “Função de Invocação Imediata”. Faz com o que ninguém tenha acesso a nenhuma função de dentro do código, apenas tenha acesso a interação com a página
(() => {

    const criarTarefa = (evento) => {

        evento.preventDefault();

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

        const tarefa = document.createElement('li'); /* Cria um novo elemento */
        tarefa.classList.add('task'); /* Adciona a classe na 'li' criada */
        const conteudo = `<p class="content">${valor}</p>`; /* “Template String” */

        tarefa.innerHTML = conteudo; /* Faz aparecer a tag 'p' com o seu valor dentro das chaves */

        tarefa.appendChild(BotaoConclui()); /* Cria o botão através da função, com escrita, estilo e evento de click */
        tarefa.appendChild(BotaoDeleta());
        lista.appendChild(tarefa); /* Cria(anexa) o elemento filho dentro do elemento pai */
        input.value = " ";
    }

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

    novaTarefa.addEventListener('click', criarTarefa);

    const BotaoConclui = () => {
        const botaoConclui = document.createElement('button');

        botaoConclui.classList.add('check-button'); // add => adiciona o nome da classe que está entre as aspas simples
        botaoConclui.innerText = 'concluir'; // Adciona o texto que está entre as aspas simples dentro do botão

        botaoConclui.addEventListener('click', concluirTarefa);

        return botaoConclui;
    }

    const concluirTarefa = (evento) => {
        const botaoConclui = evento.target; // sabe qual o alvo do evento, ou seja, em quem clicou ou qual elemento foi clicado

        const tarefaCompleta = botaoConclui.parentElement; // Sobe um nó na árvore, que é a 'li', ou seja, busca o pai do elemento que é pai do botão

        tarefaCompleta.classList.toggle('done'); // .toggle() => Método que executa o efeito de rabisco do CSS e é capturado a classe pelo 'classList'. o toggle faz um verdadeiro ou falso (booleano)
    }

    const BotaoDeleta = () => { // inicia com letra maiúscula pelo motivo de ser um Componente
        const botaoDeleta = document.createElement('button');

        botaoDeleta.innerHTML = 'Deletar';
        botaoDeleta.addEventListener('click', deletarTarefa);

        return botaoDeleta;
    }

    const deletarTarefa = (evento) => {
        const botaoDeleta = evento.target;

        const tarefaCompleta = botaoDeleta.parentElement;

        tarefaCompleta.remove(); // método(função) que remove

        return botaoDeleta;
    }

})(); //função de invocação imediata


/* “inner HTML” => altera o valor da li */

/* classList => Acessa a lista de classe que a 'li' disponibiliza. */

/* addEventListener => adciona um evento de escuta */

/* addEventListener('click') => captura o click através do evento de escuta. Esse evento fica escutanto se haverá algum click.

/* appendChild => Existem outros métodos que podemos utilizar para manipular nós:

insertBefore(pai, filho): Coloca um nó antes do outro.
replaceChild( elemento1, elemento2): Substitui o nó elemento 1 pelo nó elemento2.
removeChild(elemento): Remove um nó da árvore. */
4 respostas
solução!

O que acontece é que, em alguns casos, precisamos pegar um valor que precisa ser usado em outro lugar. Exemplo:

A função abaixo calcula a soma de dois valores:

function somar (a,b){
    a + b;
}

Se eu chamar essa função no console, vou receber undefined:

somar(2,5);
//undefined

Mas, se eu usar return o valor da soma pode ser exibido, quando a função é chamada:

function somar (a,b){
    return a + b;
}

somar(2, 5);
// Resposta no console: 5

Dessa forma, consigo usar esse valor em outro lugar:

function multiplicar(x){
    return somar(2, 5) * x;
}

multiplicar(5);
// Resposta no console: 35

Agora, se eu tirar o return novamente de somar() e usar ele em multiplicar(), a resposta devolvida pelo console é NaN (Not a Number):

function somar (a,b){
    a + b;
}

function multiplicar(x){
    return somar(2, 5) * x;
}

multiplicar(5);

// Resposta no console: NaN

Pois ele entenderá que estou multiplicando 5 * undefined e, de fato, isso não é um número.

Em alguns casos, não será necessário retornar nenhum valor, podemos usar return ; ou até mesmo retirar a palavra chave return. Exemplo:

Função que muda a cor de um botão:

function mudarCorDoBotao () {
    button.style.backgroundColor = '#111111';
}

button.addEventListener('click', mudarCorDoBotao);

Repare que nesse caso, não precisamos retornar nenhum valor. A própria acão de trocar de cor já é a resposta que buscamos, então adicionar retorno não seria necessário.

Recomendo a leitura desse texto sobre return.

No caso da função 'deletarTarefa' não é esperado que ela retorne nenhum valor para nós, apenas que ela remova o elemento pai do 'botaoDeleta'. O 'return' não era necessário nesse caso, assim como ele também não aparece no 'concluirTarefa', no entanto se ele estiver presente não vai resultar em erro algum na execução.

A presença do 'return' vai possibilitar que você passe esta função como parâmetro para uma outra que esteja esperando alguma variável do mesmo tipo deste que você mandou "retornar".

No caso do 'deletarTarefa' apenas executamos a função de remoção, o valor de 'return' é atribuído, mas não chega a ser usado. Por isso não aparece nenhum erro ao removê-lo.

Espero ter ajudado.

Obrigado Vanessa Cristiane Ribeiro e Thawan Camara. As suas respostas me tiraram as minhas dúvidas. Uma complementou a resposta da outra. Agradeço muito a vocês!

Que bom que ajudamos!

Disponha! =)