Codexpal - Learn Programming Interactively

Lesson Content

ES6 Classes and Object-Oriented Programming

Classes provide a cleaner syntax for creating objects and implementing inheritance. They're syntactic sugar over JavaScript's prototype-based inheritance.

Class Declaration

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    return `Hello, I'm ${this.name}`;
  }
}

const person = new Person('John', 30);
console.log(person.greet());

Class Methods

class Calculator {
  add(a, b) {
    return a + b;
  }
  
  subtract(a, b) {
    return a - b;
  }
  
  // Static method (called on class, not instance)
  static multiply(a, b) {
    return a * b;
  }
}

Inheritance

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

class Dog extends Animal {
  speak() {
    return `${this.name} barks`;
  }
}

const dog = new Dog('Buddy');
console.log(dog.speak()); // 'Buddy barks'

Getters and Setters

class Rectangle {
  constructor(width, height) {
    this._width = width;
    this._height = height;
  }
  
  get area() {
    return this._width * this._height;
  }
  
  set width(value) {
    if (value > 0) {
      this._width = value;
    }
  }
}

Private Fields (ES2022)

class BankAccount {
  #balance = 0; // Private field
  
  deposit(amount) {
    this.#balance += amount;
  }
  
  getBalance() {
    return this.#balance;
  }
}

Example Code

Create and use classes for object-oriented programming

// Base class
class Vehicle {
  constructor(brand, year) {
    this.brand = brand;
    this.year = year;
  }
  
  getInfo() {
    return `${this.year} ${this.brand}`;
  }
  
  start() {
    return 'Vehicle started';
  }
}

// Derived class
class Car extends Vehicle {
  constructor(brand, year, doors) {
    super(brand, year); // Call parent constructor
    this.doors = doors;
  }
  
  start() {
    return `${this.brand} car started with ${this.doors} doors`;
  }
  
  getInfo() {
    return `${super.getInfo()} with ${this.doors} doors`;
  }
}

// Using classes
const vehicle = new Vehicle('Toyota', 2020);
console.log(vehicle.getInfo());
console.log(vehicle.start());

const car = new Car('Honda', 2023, 4);
console.log(car.getInfo());
console.log(car.start());

// Class with getter and setter
class Circle {
  constructor(radius) {
    this._radius = radius;
  }
  
  get area() {
    return Math.PI * this._radius ** 2;
  }
  
  get radius() {
    return this._radius;
  }
  
  set radius(value) {
    if (value > 0) {
      this._radius = value;
    }
  }
}

const circle = new Circle(5);
console.log('Area:', circle.area);
circle.radius = 10;
console.log('New area:', circle.area);

Expected Output:

2020 Toyota
Vehicle started
2023 Honda with 4 doors
Honda car started with 4 doors
Area: 78.53981633974483
New area: 314.1592653589793

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code