variável trabalhando como função?

Oi Yago, beleza?

Tome cuidado com o nome das suas variáveis, tem dois consts "botaoConcluir", mas este nao é o problema.

Nao funciona pq nao está retornando nada a funcao botao concluir,

O retorn tem que ser na função anonima e nao no evento. tente assim:

const botaoConcluir = function () {
    const botao = document.createElement('button');
    botao.addEventListener('click', function () {
        console.log('fui clicado');
    });
    return botao;
};

Oi Diego, tudo bem?

Primeiramente, obrigado pelo retorno! Consertei as constantes e realmente não tinha me atentado a isso, obrigado pelo toque.

Segundamente, deixa eu ver se entendi a lógica por trás do return botao; :

Como a retorno estava dentro do escutador de clique o botao nunca foi criado pois nem existe botao a ser clicado, logo ele estando fora do escutador e dentro somente da função anonima ele consegue criar o botao. Está correta essa lógica?

Terceiramente, eu ainda estou em duvida referente a linha 15 do código enviado:

li.appendChild(botaoConcluir());

A minha duvida é referente do porque o professor tratou uma constante como função inserindo () no final da sua nomenclatura? Compreendo que exista uma função anonima dentro da constante, porém é a primeira vez que vejo alguem inserir () depois de uma constante, poderia me explicar ou indicar um local para estudo de como funciona esse método?

Quarto e ultimo, ainda não consigo criar o botao mesmo realizando as alterações sugeridas. Vou deixar meu código aqui e se puder me ajudar a ver o que estou errando, ficarei muito grato!

Obrigado!

const botao = document.querySelector(".botao");

botao.addEventListener('click', function(event) {

    event.preventDefault();
    const input = document.querySelector(".input");
    const valor = input.value;
    const conteudo = `<p class="conteudo">${valor}</p> `;

    const ul = document.querySelector(".lista");
    const li = document.createElement("li");
    li.classList.add('task');

    ul.appendChild(li);
    li.appendChild(conclusao());
    li.innerHTML = conteudo;
    input.value = '';
})


const conclusao = function() {

    let botaoConcluir = document.createElement('button');

    botaoConcluir.addEventListener('click', function() {
    console.log('fui clicado');


})
    return botaoConcluir;
}

Olá Yago, beleza?

Vamos pelas suas dúvidas:

1. Legal que funcionou!
2. A função estava criando o botao e adicionando o evento mas nao estava retornando nada, por isso nao funcionava. O event listener é o que vc quer q aquele botao faça quando for clicado. No caso, aparecer uma mensagem no console.
3. Referente a sua dúvida da constante chamando a função. O JS é muito flexível e podemos declarar funções de diversas maneiras, no caso do const conclusao = function(){}; ela poderia ser escrita dessa forma também function conclusao(){}; Dá na mesma. O que acontece é em uma vc cria uma função anonima e atribui uma variável a ela, e a outra vc endereça um nome a uma função. No fundo tem diferença [http://adripofjavascript.com/blog/drips/variable-and-function-hoisting.html], mas é um nível um pouquinho mais avançado para agora.
4. Na linha 15 do seu código, vc coloca os "()" porque vc está chamando a função para ser executada. Sendo que ela é uma variável do tipo função, ela pode ser usada como tal.
5. O seu código ainda não está "funcionando" por causa da ordem em que sao chamados. Coloque o li.innerHTML = conteudo antes do appendChild. O que está acontecendo nesse código é que, vc adiciona o botao mas ele é removido quando vc troca todo o HTML de dentro do LI pela const conteudo.

    ul.appendChild(li);
    li.innerHTML = conteudo;
    li.appendChild(conclusao());

Abraços e bons estudos.