Understanding Javascript ‘this’ keyword (Context) | by Deepak Gupta | Towards Data Science

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...
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.
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.
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.
Note: From above, we get that value of this keyword depends on the function is called upon not where the function is defined.
When using use strict in a function, the context i.e this keyword behaves differently. Context remains whatever it was called upon.
Note: Our entire program should probably either be strict or non-strict. However, sometimes you include a third-party library that has different Strict’ness than your own code, so care must be taken over these subtle compatibility details.
Arrow functions work differently from regular functions in terms of context. thiswill always refer to the lexical scope (read here about scope), i.e thisretains the value of the enclosing lexical context's.
In global code, it will be set to the global object, hence we get above true.
Context follows the same rule, i.e. if the function is on an object’s prototype chain, this refers to the object the method was called on.
If we call obj.func() will get undefined and if func is called on newObj created from objwhich has xdefined it will return the value hence 10.
The context in case event handlers refers to the element that received the event.
Here we added a jquery click event on body tag of DOM, and we can see that the context returns the body element.
If you don’t know what is execution context (read here). In short, execution context is the ‘environment’ or scope in which a function executes in. Every time a function is called, a new execution context is created. Every call to an execution context has 2 stages
Creation — when the function is calledActivation — when the function is executed
Creation — when the function is called
Activation — when the function is executed
The value of thisis determined at creation phase, not at the time of execution. However, thisdetermination rule remains the same.
Scope and context are altogether a different concept but usually used by the upcoming developer interchangeably.
The scope is the accessibility of variables, functions, or objects in some particular part of your code during runtime. Read more here about scopes.
Every function invocation has both a scope and a context associated with it.
We can dynamically change the context of any method by using either call() ,apply()and bind()method.
Call — The very first argument call takes in is the context you want to use. Afterward, you can pass in any number of comma-separated values.
foo.call(context, param1, param2, param3 );
Apply — This is the same as callbut differs in the sense of no. of argument. Apply only support 2 arguments, context and array of values.
foo.apply( context,[param1, param2, param3]);
Bind — It returns a new function which is permanently bound to the first argument of bind regardless of how the function is being used. binddoesn’t invoke the bound function immediately, rather it returns a new function we can run later.
Why do we need to explicitly change the context?
When we need to call a function defined inside an object say xbut on other objects say ywe can use explicit methods to do so, to increase reusability.
When we need to call a function defined inside an object say xbut on other objects say ywe can use explicit methods to do so, to increase reusability.
2. Currying and partial application is another part where explicitly change in context is used.
3. To make utility functions like
4. Inheritance is another place where the explicit change of context can be used.
Comment below if you know more reason :)
We may lose the context i.e getting an undefined value for thisin
We need to keep the context of the obj object referenced for when the callback function is called, in the above, that does not happen and we get the error.
We can get rid of the above error by replacing the exec code with below
// use of bindexec: function () {    this.f2(function () {        this.f1();    }.bind(this));}// use of arrow functionexec: function () {    this.f2(() => {        this.f1();    });}// another way not recommended thoughexec: function () {   var that = this;    this.f2(() => {        that.f1();    });}
let obj = {  name: "test",  waveHi() {    return ('Hi',this.name);  }};setTimeout(obj.waveHi, 1000)
The above will return Hi undefined, think for a second why? This is because the last line will be turn out to be
let f = obj.waveHi;setTimeout(f, 1000);
and, setTimeout got the function obj.waveHi, separately from the object obj
Solutions are
// Wrapping functionsetTimeout(function() {  obj.waveHi(); // Hi Test}, 1000);// Arrow functionsetTimeout(() => obj.waveHi(), 1000); // Hi Test// use of bindlet waveHi = obj.waveHi.bind(obj);waveHi() // Hi Test
Note:
1. Creating a “bound method reference” requires an anonymous wrapper function, and a calling cost. In specific situations, leveraging closures may be a better alternative.
2. Any sort of function reference (assigning as a value, passing as an argument) loses the function’s original binding.
Please consider entering your email here if you’d like to be added to my email list and follow me on medium to read more article on javascript and on github to see my crazy code. If anything is not clear or you want to point out something, please comment down below.
You may also like my other articles
Javascript Execution Context and HoistingJavascript — Generator-Yield/Next & Async-Await 🤔Javascript data structure with map, reduce, filterJavascript- Currying VS Partial ApplicationJavascript ES6 — Iterables and IteratorsJavascript — Proxy, Javascript — Scopes
Javascript Execution Context and Hoisting
Javascript — Generator-Yield/Next & Async-Await 🤔
Javascript data structure with map, reduce, filter
Javascript- Currying VS Partial Application
Javascript ES6 — Iterables and Iterators
Javascript — Proxy, Javascript — Scopes