Função Anônima

Boa noite, Augusto! Como vai?

Qual log de erro que vc está tendo ao fazer esse tipo de código? Poderia colar aqui para eu dar uma olhada e tentar te ajudar?

Grande abraço e bons estudos, meu aluno!

Na verdade eu vi aqui e isso só acontece quando tento pegar o valor de this na função anônima dentro de addEventListener. Não ocorre erro, entretando this está indefinido.

Código: let campoFiltro = document.querySelector("#filtrar-tabela");

campoFiltro.addEventListener("input", () => { let valor = campoFiltro.value;

let pacientes = document.querySelectorAll(".paciente");

for(let i = 0; i < pacientes.length; i++) {
    let paciente = pacientes[i]

    let nome =  paciente.querySelector(".info-nome").textContent;

    if(!new RegExp(valor, "i").test(nome) && valor.length > 0) {
        paciente.classList.add("invisivel");
    } else {
        paciente.classList.remove("invisivel");
    }
}

});

Ah, agora entendi a sua dúvida! Isso acontence pq o this dentro de uma arrow function não funciona igual a um this de uma function comum!

Dá uma olhada nesse link da documentação das arrow functions! Ele deve te ajudar a entender melhor essa questão que acabei de te apresentar!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Também tive um problema parecido e acredito que seja por causa do contexto do "this".

Na parte de criar o código para filtrar a tabela, eu estava tentando utilizar o "this.value" dentro da função anonima que iterava na lista de pacientes com forEach, porém retornava sempre undefined mesmo que no if acima eu tinha acabado de usar o mesmo this.value para validar! Acredito que como cada iteração do forEach nada mais é do que uma chamada de função, o "this" tenha mudado de contexto para essa função chamada.

Me corrija se estiver errado, mas pareceu ser esse o caso hahaha

No código abaixo, o this utilizado para o new RegExp é undefined. Para poder continuar utilizando o forEach nesse trecho, utilizar o "event.target.value" é uma opção boa? :)

...
    if (this.value.length > 0) {
        listaPacientes.forEach(function (pacienteTR) {
            var nomePacienteLista = pacienteTR.querySelector(".info-nome").textContent;

            var expressaoRegular = new RegExp(this.value, "i");
        });
    }
...
})

Oi Eduardo tudo bem?

O this dentro do método forEach sempre aponta para o window (que é a página HTML) por isso tem que usar salvar o conteúdo numa variável e depois utilizar ele.

Espero ter ajudado!!

Boa noite, Eduardo! Como vai?

Em JavaScript é necessário muito cuidado com o uso do this!

No caso que vc citou, provavelmente vc estava dentro de um addEventListener(), correto? Se sim, então se vc tivesse utilizado uma arrow function para o forEach(), então as coisas teriam funcionado como vc imaginava!

<input id="nome" />
<script>
     const campoTexto = document.querySelector('#nome');
     campoTexto.addEventListener('input', function() {
          if (this.value.length > 0) {
               [1, 2, 3].forEach((item) => {
                    console.log(item); // Vai imprimir os valores do vetor.
                    console.log(this.value); // Vai imprimir o texto digitado no input.
               });
          }
     });
</script>

Agora, se vc usar arrow function também como callback do addEventListener(), novamente tudo deixa de funcionar!

<input id="nome" />
<script>
     const campoTexto = document.querySelector('#nome');
     campoTexto.addEventListener('input', (event) => {

          // Essa linha irá lançar o erro:
          // Uncaught TypeError: Cannot read property 'length' of undefined
          // Isso acontece porque nesse caso this representa o objeto Window!
          if (this.value.length > 0) {
               [1, 2, 3].forEach((item) => {
                    console.log(item);
                    console.log(this.value);
               });
          }
     });
</script>

Sendo assim, a conclusão é a seguinte: Quando utilizamos arrow functions o this irá representar o valor do contexto onde a arrow function foi declarada.

Agora, sobre o que vc falou em relação ao event.target, sim, essa seria uma boa abordagem para não se ter uma surpresa com um valor inesperado do this! O código ficaria assim:

<input id="nome" />
<script>
     const campoTexto = document.querySelector('#nome');
     campoTexto.addEventListener('input', (event) => {
          const elementoAlvo = event.target;
          if (elementoAlvo.value.length > 0) {
               [1, 2, 3].forEach((item) => {
                    console.log(item);
                    console.log(elementoAlvo.value); // Imprime os valores digitados no campo de texto.
               });
          }
     });
</script>

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Oi Gabriel e André!

Acho que entendi sim, meio diferente de outras linguagens haha

Resta praticar agora! :D

Opa, Eduardo! É, o JavaScript tem umas coisas diferentes! Mas na realidade, todas as linguagens de programação tem suas peculiaridades, não é mesmo? hahahaha

Sempre que precisar de alguma ajuda ou tirar alguma dúvida é só mandar aqui no fórum da Alura!

Grande abraço e bons estudos, meu aluno!