Instance methods in Javascript - Step-by-Step Execution

Concept Flow - Instance methods

Create Object Instance

↓

Call Instance Method

↓

Method Uses 'this' to Access Object Data

↓

Method Returns or Modifies Data

↓

End

An instance method is a function tied to an object instance that can access and modify that object's data using 'this'.

Execution Sample

Javascript

class Dog {
  constructor(name) {
    this.name = name;
  }
  bark() {
    return `${this.name} says Woof!`;
  }
}
const myDog = new Dog('Buddy');
console.log(myDog.bark());

This code creates a Dog object with a name and calls its bark method to print a message.

Execution Table

Step	Action	Evaluation	Result
1	Create Dog instance with name 'Buddy'	new Dog('Buddy')	Object { name: 'Buddy' }
2	Call bark() on myDog	myDog.bark()	'Buddy says Woof!'
3	Inside bark(), access this.name	this.name	'Buddy'
4	Return string with name	`${this.name} says Woof!`	'Buddy says Woof!'
5	Print returned string	console.log output	Buddy says Woof!

💡 Method call completes and output is printed.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
myDog	undefined	{ name: 'Buddy' }	{ name: 'Buddy' }	{ name: 'Buddy' }
this.name	undefined	undefined	'Buddy'	'Buddy'

Key Moments - 2 Insights

Why do we use 'this.name' inside the bark method?

'this.name' refers to the name property of the specific object instance calling the method, as shown in step 3 of the execution table.

What happens if we call bark() without creating an instance?

There is no 'this' context, so it will cause an error or undefined behavior because the method expects to be called on an object instance (step 1 shows instance creation).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'this.name' inside the bark method?

A null

B undefined

C 'Buddy'

D The whole object

💡 Hint

Check step 3 in the execution table where 'this.name' is evaluated.

At which step is the Dog instance created?

A Step 1

B Step 2

C Step 4

D Step 5

💡 Hint

Look at the action descriptions in the execution table.

If we change the name to 'Max' when creating the Dog, what will bark() return?

A 'Buddy says Woof!'

B 'Max says Woof!'

C 'undefined says Woof!'

D An error

💡 Hint

Refer to variable_tracker for 'this.name' and how it depends on the instance's name.

Concept Snapshot

Instance methods are functions inside objects.
They use 'this' to access object data.
Called on an instance, they can read or change that instance's properties.
Syntax: methodName() { ... } inside class or object.
Example: dog.bark() uses this.name to say name.

Full Transcript

Instance methods are functions that belong to an object instance. When you create an object from a class, you can call these methods on that object. Inside the method, 'this' refers to the object itself, letting the method access or change the object's data. For example, a Dog class has a bark method that uses this.name to say the dog's name. When you create a Dog named Buddy and call bark, it returns 'Buddy says Woof!'. This shows how instance methods work step-by-step.