Why Instance methods in Javascript? - Purpose & Use Cases

The Big Idea

What if each object could carry its own instructions and act on its own without extra code everywhere?

The Scenario

Imagine you have many toy cars, and each car has its own color and speed. You want to tell each car to start moving. If you try to write separate instructions for each car manually, it quickly becomes confusing and messy.

The Problem

Writing separate functions for each toy car wastes time and causes mistakes. You might forget to update one car's speed or color, and repeating similar code makes your work slow and error-prone.

The Solution

Instance methods let each toy car have its own actions built-in. You create one blueprint for cars, and each car knows how to start moving by itself. This keeps your code clean and easy to manage.

Before vs After

✗ Before

const car1 = { color: 'red', speed: 10 };
function startCar1() { console.log('Car1 is moving at ' + car1.speed); }
startCar1();

✓ After

class Car {
  constructor(color, speed) {
    this.color = color;
    this.speed = speed;
  }
  start() {
    console.log(`${this.color} car is moving at ${this.speed}`);
  }
}
const car1 = new Car('red', 10);
car1.start();

What It Enables

Instance methods let each object act on its own data, making your programs organized and powerful.

Real Life Example

Think of a video game where each character can jump or run. Each character has its own speed and health, and instance methods let each character perform actions independently.

Key Takeaways

Manual code for each object is slow and error-prone.

Instance methods bundle actions with each object.

This makes code cleaner, reusable, and easier to understand.

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