Instance methods in Javascript - Mini Project: Build & Apply

Instance Methods in JavaScript

📖 Scenario: You are creating a simple program to manage a library book. Each book has a title and an author. You want to add a method to the book that can show its details.

🎯 Goal: Build a JavaScript class called Book with an instance method getDetails that returns a string describing the book.

📋 What You'll Learn

Create a class named Book with a constructor that takes title and author as parameters

Add an instance method called getDetails inside the Book class

The getDetails method should return a string in the format: "Title: [title], Author: [author]"

Create an instance of Book with title "The Great Gatsby" and author "F. Scott Fitzgerald"

Call the getDetails method on the instance and print the result

💡 Why This Matters

🌍 Real World

Classes and instance methods are used to model real-world objects like books, users, or products in software.

💼 Career

Understanding instance methods is essential for building organized and reusable code in JavaScript applications.

1

Create the Book class with constructor

Create a class called Book with a constructor that takes title and author as parameters and assigns them to this.title and this.author.

Javascript

class Book {
  constructor(title, author) {
    // Your code here
  }
}

Hint

Use this.title = title and this.author = author inside the constructor.

2

Add the instance method getDetails

Inside the Book class, add an instance method called getDetails that returns the string `Title: ${this.title}, Author: ${this.author}`.

Javascript

class Book {
  constructor(title, author) {
    this.title = title;
    this.author = author;
  }

  // Your code here
}

Hint

Define getDetails() as a method returning the formatted string using template literals.

3

Create an instance of Book

Create a variable called myBook and assign it a new Book object with title "The Great Gatsby" and author "F. Scott Fitzgerald".

Javascript

class Book {
  constructor(title, author) {
    this.title = title;
    this.author = author;
  }

  getDetails() {
    return `Title: ${this.title}, Author: ${this.author}`;
  }
}

// Your code here

Hint

Use new Book("The Great Gatsby", "F. Scott Fitzgerald") to create the instance.

4

Print the book details

Call the getDetails method on myBook and print the result using console.log.

Javascript

class Book {
  constructor(title, author) {
    this.title = title;
    this.author = author;
  }

  getDetails() {
    return `Title: ${this.title}, Author: ${this.author}`;
  }
}

const myBook = new Book("The Great Gatsby", "F. Scott Fitzgerald");

// Your code here

Hint

Use console.log(myBook.getDetails()) to print the details.

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