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.

Practice

1. What is an instance method in JavaScript classes?

easy

A. A special keyword to create new objects

B. A variable that stores data inside a class

C. A function that runs without creating an object

D. A function defined inside a class that works with object data

Solution

1. Step 1: Understand class components

   A class can have variables (properties) and functions (methods).

2. Step 2: Identify instance methods

   Instance methods are functions inside the class that use object data.

3. Final Answer:

   A function defined inside a class that works with object data -> Option D

4. Quick Check:

   Instance method = function inside class using object data [OK]

Hint: Instance methods are functions inside classes using object info [OK]

Common Mistakes:

• Confusing instance methods with variables
• Thinking instance methods run without objects
• Mixing instance methods with static methods

2. Which of the following is the correct syntax to define an instance method greet inside a JavaScript class?

easy

A. function greet() { console.log('Hello'); }

B. greet() { console.log('Hello'); }

C. var greet = () => { console.log('Hello'); }

D. static greet() { console.log('Hello'); }

Solution

1. Step 1: Recall instance method syntax

   Inside a class, instance methods are defined by name followed by parentheses and braces without the function keyword.

2. Step 2: Check each option

   greet() { console.log('Hello'); } matches this syntax. function greet() { console.log('Hello'); } wrongly uses function. var greet = () => { console.log('Hello'); } uses variable syntax outside class method style. static greet() { console.log('Hello'); } defines a static method, not instance.

3. Final Answer:

   greet() { console.log('Hello'); } -> Option B

4. Quick Check:

   Instance method syntax = name() { ... } [OK]

Hint: Instance methods omit 'function' keyword inside classes [OK]

Common Mistakes:

• Adding 'function' keyword inside class methods
• Using arrow functions as instance methods
• Confusing static and instance method syntax

3. What will be the output of this code?

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hi, I am ${this.name}`;
  }
}
const p = new Person('Anna');
console.log(p.greet());

medium

A. Hi, I am Anna

B. Hi, I am undefined

C. Error: greet is not a function

D. Hi, I am p

Solution

1. Step 1: Understand object creation

   The Person class sets this.name to 'Anna' when creating p.

2. Step 2: Call the instance method

   The greet method returns a string using this.name, which is 'Anna'.

3. Final Answer:

   Hi, I am Anna -> Option A

4. Quick Check:

   Method uses this.name = 'Anna' so output matches [OK]

Hint: Instance methods use 'this' to access object data [OK]

Common Mistakes:

• Forgetting to use 'this' inside methods
• Calling method without creating object
• Expecting method to print instead of return

4. Find the error in this code:

class Car {
  constructor(model) {
    this.model = model;
  }
  showModel() {
    console.log(model);
  }
}
const c = new Car('Tesla');
c.showModel();

medium

A. Constructor should not have parameters

B. showModel should return a value, not console.log

C. Missing 'this' before model in showModel method

D. Cannot create object with 'new' keyword

Solution

1. Step 1: Check variable usage in method

   The method tries to print model but it is not defined locally or globally.

2. Step 2: Use 'this' to access object property

   Inside methods, object properties must be accessed with this.model.

3. Final Answer:

   Missing 'this' before model in showModel method -> Option C

4. Quick Check:

   Access object data with this.property [OK]

Hint: Use 'this' to access object properties inside methods [OK]

Common Mistakes:

• Omitting 'this' before property names
• Confusing local variables with object properties
• Thinking constructor parameters are not allowed

5. You want to create a class Counter that counts how many times its method increment is called on each object separately. Which code correctly implements this behavior?

hard

A. class Counter {
constructor() {
this.count = 0;
}
increment() {
this.count++;
return this.count;
}
}

B. class Counter {
static count = 0;
increment() {
Counter.count++;
return Counter.count;
}
}

C. class Counter {
constructor() {
this.count = 0;
}
increment() {
count++;
return count;
}
}

D. class Counter {
increment() {
this.count = this.count + 1;
return this.count;
}
}

Solution

1. Step 1: Understand instance vs static properties

   Each object needs its own count, so it must be an instance property set in the constructor.

2. Step 2: Check increment method

   The method should increase this.count and return it. class Counter { constructor() { this.count = 0; } increment() { this.count++; return this.count; } } does this correctly.

3. Step 3: Identify errors in other options

   class Counter { static count = 0; increment() { Counter.count++; return Counter.count; } } uses static property shared by all objects. class Counter { constructor() { this.count = 0; } increment() { count++; return count; } } uses undefined count variable. class Counter { increment() { this.count = this.count + 1; return this.count; } } does not initialize count before incrementing.

4. Final Answer:

   class Counter { constructor() { this.count = 0; } increment() { this.count++; return this.count; } } -> Option A

5. Quick Check:

   Instance property in constructor + method updates it [OK]

Hint: Instance properties track data per object; static shares across all [OK]

Common Mistakes:

• Using static properties for per-object data
• Not initializing properties before use
• Incrementing undefined variables