Solucionado
Olá,
Estou com uma dúvida. Por que ao tentar obter um valor através do this.value dentro de uma função anônima escrita assim: function () {} eu consigo obter um valor, mas ao escrever a função assim: () => {}, ela me retorna um undefined? No restante do código ambas funcionam similarmente.
Obrigado.
Oi Diego, tudo bem?
Isso acontece porque o this possui um comportamento diferente em funções escritas com a palavra function antes, e em arrow functions (que é a segunda sintaxe que você mencionou).
Dentro de uma arrow function ele possui um comportamento dinâmico, isto é, variando de acordo com o contexto de execução. Portanto, this é definido à partir das funções onde foram definidas (se uma arrow function é criada em um escopo global, o this fará referência a esse escopo global).
Nesse caso, a função arrow é uma função de callback, pois é passada como parâmetro de outra função, no caso, addEventListener. Portanto, this será vinculado ao elemento DOM que gerou o evento, que é o objeto Window. Por isso que deu undefined, pois o objeto Window não tem nenhuma propriedade value.
Concluindo, o this dentro de uma arrow function sempre vai ser referência ao objeto que ele já era referência no momento da criação da arrow function (nesse caso, o objeto window).
Espero ter ajudado, abraços e bons estudos =)
Obrigado Giovanna, ajudou muito.