Instance methods in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an instance method named greet inside the class.

Javascript

class Person {
  greet() {
    return [1];
  }
}

const p = new Person();
console.log(p.greet());

Drag options to blanks, or click blank then click option'

A'Hello! I am an instance method.'

BHello

Cgreet

Dfunction greet()

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to return a string value.

Using function keyword inside class method.

The instance method greet returns the string 'Hello! I am an instance method.'. The method body must return a string value.

2fill in blank

medium

Complete the code to call the instance method greet on the object p.

Javascript

class Person {
  greet() {
    return 'Hi!';
  }
}

const p = new Person();
console.log(p.[1]());

Drag options to blanks, or click blank then click option'

Athis

BPerson

Cnew

Dgreet

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the class name instead of the method.

Forgetting the parentheses when calling the method.

To call the instance method greet on the object p, use p.greet().

3fill in blank

hard

Fix the error in the instance method to correctly access the name property.

Javascript

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return 'Hello, ' + [1] + '!';
  }
}

const p = new Person('Alice');
console.log(p.greet());

Drag options to blanks, or click blank then click option'

Aself.name

Bname

Cthis.name

DPerson.name

Attempts:

3 left

💡 Hint

Common Mistakes

Using the property name without 'this'.

Using class name to access instance properties.

Inside instance methods, use 'this' to access instance properties like name.

4fill in blank

hard

Fill both blanks to create an instance method that returns the person's full name.

Javascript

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  fullName() {
    return [1] + ' ' + [2];
  }
}

const p = new Person('John', 'Doe');
console.log(p.fullName());

Drag options to blanks, or click blank then click option'

Athis.firstName

BfirstName

Cthis.lastName

DlastName

Attempts:

3 left

💡 Hint

Common Mistakes

Using property names without 'this'.

Forgetting to add space between names.

Use 'this.firstName' and 'this.lastName' to access the instance properties inside the method.

5fill in blank

hard

Fill all three blanks to create an instance method that updates the person's age and returns a message.

Javascript

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  haveBirthday() {
    this.age = this.age [1] 1;
    return `$[2] is now $[3] years old.`;
  }
}

const p = new Person('Emma', 29);
console.log(p.haveBirthday());

Drag options to blanks, or click blank then click option'

A+

Bthis.name

Cthis.age

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-' instead of '+' to increment age.

Not using 'this' to access properties.

Incorrect template literal syntax.

The method increments age by 1 using '+', then returns a message using this.name and this.age.

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