The keyword this is one of my most favorite topics, mostly because it makes you feel weird saying this for a long time afterwards.

When learning how to implement ES6 AND React, as the students have been doing today, the concept becomes quite a bit more complex, both for them AND for me!

To help explain, I made these cute source images, with Carbon and I hope they help you as much as they help me!

1: Bind this in a Classes constructor

carbon source code showing how to bind with constructor

2: Bind this within the event listener

carbon source code showing how to bind this in the event listener

3: Bind this within the event listener, using an arrow function

carbon source code showing how to bind this with an arrow function

4: Bind this by using a class field property on the triggered function

carbon source code showing how to bind this with a class field property