Tip 36: Prevent Context Confusion with Arrow Functions

Scope, context & this keyword

Scope and context are probably the two most confusing concepts for JavaScript developers. A function’s scope, at it simplest, is what variables the functions can access. We explored this previously in Tip 3, Isolate Information with Block Scoped Variables. Now you’re going to learn about context. Context is what the keyword this refers to in a function or class.

Not only are both concepts hard to grasp, but people often confuse them. I know I confuse them all the time. Ryan Morr gives a simple way to remember the difference: Scope pertains to functions and context pertains to objects. While that’s not 100 percent true—you can use this in any function—it’s a good general rule.

Understanding context

To understand context, start with a very simple object. For example, think about an object called Validator, which sets an invalid message on form fields. You have one property, message, and one method, setInvalidMessage().

In the setInvalidMessage() method, you can refer to the message property using this.message. To see it in action, call the method from the object.