this with arrow functions in Javascript - Step-by-Step Execution

Concept Flow - this with arrow functions

Start function

↓

Arrow function created

↓

Arrow function uses 'this' from surrounding context

↓

Call arrow function

↓

Access 'this' from outer scope

↓

Return or use 'this'

↓

End

Arrow functions do not have their own 'this'. They use 'this' from where they were created.

Execution Sample

Javascript

const obj = {
  name: 'Alice',
  greet: () => console.log(this.name)
};
obj.greet();

This code tries to print 'name' using an arrow function inside an object.

Execution Table

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

💡 'this' inside arrow function is not obj, but outer scope, so this.name is undefined

Variable Tracker

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

Key Moments - 2 Insights

Why does 'this.name' inside the arrow function not refer to 'obj.name'?

Because arrow functions do not have their own 'this'. They use 'this' from where they were created, which is the outer/global scope here, not the object.

What would happen if we used a regular function instead of an arrow function for 'greet'?

A regular function's 'this' would refer to the object when called as obj.greet(), so 'this.name' would correctly be 'Alice'.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'this' inside the arrow function when obj.greet() is called?

A Global or module scope

B Undefined

C The obj object

D The greet function itself

💡 Hint

Check the 'this' value column in step 3 and 4 of the execution table.

At which step does the output 'undefined' occur?

A Step 4

B Step 3

C Step 2

D Step 1

💡 Hint

Look at the Output column in the execution table.

If we replace the arrow function with a regular function, how would the output change?

A Output would be 'undefined' still

B Output would be an error

C Output would be 'Alice'

D Output would be an empty string

💡 Hint

Recall that regular functions have their own 'this' bound to the calling object.

Concept Snapshot

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.

Full Transcript

This visual trace shows how 'this' behaves inside arrow functions in JavaScript. When an arrow function is created inside an object, it does not get its own 'this'. Instead, it uses 'this' from the outer scope, which is usually the global or module scope. So, when calling obj.greet(), the arrow function's 'this' is not the object, but the outer scope. This causes 'this.name' to be undefined. If we used a regular function instead, 'this' would refer to the object, and 'this.name' would be 'Alice'. This difference is important to understand when choosing between arrow functions and regular functions.