Instance methods in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of instance method call

What is the output of this JavaScript code?

Javascript

class Car {
  constructor(make) {
    this.make = make;
  }
  getMake() {
    return `This car is a ${this.make}`;
  }
}
const myCar = new Car('Toyota');
console.log(myCar.getMake());

A undefined

B "This car is a myCar"

C "This car is a Toyota"

D TypeError

💡 Hint

Remember that instance methods use 'this' to access properties of the object.

The method getMake() returns a string using the 'make' property of the instance. Since 'myCar' was created with 'Toyota', the output is 'This car is a Toyota'.

❓ Predict Output

intermediate

Value of property after method call

What is the value of 'counter.count' after running this code?

Javascript

class Counter {
  constructor() {
    this.count = 0;
  }
  increment() {
    this.count += 1;
  }
}
const counter = new Counter();
counter.increment();
counter.increment();

A 0

B NaN

C undefined

D 2

💡 Hint

Each call to increment adds 1 to the count property.

The constructor sets count to 0. Each increment call adds 1, so after two calls, count is 2.

❓ Predict Output

advanced

Output with method using arrow function

What is the output of this code?

Javascript

class Person {
  constructor(name) {
    this.name = name;
  }
  greet = () => {
    return `Hello, my name is ${this.name}`;
  }
}
const p = new Person('Alice');
console.log(p.greet());

A "Hello, my name is undefined"

B "Hello, my name is Alice"

C SyntaxError

D TypeError

💡 Hint

Arrow functions keep the 'this' from their surrounding context.

The greet method is an arrow function property, so 'this.name' correctly refers to the instance property 'name'. The output is 'Hello, my name is Alice'.

❓ Predict Output

advanced

Output when method is extracted from instance

What is the output of this code?

Javascript

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

A "undefined says woof!"

B "Buddy says woof!"

C TypeError

D ReferenceError

💡 Hint

When a method is called without its object, 'this' is undefined in strict mode.

Extracting the method and calling it loses the original 'this' binding. So 'this.name' is undefined, resulting in 'undefined says woof!'.

🧠 Conceptual

expert

Why use instance methods instead of static methods?

Which is the best reason to use instance methods instead of static methods in a class?

A Instance methods can access and modify individual object data, while static methods cannot.

B Instance methods run faster than static methods.

C Static methods cannot be called from outside the class.

D Static methods automatically bind 'this' to the instance.

💡 Hint

Think about what data each method type can access.

Instance methods work with data specific to each object instance. Static methods belong to the class itself and cannot access instance properties.

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