Understanding Javascript ‘this’ keyword (Context)

Photo by sydney Rae on Unsplash

Context is one of those topics that always creates a lot of confusion when someone is starting to learn javascript and it’s a topic that the interviewer asks about a lot.

Let's start…

What is context?

Context is always the value of the this keyword which is a reference to the object that “owns” the currently executing code or the function where it’s looked at.

We know that windowis a global object in the browser so if we type thisin the console and it should return window object, which it does.

In node.js CLI if you try doing the above you will get an object that will have all globally used function like console , process etc. (try once).

Note: The value of this keyword depends on the object the function is run/called /sit on. Therefore thiskeyword has different values depending on where it is used.

Note: From now, this and context is used interchangeably.

Context — globally and inside a function.

this at the global level called on the global object

foo is the function is defined at the global level and is called on global level object i.e windowso calling fooand window.foois same. Hence the context is a window object.

this inside function called on function object at global level

Whereas if we do new foo() at the global level then will get this as fooobject.

Note: new operator creates an instance of an object. Context of the function will be set to the created instance of an object.

Context — under 2nd level function