How to Extend Class in JavaScript: Syntax and Examples

In JavaScript, you extend a class by using the extends keyword followed by the parent class name. This creates a new class that inherits properties and methods from the parent, allowing you to add or override functionality.

Syntax

The basic syntax to extend a class uses the extends keyword. You write class ChildClass extends ParentClass to create a new class that inherits from ParentClass. Inside the child class, you can add new methods or override existing ones.

The super() function is used inside the child class constructor to call the parent class constructor and properly initialize the object.

javascript

class ParentClass {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}`;
  }
}

class ChildClass extends ParentClass {
  constructor(name, age) {
    super(name); // calls ParentClass constructor
    this.age = age;
  }
  greet() {
    return `${super.greet()}! You are ${this.age} years old.`;
  }
}

Example

This example shows how to create a parent class Animal and extend it with a child class Dog. The child class adds a new property and overrides a method to add more details.

javascript

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  speak() {
    return `${this.name} barks. Breed: ${this.breed}`;
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
console.log(dog.speak());

Output

Buddy barks. Breed: Golden Retriever

Common Pitfalls

• Forgetting to call super() in the child class constructor causes an error because the parent class is not initialized.
• Overriding methods without calling super.methodName() can lose the parent class behavior if you want to keep it.
• Using extends with non-class objects or functions will not work as expected.

javascript

class Parent {
  constructor() {
    console.log('Parent constructor');
  }
}

// Wrong: Missing super() call
class ChildWrong extends Parent {
  constructor() {
    // super() is missing here
    console.log('Child constructor');
  }
}

// Right: Calls super()
class ChildRight extends Parent {
  constructor() {
    super();
    console.log('Child constructor');
  }
}

Quick Reference

• extends: keyword to inherit from a parent class.
• super(): calls the parent class constructor.
• Override methods by defining them in the child class.
• Use super.methodName() to call parent methods inside overrides.

Key Takeaways

Use extends to create a child class that inherits from a parent class.

Always call super() in the child constructor before using this.

Override methods in the child class to customize behavior, optionally calling super.method().

Extending non-class objects will not work; only classes can be extended.

Remember to initialize all needed properties in the child constructor.