Is it possible to get the this inside an arrow function as well as the global this?

Question

I have:

        checkbox.addEventListener('change', () => {
            console.log(this.checked)
        })

The problem is that this.checked is undefined because of the arrow function. So how can I check the value of the checkbox? I know I can use a regular function, but I want to keep this to the outer scope since I will call some functions from it

Answer 1

Defeats the purpose of arrow functions. Use the event object to get the reference to the element that was clicked.

checkbox.addEventListener('change', (event) => {
  console.log(event.target.checked)
})

And you also have the checkbox defined as a variable so you could use that

checkbox.addEventListener('change', (event) => {
  console.log(checkbox.checked)
})