This Context in Javascript
In this video you will learn what is this in javascript and why context is important. So if you are a beginner in javascript this video is for you. Let's jump right into it.
So there is a keyword this in Javascript. And it's simply a reference to it's parent. But there is lots of important things to know and this is always a difficult topic for the beginners.
Let's check this out on the example
function getItem () {
console.log(this);
};
getItem();
So here we created a function and just logged inside this. As you can see in browser we get window back. And this is the most important point to remember. Doesn't matter where is your function, if your this is written inside a function it will be a reference to a global object. In our case Window.
Now let's create an object with a method.
const item = {
title: "Ball",
getItem() {
console.log("this", this);
},
};
item.getItem();
So as you can see when we use this inside a method of object we get a reference to the object itself.
In exactly the same way it will work with ES6 classes.
class Item {
title = "Ball";
getItem() {
console.log("this", this);
}
}
const item = new Item();
item.getItem();
So objects and classes are working in exactly the same way. Reference of this is always to the object itself or in the case of the class to the instance.
Now why do we need this at all? For example we can use a title from the instance inside our class
console.log("this", this.title);
So this allow us to do with parent anything like with local variable.
But what will happen if we create a function inside a method?
getItem() {
function someFn() {
console.log("this", this);
}
someFn();
}
It's not obvious but here we get undefined. So actually we are inside a method but it doesn't matter because we call it inside function. Not inside method. Which actually means that we loose correct reference with any function. The same will be with map for example
getItem() {
[1, 2, 3].map(function (item) {
console.log(this);
});
}
What can we do to solve this problem? The easiest solution is to store a correct reference in the place where we still have access to it. And there it will be available just like a normal property.
getItem() {
const _this = this;
[1, 2, 3].map(function (item) {
console.log(_this);
});
}
We don't normally write like this because we have better solution but if our code is transpiled in older version of javascript this is exactly what is happening under the hood.
So what is better solution? In ES6 we got arrow function and they are solving this problem correctly.
Let's try to rewrite our code to arrow function.
getItem() {
[1, 2, 3].map((item) => {
console.log(this);
});
}
As you can see everything is working correctly out of the box. Why? Because functions and arrows functions are working completely differently. Function try to get a global access like window but arrow function always get access of the parent. And it's more correct for programming and of course widely used.
So hope that you never write functions and use only arrow function because they are widely supported and help you to get rid of problems with incorrect this reference.
So here is a sum up:
- This is a reference to the parent which allow us to do something with it from the child
- In functions reference is on global object which is normally not what we want
- In arrow function reference is always nested from parent
- In methods and classes you are getting a reference to your object or your instance when you write your code inside method
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
