this in objects in Javascript - Step-by-Step Execution

Concept Flow - this in objects

Object created

↓

Method called on object

↓

Inside method: 'this' refers to object

↓

Access or modify object properties using 'this'

↓

Method returns or finishes

When a method is called on an object, 'this' inside the method points to that object, letting you access or change its properties.

Execution Sample

Javascript

const person = {
  name: 'Anna',
  greet() {
    return `Hi, I am ${this.name}`;
  }
};
console.log(person.greet());

This code defines an object with a method that uses 'this' to access the object's name property and prints a greeting.

Execution Table

Step	Code Line	Action	'this' Value	Output
1	const person = {...}	Create object 'person' with property 'name' and method 'greet'	{name: 'Anna', greet: function}
2	person.greet()	Call 'greet' method on 'person'	{name: 'Anna', greet: function}
3	Inside greet: return `Hi, I am ${this.name}`	'this' refers to 'person', access 'name' property	{name: 'Anna', greet: function}	Hi, I am Anna
4	console.log(...)	Print returned string to console		Hi, I am Anna

💡 Method call finished, output printed, execution stops.

Variable Tracker

Variable	Start	After greet call	Final
person	{name: 'Anna', greet: function}	Same object during method call	Same object after call

Key Moments - 2 Insights

Why does 'this.name' inside the method refer to 'Anna'?

'this' inside the method points to the object that called it, which is 'person'. So 'this.name' accesses 'person.name' which is 'Anna' (see execution_table step 3).

What if we call the method without the object, like const greetFunc = person.greet; greetFunc()?

Then 'this' is not bound to 'person' and usually becomes undefined or global object, so 'this.name' won't be 'Anna'. This is because 'this' depends on how the function is called, not where it is defined.

Visual Quiz - 3 Questions

Look at the execution_table step 3, what does 'this' refer to inside the greet method?

A Undefined

B The 'person' object

C The global object

D The greet function itself

💡 Hint

Check the 'this' Value column in step 3 of execution_table.

At which step is the greeting string 'Hi, I am Anna' created?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the Output column in execution_table to see when the string is formed.

If we assign greet to a variable and call it alone, what happens to 'this' inside greet?

A 'this' becomes undefined or global object

B 'this' still refers to 'person'

C 'this' refers to the greet function

D 'this' causes an error

💡 Hint

Refer to key_moments explanation about calling method without object.

Concept Snapshot

Object methods use 'this' to access their own properties.
When calling obj.method(), 'this' inside method points to obj.
Use 'this.property' to read or change object data.
Calling method without object loses 'this' binding.
'this' depends on call site, not where function is defined.

Full Transcript

This visual execution shows how 'this' works inside object methods in JavaScript. First, an object named 'person' is created with a name and a greet method. When we call person.greet(), inside the method 'this' points to the 'person' object. So 'this.name' accesses 'Anna'. The method returns the greeting string which is printed. If we call the method without the object, 'this' loses its binding and won't refer to 'person'. This example helps understand how 'this' depends on how a function is called, especially in objects.

Practice

1. What does this refer to inside a regular method of an object in JavaScript?

easy

A. The object itself

B. The global window object

C. Undefined

D. The method's name

Solution

1. Step 1: Understand this in object methods

   Inside a regular function defined as a method of an object, this refers to the object that owns the method.

2. Step 2: Compare with other contexts

   Unlike arrow functions or global functions, regular methods bind this to the object itself.

3. Final Answer:

   The object itself -> Option A

4. Quick Check:

   this in object method = object [OK]

Hint: Remember: regular methods use this as the object [OK]

Common Mistakes:

• Thinking this is always global
• Confusing arrow functions with regular functions
• Assuming this is the method name

2. Which of the following is the correct way to define a method that uses this inside an object?

easy

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

B. const obj = { greet: function() => console.log(this.name) };

C. const obj = { greet() { console.log(this.name); } };

D. const obj = { greet: function => console.log(this.name) };

Solution

1. Step 1: Identify correct method syntax

   const obj = { greet() { console.log(this.name); } }; uses the concise method syntax with a regular function, which correctly binds this to the object.

2. Step 2: Check other options for errors

   const obj = { greet: () => console.log(this.name) }; uses an arrow function, which does not bind this to the object. Options B and D have invalid syntax for function definitions.

3. Final Answer:

   const obj = { greet() { console.log(this.name); } }; -> Option C

4. Quick Check:

   Regular method syntax = const obj = { greet() { console.log(this.name); } }; [OK]

Hint: Use regular functions, not arrow functions, for methods [OK]

Common Mistakes:

• Using arrow functions for methods
• Incorrect function syntax inside objects
• Confusing method shorthand with arrow functions

3. What will be the output of the following code?

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

medium

A. Alice

B. undefined

C. Error

D. person

Solution

1. Step 1: Identify this inside greet method

   The method greet is a regular function inside the person object, so this refers to person.

2. Step 2: Access the name property

   Since this is person, this.name is 'Alice'. The console logs 'Alice'.

3. Final Answer:

   Alice -> Option A

4. Quick Check:

   this.name = 'Alice' [OK]

Hint: Regular method this points to the object [OK]

Common Mistakes:

• Expecting undefined because of arrow function confusion
• Thinking this is global
• Assuming method returns error

4. Find the error in this code and fix it:

const car = {
  brand: 'Toyota',
  showBrand: () => {
    console.log(this.brand);
  }
};
car.showBrand();

medium

A. No error, code works fine

B. Add .bind(car) to arrow function

C. Replace this.brand with car.brand

D. Change arrow function to regular function: showBrand() { console.log(this.brand); }

Solution

1. Step 1: Identify arrow function issue

   Arrow functions do not have their own this. Here, this.brand is undefined because this is not bound to car.

2. Step 2: Fix by using regular function

   Changing showBrand to a regular method binds this to car, so this.brand correctly accesses 'Toyota'.

3. Final Answer:

   Change arrow function to regular function: showBrand() { console.log(this.brand); } -> Option D

4. Quick Check:

   Regular function binds this correctly [OK]

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

Common Mistakes:

• Using arrow functions for methods
• Trying to bind this on arrow functions
• Ignoring this context rules

5. You want to create an object with a method that returns a greeting using the object's name. Which code correctly uses this to achieve this?

const user = {
  name: 'Bob',
  greet: ???
};
console.log(user.greet());

hard

A. greet: () => `Hello, ${this.name}!`

B. greet() { return `Hello, ${this.name}!`; }

C. greet: function() => `Hello, ${this.name}!`

D. greet: function { return `Hello, ${this.name}!`; }

Solution

1. Step 1: Check method syntax and this binding

   greet() { return `Hello, ${this.name}!`; } uses a regular method syntax, so this correctly refers to the user object.

2. Step 2: Validate other options

   greet: () => `Hello, ${this.name}!` uses an arrow function, which does not bind this to the user object. Options B and C have invalid syntax for function definitions.

3. Final Answer:

   greet() { return `Hello, ${this.name}!`; } -> Option B

4. Quick Check:

   Regular method with this = greet() { return `Hello, ${this.name}!`; } [OK]

Hint: Use regular methods for this access in objects [OK]

Common Mistakes:

• Using arrow functions for methods
• Incorrect function syntax
• Expecting this to work in arrow functions