

0 / 2 embers
0 / 3000 xp
click for more info
Complete a lesson to start your streak
click for more info
Difficulty: 3
click for more info
Not enough gems
Cost: 6 gems
1: Objects
incomplete
2: No Colon
incomplete
3: Updating Properties
incomplete
4: Nesting Properties
incomplete
5: Nesting Properties Quiz
incomplete
6: Optional Chaining
incomplete
7: When to Chain
incomplete
8: Object Methods
incomplete
9: Methods Mutate
incomplete
10: Initializing Props
incomplete
11: Strings As Keys
incomplete
12: This
incomplete
13: Arrow Functions
incomplete
14: Fat Arrows and This
incomplete
15: Spread Syntax
incomplete
16: Return Objects
incomplete
17: Destructuring
incomplete
18: Not Bound
incomplete
Back
ctrl+,
Next
ctrl+.
This lesson's interactive features are locked, please to keep using them
The this keyword is perhaps one of the most rage-inducing parts of JavaScript. Once you understand it, it's not too bad, but it's far from intuitive (in my opinion).
Click to play video
Put simply, this refers to the context where a piece of code is executed... let's cover some of those cases:
this refers to the window object in browsers or module.exports in Node.js (not global, as you might expect).
// in a browser
console.log(this);
// Window { ... }
// in Node.js
console.log(this);
// {}
In strict mode (which we'll cover later, don't worry about it too much for now) this is undefined in the global scope in both the browser and Node.js.
"use strict";
console.log(typeof this);
// undefined
Inside a standard method or a constructor, this refers to the object the method is called on.
const myObject = {
message: "Hello, World!",
myMethod() {
console.log(this);
console.log(this.message);
},
};
myObject.myMethod();
// { message: 'Hello, World!', myMethod: [Function: myMethod] }
// Hello, World!
We'll cover arrow functions specifically in the next lesson - they're a bit of a special case.