Week 4

In this session, you'll learn how to use JavaScript classes to create reusable templates for objects that share common properties and behaviors. By mastering classes and inheritance, you'll be able to organize your code more efficiently and implement object-oriented programming principles. These skills will help you write cleaner, more maintainable code and understand the differences between classes and objects in JavaScript.

Contents

• Preparation

• Session Plan (for mentors)

• Exercises

• Assignment

Session Learning Goals

By the end of this session, you will be able to:

• Use classes to create objects with consistent structure and built-in behavior

  • Declare a class using class, constructor, and this

  • Instantiate objects from classes using new

  • Use Methods and constructors

  • Use Static methods

  • Use inheritance with extends and super()

  • Understand the difference between classes vs objects

class Comment {
  constructor(username, text) {
    this.username = username;
    this.text = text;
    this.likes = 0;
  }

  like() {
    this.likes++;
    this.render();
  }

  render() {
    // data, behavior, and rendering live together
    const div = document.createElement("div");
    div.innerHTML = `
      <strong>@${this.username}</strong>
      <p>${this.text}</p>
      <button>❤️ ${this.likes}</button>
    `;
    return div;
  }
}

const comment = new Comment("alice", "Great post!");
document.body.appendChild(comment.render());