Dúvida na lista de exercício 18, referente a refatoração do exercício 01 e 02.

[Dan-Padovani]

Etapa da aula

7

Nome da aula

Correção dos exercícios da aula 02 da etapa 06 - Aula 01-01

Link da aula

https://app.nutror.com/v3/curso/a977a43d31cedcb6e7d064649ddd6c5436155aaf/curso-de-javascript-roger-melo/aula/943413

Descreva a dúvida

Prezado professor Roger Já assisti esse trecho diversas vezes mas não entendi tal situação. No minuto 48:30 dando continuidade ao refactoring e antes de desacoplar todo o calback do listener do input e também do form conforme trecho abaixo:

inputUsername.addEventListener('input', event => {
    const inputValue = event.target.value

    removeSubmitParagraph()

    if (!usernameRegex.test(inputValue)) {
        insertParagraphIntoDOM(invalidInputInfo)
        return
    }
    insertParagraphIntoDOM(validInputInfo)
})

form.addEventListener('submit', event => {
    event.preventDefault()

    const inputValue = inputUsername.value

    if (!usernameRegex.test(inputValue)) {
        insertParagraphIntoDOM(invalidSubmitInfo)
        return
    }
    insertParagraphIntoDOM(validSubmitInfo)
})

Você começa a refatorar a condição do if (!usernameRegex.test(inputValue))

Criando uma nova função externa para obter esse boolean, porém de forma mais legível como temos visto nas aulas anteriores, isso resulta na seguinte função:

const testUsername = inputValue => /^[a-zA-Z]{6,}$/.test(inputValue)

Se entendi corretamente até este ponto, estamos criando fora de ambos os listeners, uma função que irá testar os dados que o usuário insere, o que retorna o boolean que precisamos, correto?

Porém no escopo de cada listener, substituímos a variável 'inputValue' pela 'isUsernameValid', para armazenarmos o retorno da função que criamos fora do listener. Desta forma executamos a função 'testUsername' para validar o input do usuário e armazenamos esse boolean / retorno, conforme o trecho abaixo:

const isUsernameValid = testUsername(event.target.value)

Dessa forma o if fica mais legível apenas com if (!isUsernameValid) e resultado no código final (antes de desacoplarmos essa callback):

const testUsername = inputValue => /^[a-zA-Z]{6,}$/.test(inputValue)

inputUsername.addEventListener('input', event => {
    const isUsernameValid = testUsername(event.target.value)

    removeSubmitParagraph()

    if (!isUsernameValid) {
        insertParagraphIntoDOM(invalidInputInfo)
        return
    }
    insertParagraphIntoDOM(validInputInfo)
})

form.addEventListener('submit', event => {
    event.preventDefault()

    const isUsernameValid = testUsername(inputUsername.value)

    if (!isUsernameValid) {
        insertParagraphIntoDOM(invalidSubmitInfo)
        return
    }
    insertParagraphIntoDOM(validSubmitInfo)
})

O que não entedi, é por que não podemos só criar um variável para armazenar o teste do regex, mantendo dentro do escopo de cada listener, sem criar uma função externa, ficando apenas a validação dentro de cada listener também sendo armazenada em uma variável, conforme o trecho de código logo abaixo:

inputUsername.addEventListener('input', event => {
    const inputValue = event.target.value

    const isAValidUsername = /^[a-zA-Z]{6,}$/.test(inputValue)

    removeSubmitParagraph()

    if (!isAValidUsername) {
        insertParagraphIntoDOM(invalidInputInfo)
        return
    }
    insertParagraphIntoDOM(validInputInfo)
})

Isso seria muito errado ou fora de uma boa prática na hora de refatorarmos o código? Só criei a variável isAValidUsername para armazenar o boolean do teste e depois passei a mesma na validação do if. Pensei em deixar o if com uma variável / validação mais legível (igual você realizou na correção), até pensei em passar o event.target.value direto como argumento do método test, mas deixei da forma que está, somente para ficar mais fácil de ler.

Confesso que acabei me baseando nas aulas da Etapa 06 onde realizamos algo parecido na validação (Aula 02-03-Eventos do teclado).

Tudo que narrei ocorre entre o minuto 48:30 a 49:40 na correção da lista de exercício 18.

OBS: Depois de digitar tudo isso, ler e reler e repensar sobre o assunto, vejo que talvez na minha solução há uma certa repetição, mesmo sendo somente 1 variável para armazenar um boolean, pensando em algo escalável eu acho que isso não está muito ideal (talvez, confesso que não sei), estou muito equivocado nesse ponto professor?

Gostaria da sua opinião para evoluir meu pensamento crítico na hora de executar outras refatorações no futuro, até porque preciso fazer a revisão raio x de tudo isso, além de apagar e refazer mais vezes do total 0, antes de avançar para próxima etapa.

Desculpe o textão e talvez o tipo de dúvida que estou.

Desde já agradeço.

@Roger-Melo

[MivlaM]

Olá @Dan-Padovani

Meu nome é Maykell, faço parte da equipe de suporte na Roger Melo Treinamentos e vou te ajudar com sua dúvida =)

Vejo que talvez na minha solução há uma certa repetição, mesmo sendo somente 1 variável para armazenar um boolean, pensando em algo escalável eu acho que isso não está muito ideal (talvez, confesso que não sei), estou muito equivocado nesse ponto professor?

O código que você fez também funciona, mas como você mesmo já concluiu, para uma aplicação maior, essa abordagem não é muito adequada, pois envolveria muita repetição de um código que pode ser reutilizado. Numa aplicação menor, até que é possível que haja ocasiões onde não seja tão necessário transformar pequenos trechos de código em função, mas no momento, sugiro que você tenha como o foco o jeito que está sendo mostrado nas aulas. Quando é desejado que um trecho de código seja reaproveitado várias vezes ao longo da aplicação, acredito que seja mais vantajoso fazer como foi mostrado na aula, fazer uma função e invocá-la sempre que for necessário.

Além disso, gostaria de enfatizar que o mais importante, nesse primeiro momento, é fazer funcionar. Não se preocupe muito com as diferentes formas de refatoração agora. Refatoração é uma habilidade que é elevada com a prática e conforme você for praticando, você vai percebendo aos poucos o que pode ser melhorado e o que pode ser feito de outras maneiras. A boa notícia é que você ainda irá praticar bastante no decorrer do treinamento =)

---

Respondi a sua pergunta? Se restar qualquer dúvida é só avisar que te ajudarei =)

[Dan-Padovani]

Olá Maykell.

Entendi e agradeço o feedback, confesso que por um momento quando reparei neste detalhe, pensei em nem postar, entretanto, espero que sirva de referência ou ajude outros alunos.

Fato é que procuro sempre revisar e aplicar o ATER, consequentemente eu não avanço se não conseguir chegar ao mesmo resultado apresentado na aula, mesmo as vezes revisando e refazendo tudo do zero após algum intervalo.

Quero muito chegar na fluência, até que consegui "fazer funcionar" mas um pouco diferente do resultado da aula, sempre procuro observar os detalhes que o professor Roger aponta na hora da correção, dessa forma volto depois para refazer tudo até chegar no mesmo resultado.

Desde já agradeço.