← Previous Next →

Object-Oriented JavaScript

Object-Oriented Programming (OOP) in JavaScript is a paradigm that organizes code using objects, which bundle data and behavior together. JavaScript supports OOP through prototypes and the modern class syntax.

Illustration of object_oriented_javascript
Illustration of object_oriented_javascript

💡 Core Concepts

  • Objects: Collections of properties and methods.
  • Classes: Blueprints for creating objects.
  • Inheritance: Objects or classes can inherit features from others.
  • Encapsulation: Hiding internal details and exposing only what is necessary.

Creating Objects

Objects can be created in multiple ways. The simplest is using object literals:

📌 Deep Dive: Object Literal

JAVASCRIPT
const person = {
  name: 'Alice',
  greet() {
    return `Hello, my name is ${this.name}`;
  }
};

person.greet(); // "Hello, my name is Alice"
Output
Hello, my name is Alice

Using Constructor Functions

Before class syntax, constructor functions were used to create multiple similar objects:

📌 Deep Dive: Constructor Function

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

const bob = new Person('Bob');
bob.greet(); // "Hi, I'm Bob"
Output
Hi, I'm Bob

ES6 Classes

Classes provide a cleaner syntax to create objects and handle inheritance:

📌 Deep Dive: Class Syntax

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

const jane = new Person('Jane');
jane.greet(); // "Hello, I'm Jane"
Output
Hello, I'm Jane

Inheritance with Classes

Use extends to create a subclass and super() to call the parent class constructor:

📌 Deep Dive: Class Inheritance

JAVASCRIPT
class Employee extends Person {
  constructor(name, position) {
    super(name);
    this.position = position;
  }
  describe() {
    return `${this.name} works as a ${this.position}`;
  }
}

const emp = new Employee('Mark', 'Developer');
emp.greet();    // "Hello, I'm Mark"
emp.describe(); // "Mark works as a Developer"
Output
Hello, I'm Mark
Mark works as a Developer

Encapsulation with Private Fields

Use the # prefix to declare private fields accessible only within the class:

📌 Deep Dive: Private Fields

JAVASCRIPT
class Counter {
  #count = 0;
  increment() {
    this.#count++;
  }
  getCount() {
    return this.#count;
  }
}

const c = new Counter();
c.increment();
c.getCount();    // 1
// c.#count; // SyntaxError: Private field '#count' must be declared in an enclosing class
Output
1

💡 Summary

  • Objects combine data and functions as properties and methods.
  • Constructor functions and ES6 classes create reusable blueprints.
  • Inheritance allows new classes to extend existing ones.
  • Private fields encapsulate internal state for better modularity.

⚠️ Remember

JavaScript’s prototype-based inheritance differs from classical OOP languages. Understanding prototypes helps grasp how inheritance and method lookup work under the hood.

Constructor Functions vs ES6 Classes
Constructor FunctionsES6 Classes
Function-based with prototype methodsClass syntax with methods inside class body
Explicit prototype assignmentInheritance with extends and super()
More verbose and older styleCleaner, modern syntax
Can be less intuitive for beginnersCloser to classical OOP syntax
← Previous Next →