JavaScript Scope & Hoisting
JavaScript this Keyword
The JavaScript
thiskeyword refers to the object that is running the current function.
Its value is decided when the function is called, not when it is written.
That single rule explains almost every surprise involving this.
Example
Example
javascript
const person = {
name: "Ada",
greet: function () {
return "Hello " + this.name;
}
};
console.log(person.greet());Here, this is person, because the function was called on person.
The output is Hello Ada.
What is the this Keyword?
this is a reference that changes depending on how a function is called.
The simplest guide is to look at what comes before the dot at the call site.
If there is no dot, this is not the object you might expect.
Syntax
Syntax
javascript
object.method();
// inside method, this is objectWhatever is left of the dot becomes this.
this in a Method
When a function is a property of an object and called through it, this is that object.
Example
Example
javascript
const car = {
brand: "Toyota",
describe: function () {
return "This is a " + this.brand;
}
};
console.log(car.describe());car is to the left of the dot, so this is car.
Losing this
Taking a method out of its object breaks the link.
There is no longer anything to the left of the dot.
Example
Example
javascript
const car = {
brand: "Toyota",
describe: function () {
return "This is a " + this.brand;
}
};
const describe = car.describe;
console.log(typeof describe);Calling describe() on its own would not find brand.
This is exactly what happens when a method is passed as a callback.
Fixing it with bind
bind creates a new function with this locked to the object.
Example
Example
javascript
const car = {
brand: "Toyota",
describe: function () {
return "This is a " + this.brand;
}
};
const describe = car.describe.bind(car);
console.log(describe());Now the function works wherever it is called from.
Arrow Functions Have No this
An arrow function does not get its own this.
It uses the this of the code that surrounds it, which is usually what you want inside a callback.
Example
Example
javascript
const team = {
name: "Alpha",
members: ["Ada", "Grace"],
list: function () {
return this.members.map(m => m + " of " + this.name);
}
};
console.log(team.list());The arrow function inside map still sees the team's this.
Do Not Use an Arrow as a Method
Because an arrow has no this of its own, it cannot see the object it belongs to.
Use a normal function for object methods.
Example
Example
javascript
const person = {
name: "Ada",
greetGood: function () {
return "Hi " + this.name;
}
};
console.log(person.greetGood());Written as an arrow function, this.name would be undefined.
this in a Class
Inside a class, this refers to the instance being created or used.
Example
Example
javascript
class Dog {
constructor(name) {
this.name = name;
}
speak() {
return this.name + " says woof";
}
}
const rex = new Dog("Rex");
console.log(rex.speak());Each instance has its own this.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript this Keyword</title>
</head>
<body>
<h1>JavaScript this Keyword</h1>
<p id="result"></p>
<script>
const team = {
name: "Alpha",
members: ["Ada", "Grace"],
list: function () {
return this.members.map(m => m + " of " + this.name).join("<br>");
}
};
document.getElementById("result").innerHTML = team.list();
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try a normal function inside map:
Replace the arrow with function (m) { ... } and see this.name break.
Important Points
thisis decided when a function is called, not when it is written.- In a method,
thisis whatever is to the left of the dot. - Taking a method out of its object loses
this. bindlocksthisto a chosen object.- Arrow functions have no
thisof their own and use the surrounding one.
Conclusion
The JavaScript this keyword points at whatever object is running the function.
Because it depends on the call, moving a method around can change what it means.
Understanding this makes methods, callbacks and classes far less mysterious.