What this keyword represents in Javascript - Step-by-Step Execution

Concept Flow - What this keyword represents

Start Execution

↓

Function or Method Call

↓

Determine 'this' Context

↓

Global Object (window in browser)

↓

Object owning the method

↓

New Object (in constructor)

↓

Explicit binding (call, apply, bind)

↓

Execute Function with 'this'

↓

Return Result

↓

End Execution

Shows how JavaScript decides what 'this' means depending on how a function is called.

Execution Sample

Javascript

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

console.log(obj.greet());

Calls a method on an object; 'this' refers to the object, so it returns 'Alice'.

Execution Table

Step	Code Line	'this' Value	Action	Output
1	const obj = {...}	N/A	Create object with name and greet method	obj created
2	obj.greet()	obj	Call greet method; 'this' is obj	returns 'Alice'
3	console.log(...)	N/A	Print returned value	Alice
4	End	N/A	Execution ends	N/A

💡 Function call completed; 'this' was obj during greet method execution.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
obj	undefined	{name: 'Alice', greet: function}	{name: 'Alice', greet: function}	{name: 'Alice', greet: function}
this (in greet)	N/A	N/A	{name: 'Alice', greet: function}	N/A
return value	N/A	N/A	'Alice'	'Alice'

Key Moments - 2 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 step 2 of the execution_table.

What if greet() was called without obj, like just greet()?

Then 'this' would refer to the global object or undefined in strict mode, not obj, because the call context changes.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what is the value of 'this' inside greet()?

A Undefined

B The global window object

C The obj object

D The greet function itself

💡 Hint

Check the 'this' Value column at step 2 in the execution_table.

At which step is the returned value 'Alice' printed to the console?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the Output column in the execution_table for console.log.

If greet() was called as a standalone function (not via obj), what would 'this' likely be?

A obj

B The global object or undefined

C null

D The greet function

💡 Hint

Recall the key_moments explanation about call context affecting 'this'.

Concept Snapshot

'this' keyword in JavaScript:
- Refers to the object that calls the function.
- In method calls, 'this' is the object before the dot.
- In standalone functions, 'this' is global object or undefined (strict mode).
- Can be set explicitly with call, apply, or bind.
- Changes depending on how function is called.

Full Transcript

This visual execution shows how JavaScript decides what 'this' means. When a method is called on an object, 'this' points to that object. For example, calling obj.greet() sets 'this' inside greet to obj, so it returns obj.name, 'Alice'. The execution table traces each step: creating the object, calling the method, and printing the result. Key moments highlight that 'this' depends on call context. The quiz tests understanding of 'this' value during method calls and standalone calls.

Practice

1. What does the this keyword represent inside a regular function in JavaScript when called as a method of an object?

easy

A. The object that owns the method

B. The global object (like window in browsers)

C. The function itself

D. Undefined

Solution

1. Step 1: Understand method call context

   When a function is called as a method of an object, this refers to that object.

2. Step 2: Apply to example

   Inside the method, this points to the object owning the method, not the global object or function itself.

3. Final Answer:

   The object that owns the method -> Option A

4. Quick Check:

   this in method = owning object [OK]

Hint: In methods, this is the object before the dot [OK]

Common Mistakes:

• Thinking this always points to global object
• Confusing this with the function itself
• Assuming this is undefined in methods

2. Which of the following is the correct way to access this inside an arrow function to refer to the surrounding object?

easy

A. Use this directly inside the arrow function

B. Use this only inside global scope

C. Use this inside a regular function instead

D. Arrow functions do not have their own this, so it inherits from the surrounding scope

Solution

1. Step 1: Understand arrow function this behavior

   Arrow functions do not have their own this; they inherit it from the surrounding scope.

2. Step 2: Apply to object method

   Using this inside an arrow function refers to the this of the outer function or object context.

3. Final Answer:

   Arrow functions do not have their own this, so it inherits from the surrounding scope -> Option D

4. Quick Check:

   Arrow function this = inherited context [OK]

Hint: Arrow functions inherit this from outside [OK]

Common Mistakes:

• Assuming arrow functions have their own this
• Using arrow functions as object methods expecting this to be the object
• Confusing arrow function this with regular function this

3. Consider the code:

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

What will be the output when greetFunc() is called?

medium

A. Alice

B. undefined

C. Error

D. null

Solution

1. Step 1: Understand function reference assignment

   Assigning obj.greet to greetFunc detaches the method from its object.

2. Step 2: Call context of greetFunc()

   When called alone, this inside greetFunc is the global object or undefined in strict mode, so this.name is undefined.

3. Final Answer:

   undefined -> Option B

4. Quick Check:

   Detached method this = undefined [OK]

Hint: Detached methods lose their object this [OK]

Common Mistakes:

• Expecting this to still point to the object
• Thinking it prints the name property
• Ignoring strict mode effects on this

4. Identify the error in the following code:

const person = {
  name: 'Bob',
  sayName: () => {
    console.log(this.name);
  }
};
person.sayName();

medium

A. this inside arrow function does not refer to person

B. Missing parentheses in method call

C. Syntax error due to arrow function in object

D. name property is not defined

Solution

1. Step 1: Analyze arrow function this behavior

   Arrow functions do not have their own this; they inherit from the outer scope, which is not person.

2. Step 2: Effect on console.log(this.name)

   Since this is not person, this.name is undefined or from global scope, not 'Bob'.

3. Final Answer:

   this inside arrow function does not refer to person -> Option A

4. Quick Check:

   Arrow function this ≠ object [OK]

Hint: Avoid arrow functions for object methods needing this [OK]

Common Mistakes:

• Thinking arrow functions bind this to object
• Assuming syntax error due to arrow function
• Confusing missing parentheses with this issues

5. You want to create a constructor function Car that sets the make property using this. Which code correctly uses this to assign the property when creating a new car?

hard

A. const Car = (make) => { this.make = make; }; const myCar = new Car('Toyota');

B. function Car(make) { make = this; } const myCar = Car('Toyota');

C. function Car(make) { this.make = make; } const myCar = new Car('Toyota');

D. function Car(make) { this.make = make; } const myCar = Car('Toyota');

Solution

1. Step 1: Understand constructor function usage

   Constructor functions use this to assign properties to the new object created by new.

2. Step 2: Check each option

   function Car(make) { this.make = make; } const myCar = new Car('Toyota'); correctly assigns this.make = make and uses new to create an object. function Car(make) { make = this; } const myCar = Car('Toyota'); assigns incorrectly. const Car = (make) => { this.make = make; }; const myCar = new Car('Toyota'); uses arrow function which does not bind this. function Car(make) { this.make = make; } const myCar = Car('Toyota'); calls constructor without new, so this is not the new object.

3. Final Answer:

   function Car(make) { this.make = make; } const myCar = new Car('Toyota'); -> Option C

4. Quick Check:

   Constructor this needs new [OK]

Hint: Use new with constructor to bind this correctly [OK]

Common Mistakes:

• Calling constructor without new
• Using arrow functions as constructors
• Assigning make = this instead of this.make = make