All Roadmaps›⚡ JavaScript›Phase 2›ES6 Classes & Inheritance

ES6 Classes & Inheritance

📖 Concept

ES6 classes are syntactic sugar over JavaScript's prototypal inheritance. They provide a cleaner, more familiar syntax but work the same way under the hood.

Key features:

  • constructor() — Called when creating new instances with new
  • Instance methods — Defined in the class body
  • static methods — Called on the class itself, not instances
  • extends — Inherit from a parent class
  • super — Call the parent's constructor or methods
  • Getters/Setters — Computed properties
  • Private fields (#field) — Truly private properties (ES2022)

🏠 Real-world analogy: A class is like a blueprint for a house. You can build many houses (instances) from the same blueprint. extends is like modifying the blueprint to add a garage — the new blueprint inherits the original rooms.

💻 Code Example

codeTap to expand ⛶
1class Animal {
2  // Private field (ES2022)
3  #id;
4  
5  constructor(name, sound) {
6    this.name = name;
7    this.sound = sound;
8    this.#id = Math.random().toString(36).slice(2);
9  }
10  
11  // Instance method
12  speak() {
13    return `${this.name} says ${this.sound}`;
14  }
15  
16  // Getter
17  get info() {
18    return `${this.name} (${this.sound})`;
19  }
20  
21  // Setter with validation
22  set nickname(value) {
23    if (value.length < 2) throw new Error("Too short!");
24    this._nickname = value;
25  }
26  
27  // Static method
28  static create(name, sound) {
29    return new Animal(name, sound);
30  }
31  
32  // Private method
33  #generateTag() {
34    return `ANIMAL-${this.#id}`;
35  }
36}
37

38// Inheritance with extends
39class Dog extends Animal {
40  constructor(name, breed) {
41    super(name, "Woof");  // MUST call super before using 'this'
42    this.breed = breed;
43  }
44  
45  // Override parent method
46  speak() {
47    return `${super.speak()} (tail wagging)`;
48  }
49  
50  fetch(item) {
51    return `${this.name} fetches the ${item}!`;
52  }
53}
54

55const rex = new Dog("Rex", "German Shepherd");
56console.log(rex.speak());       // "Rex says Woof (tail wagging)"
57console.log(rex.info);          // "Rex (Woof)" — inherited getter
58console.log(rex instanceof Dog);     // true
59console.log(rex instanceof Animal);  // true
60console.log(Dog.create);        // undefined — static methods aren't inherited on instances

🏋️ Practice Exercise

Mini Exercise:

  1. Create a BankAccount class with private #balance, deposit, withdraw, and getBalance
  2. Create a SavingsAccount that extends BankAccount and adds interest calculation
  3. Implement a LinkedList class with add, remove, and traverse methods
  4. Create a Validator class with static methods for email, phone, and password validation

⚠️ Common Mistakes

  • Forgetting to call super() in a child class constructor BEFORE using this — throws ReferenceError

  • Thinking classes are hoisted like function declarations — they are NOT (similar to let/const TDZ)

  • Confusing static methods with instance methods — static methods are on the class, not on instances

  • Using arrow functions as class methods — they work as class fields but are NOT on the prototype (memory duplication)

  • Forgetting that #private fields are truly private — not accessible via this['#field'] or outside the class

💼 Interview Questions

🎤 Mock Interview

Mock interview is powered by AI for ES6 Classes & Inheritance. Login to unlock this feature.

← PreviousPrototypes & Prototypal InheritanceNext →Error Handling