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

Concept Flow - this in functions

Function called

↓

Determine 'this' context

↓

Called as method

↓

Called as function

↓

Called with call/apply/bind

↓

Arrow function

↓

Execute function body using 'this'

When a function runs, JavaScript decides what 'this' means based on how the function is called.

Execution Sample

Javascript

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

Calls greet as a method of obj, so 'this' refers to obj and prints 'Alice'.

Execution Table

Step	Code Line	'this' Value	Action	Output
1	const obj = {...}	N/A	Create object with name and greet method
2	obj.greet()	obj	Call greet as method, 'this' is obj
3	console.log(this.name)	obj	Access this.name, which is 'Alice'	Alice
4	Function ends	N/A	No more code to run

💡 Function finishes after printing 'Alice'

Variable Tracker

Variable	Start	After Call
this	undefined (before call)	obj (inside greet)

Key Moments - 3 Insights

Why does 'this' refer to obj inside greet()?

'this' refers to the object before the dot when a method is called, as shown in execution_table step 2.

What if greet() was called without obj, like const f = obj.greet; f();?

Then 'this' would be undefined (in strict mode) or the global object, because the function is called standalone, not as a method.

How do arrow functions affect 'this'?

Arrow functions do not have their own 'this'; they use 'this' from the surrounding code, unlike normal functions.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'this' at step 2?

A The global object

B The obj object

C undefined

D null

💡 Hint

Check the 'this' Value column in execution_table row for step 2.

At which step does the function print 'Alice'?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the Output column in execution_table to find when 'Alice' is printed.

If greet() was called as a standalone function, what would 'this' be inside it?

A The greet function itself

B obj

C undefined in strict mode

D Always the global object

💡 Hint

Refer to key_moments explanation about calling greet() without obj.

Concept Snapshot

this in functions (JavaScript):
- 'this' depends on how function is called
- Method call: 'this' = object before dot
- Standalone call: 'this' = undefined (strict) or global
- call/apply/bind can set 'this' explicitly
- Arrow functions inherit 'this' from surrounding scope

Full Transcript

In JavaScript, the meaning of 'this' inside a function depends on how the function is called. When a function is called as a method of an object, 'this' refers to that object. For example, calling obj.greet() sets 'this' to obj inside greet. If the function is called standalone, like just greet(), then 'this' is undefined in strict mode or the global object otherwise. Arrow functions do not have their own 'this'; they use 'this' from the surrounding code. This behavior is shown step-by-step in the execution table where obj.greet() calls greet with 'this' as obj, and the function prints the name 'Alice'.