0const obj = { name: 'Alice', greet: () => console.log(this.name) }; obj.greet();
| Step | Code Line | Action | 'this' value | Output |
|---|---|---|---|---|
| 1 | const obj = {...} | Create object with name and greet | Global or module scope | |
| 2 | greet: () => console.log(this.name) | Define arrow function; 'this' is from outer scope | Global or module scope | |
| 3 | obj.greet() | Call arrow function | Global or module scope | undefined |
| 4 | console.log(this.name) | Access 'this.name' in arrow function | Global or module scope | undefined |
| Variable | Start | After 1 | After 2 | After 3 | Final |
|---|---|---|---|---|---|
| obj | undefined | {name: 'Alice', greet: [Function]} | {name: 'Alice', greet: [Function]} | {name: 'Alice', greet: [Function]} | {name: 'Alice', greet: [Function]} |
| this | Global or module scope | Global or module scope | Global or module scope | Global or module scope | Global or module scope |
Arrow functions do NOT have their own 'this'. They use 'this' from the surrounding code where they are created. Inside objects, arrow functions do NOT bind 'this' to the object. Use regular functions to access object 'this'. Arrow functions are great for preserving outer 'this' in callbacks.
What is true about this in arrow functions compared to regular functions?
this works in arrow functionsthis. Instead, they use the this value from the surrounding (lexical) context where they are created.this to the global object, undefined, or themselves.this in arrow functions is inherited from the surrounding code where they are created. -> Option Athis in arrow functions = lexical this [OK]this, not their own [OK]thisthis is always global in arrow functionsWhich of the following is the correct syntax to define an arrow function that logs this.name?
const obj = { name: 'Alice', logName: ??? }() => expression or () => { statements }. logName: () => console.log(this.name) uses the correct concise syntax.function() syntax, not arrow functions. logName: () { console.log(this.name) } () { console.log(this.name) } is missing the fat arrow =>, resulting in a syntax error. Note: even with correct arrow syntax as an object method, this would refer to the lexical scope (global), not the object.What will be the output of this code?
const person = {
name: 'Bob',
greet: () => {
console.log(this.name);
}
};
person.greet();this in arrow functions inside objectsgreet does not have its own this. It uses this from the surrounding scope, which is the global scope here.this.namethis.name in global scope is undefined unless explicitly set.this = lexical this (global) [OK]this, not object [OK]this to be the objectthis.name is setFind the error in this code and fix it so that this.name inside greet refers to the user object:
const user = {
name: 'Carol',
greet: () => {
console.log(this.name);
}
};
user.greet();this.name is incorrectthis, so inside greet, this is not the user object.greet as a regular function method binds this to the user object when called as user.greet().greet to a regular function: greet() { console.log(this.name); } -> Option Cthis [OK]this [OK]this to arrow functionsthisthisYou want to create an object with a method that uses a callback to print the object's name property after 1 second. Which code correctly uses arrow functions to keep this referring to the object?
const obj = {
name: 'Dave',
printName: function() {
setTimeout(??? , 1000);
}
};
obj.printName();this inside setTimeout callbacksetTimeout, a regular function's this is global or undefined, so it loses the object context.this from printNamethis from printName, which is the object obj.this from method [OK]this context [OK]this contextthisPass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.