Object-Oriented JavaScript (OOP in JS)

Mastering Object-Oriented Programming in JavaScript

Object-Oriented Programming (OOP) is a powerful programming paradigm that focuses on organizing code into reusable and logical components called objects. JavaScript, while not classically object-oriented like Java or C++, supports OOP through prototypes and more recently through classes (ES6+ syntax).

This module will guide you through OOP in JavaScript — from prototypes to ES6 classes — and help you understand concepts like inheritance, encapsulation, and polymorphism.

---

Table of Contents

1. What is Object-Oriented Programming?
2. JavaScript’s Prototype-Based Inheritance
3. Constructor Functions
4. The prototype Property
5. ES6 Classes
6. Inheritance with Classes
7. Getters and Setters
8. Static Methods
9. Encapsulation and Private Fields
10. Conclusion

---

1. What is Object-Oriented Programming?

OOP is a paradigm where you model code using real-world objects. Objects have:

• Properties (data/state)
• Methods (behavior)

Core OOP principles:

• Encapsulation: Wrapping data and behavior in a single unit (object).
• Inheritance: Creating new objects from existing ones.
• Polymorphism: Ability to call the same method on different objects.
• Abstraction: Hiding complexity behind simple interfaces.

---

2. JavaScript’s Prototype-Based Inheritance

JavaScript uses prototypes instead of classical inheritance. Every object in JS has an internal [[Prototype]], which links to another object. This is how inheritance works.

const person = {
  greet: function() {
    console.log("Hello");
  }
};

const student = Object.create(person);
student.study = function() {
  console.log("Studying...");
};

student.greet();  // Inherited from person
student.study();  // Own method

---

3. Constructor Functions

Before ES6 classes, JavaScript used constructor functions to create objects:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(`Hi, I'm ${this.name}`);
};

const john = new Person("John", 30);
john.greet(); // Hi, I'm John

Here, Person is a constructor, and .greet is shared via the prototype.

---

4. The prototype Property

Every function in JS has a .prototype object that allows you to attach shared methods:

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound`);
};

All instances of Animal share the same .speak() method — this is efficient and avoids duplicating functions.

---

5. ES6 Classes

ES6 introduced the class keyword to make OOP more readable and similar to traditional languages.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

const alice = new Person("Alice", 25);
alice.greet(); // Hi, I'm Alice

Under the hood, JavaScript classes still use prototypes — class is syntactic sugar over prototype-based inheritance.

---

6. Inheritance with Classes

Classes support extends for inheritance:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

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

const dog = new Dog("Buddy");
dog.speak(); // Buddy barks

The Dog class inherits from Animal and overrides the speak method.

---

7. Getters and Setters

Getters and setters let you define methods that behave like properties:

class Circle {
  constructor(radius) {
    this._radius = radius;
  }

  get area() {
    return Math.PI * this._radius ** 2;
  }

  set radius(value) {
    if (value > 0) this._radius = value;
  }
}

const c = new Circle(10);
console.log(c.area); // 314.159...

---

8. Static Methods

static methods belong to the class, not to instances:

class MathUtil {
  static add(x, y) {
    return x + y;
  }
}

console.log(MathUtil.add(5, 3)); // 8

Useful for utility methods that don’t rely on instance data.

---

9. Encapsulation and Private Fields

Modern JavaScript supports private fields using the # syntax:

class Counter {
  #count = 0;

  increment() {
    this.#count++;
  }

  get value() {
    return this.#count;
  }
}

const counter = new Counter();
counter.increment();
console.log(counter.value); // 1
// console.log(counter.#count); ❌ SyntaxError

Encapsulation hides internal implementation details and protects state.

---

10. Conclusion

Object-Oriented JavaScript enables you to write cleaner, modular, and more scalable code. With both prototype-based and class-based styles, JavaScript provides flexibility in how you design your applications.

You now know how to:

• Use constructor functions and prototypes
• Create ES6 classes and extend them
• Apply OOP principles like encapsulation and inheritance
• Use private fields, static methods, and getters/setters

In the next module, we’ll return to the browser and explore the DOM (Document Object Model) in depth.