JavaScript Scope & Hoisting
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
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.
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
javascript
object.method();
// inside method, this is objectWhatever is left of the dot becomes this.
When a function is a property of an object and called through it, this is that object.
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.
Taking a method out of its object breaks the link.
There is no longer anything to the left of the dot.
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.
bind creates a new function with this locked to the object.
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.
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
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.
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
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.
Inside a class, this refers to the instance being created or used.
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
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>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.
this is decided when a function is called, not when it is written.this is whatever is to the left of the dot.this.bind locks this to a chosen object.this of their own and use the surrounding one.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.