⬅ Previous Topic
Enhanced Object Literals in JavaScript - ES6 FeaturesNext Topic ⮕
JavaScript Modules - import & export⬅ Previous Topic
Enhanced Object Literals in JavaScript - ES6 FeaturesNext Topic ⮕
JavaScript Modules - import & exportJavaScript classes are a syntactic sugar introduced in ES6 to write object-oriented code more cleanly. Under the hood, classes use prototypes, but they make the code easier to understand and maintain.
A class is defined using the class
keyword followed by a constructor and methods.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const john = new Person("John", 30);
john.greet();
Hello, my name is John and I am 30 years old.
The constructor
is a special method called automatically when a new object is created using the new
keyword. It is used to initialize object properties.
Any method defined inside the class (but outside the constructor) is added to the prototype of the object, making it memory-efficient.
Classes offer a more intuitive, object-oriented way to structure code—especially for beginners. They group constructor logic and behavior into a single block, improving readability and reuse.
Inheritance allows a class to acquire properties and methods from another class. This promotes code reuse and helps model real-world hierarchies.
Use the extends
keyword to inherit from a parent class, and super()
to call the parent class constructor.
class Animal {
constructor(name) {
this.name = name;
}
makeSound() {
console.log("Some generic animal sound");
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // call to parent constructor
this.breed = breed;
}
makeSound() {
console.log("Woof! Woof!");
}
getDetails() {
console.log(`${this.name} is a ${this.breed}`);
}
}
const tommy = new Dog("Tommy", "Labrador");
tommy.makeSound();
tommy.getDetails();
Woof! Woof! Tommy is a Labrador
super()
in the child class?A: You’ll get a reference error. The child class must call super()
before accessing this
keyword.
Let’s take another real-world example where a Vehicle
class is extended by Car
class.
class Vehicle {
constructor(type) {
this.type = type;
}
startEngine() {
console.log(`${this.type} engine started.`);
}
}
class Car extends Vehicle {
constructor(type, brand) {
super(type);
this.brand = brand;
}
displayInfo() {
console.log(`This is a ${this.brand} ${this.type}.`);
}
}
const myCar = new Car("car", "Toyota");
myCar.startEngine();
myCar.displayInfo();
car engine started. This is a Toyota car.
class
to define blueprints for objects.constructor()
initializes object properties.extends
to inherit from another class.super()
calls the parent class constructor.Q: Can a subclass have its own methods along with inherited ones?
A: Yes, subclasses can define their own methods and also access or override methods from the parent class.
Q: Is class-based syntax mandatory in JavaScript?
A: No, but it’s the modern and recommended way to write object-oriented code over the older prototype-based approach.
⬅ Previous Topic
Enhanced Object Literals in JavaScript - ES6 FeaturesNext Topic ⮕
JavaScript Modules - import & exportYou can support this website with a contribution of your choice.
When making a contribution, mention your name, and programguru.org in the message. Your name shall be displayed in the sponsors list.