JavaScript: Objects, Prototypes and Object-Oriented Programming

Objects

What is an object?

An object is a collection of properties, and a property is an association between a name (or key) and a value.

In JavaScript, almost everything is an object.
At its core, an object is a standalone collection of related data and/or functionality, consisting of key-value pairs (known as properties and methods).

Anatomy of an object

An object literal is wrapped in curly braces ({}) and contains comma-separated key-value pairs:

const user = {
  // Properties (Data)
  firstName: "Jane",
  lastName: "Doe",
  age: 28,
  isSubscriber: true,

  // Method (Function attached to an object)
  getFullName: function() {
    return `${this.firstName} ${this.lastName}`;
  }
};

Keys are stored as strings (or symbols).
Values can be any data type (e.g., strings, numbers, booleans, arrays, functions, or even other nested objects.)
The this keyword refers to the current object context, allowing methods to access the object's properties.

Accessing and modifying properties of an object

There are two different syntaxes for accessing the properties of an object:

The dot notation (`.`):

console.log(user.firstName); // "Jane"
user.age = 29; // Modifying a property

The bracket notation (`[...]`):

console.log(user["lastName"]); // "Doe"
const propertyKey = "isSubscriber";
console.log(user[propertyKey]); // true

Allows dynamic keys, spaces, or special characters via strings or variables.

Creating objects

Other than object literals ({}), in JavaScript there are various different ways to instantiate objects:

Prototypes and inheritance

What is a prototype?

Prototypes are the mechanism by which JavaScript objects inherit features from one another.

'Prototypes' - MDN

JavaScript is a prototype-based language.
This means that JavaScript handles inheritance differently from classic object-oriented languages like Java, C++ or Python.
Instead of inheriting from "classes" that act as rigid blueprints, JavaScript objects inherit directly from other objects.
Every object in JavaScript has a hidden internal property (historically referred to as [[prototype]] or accessed via __proto__) that links to another object called its prototype.

The prototype chain

JavaScript implements inheritance by using objects. Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype and acts as the final link in this prototype chain.

'Inheritance and the prototype chain' - MDN

When you try to access a property or method on an object:

JavaScript will first check the object itself for that property/method. If it is there, it will use it.
If not, it looks up the prototype link to the other object's prototype (__proto__).
If it is not there again, it will check that objects prototype, continually moving up the chain until it reaches Object.prototype whose prototype is null.

Code example:

// 1. Define a constructor function
function Animal(name) {
  this.name = name;
}

// 2. Add a method to the prototype so all instances share it
Animal.prototype.speak = function() {
  return `${this.name} makes a noise.`;
};

// 3. Create an instance
const dog = new Animal('Rex');

// dog itself has 'name', but not 'speak'
console.log(dog.hasOwnProperty('name'));  // true
console.log(dog.hasOwnProperty('speak')); // false

// Yet, dog can call speak() via the prototype chain
console.log(dog.speak()); // "Rex makes a noise."

Object-Oriented JavaScript

Prototypes vs ES6 classes

When the class syntax was introduced in ES6, it didn't add a traditional class-based inheritance model (as seen in other programming languages like Java, C++, Python, etc).
Instead, the class keyword is just syntactic sugar built on top of JavaScript's existing prototype-based system.

// Modern class syntax...
class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a noise.`;
  }
}

// ...does the exact same thing as the earlier prototype example

The `extends` keyword

The extends keyword is used in class declarations or class expressions to create a child class that inherits all the properties and methods of the parent class.
It sets up the prototype chain so that instances of the child class have access to the parent class’s methods.

Example:

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

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

// Dog inherits from Animal using 'extends'
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const myDog = new Dog("Rex");
myDog.speak(); // Output: Rex makes a sound. (Inherited from Animal)
myDog.bark();  // Output: Rex barks! (Defined on Dog)

The `super` keyword

The super keyword serves two purposes depending on where it is being used:

When it is used in a constructor (calling the parent constructor)

When a child class defines its own constructor, it must call super before it can use the this keyword.
JavaScript requires the parent class to initialise its own inherited properties first. Passing arguments into super(...) forwards them to the parent class’s constructor.

Getters and Setters

JavaScript getters and setters are special methods used to access and update object properties. They provide a controlled way to read and modify values.

'JavaScript Getters and Setters' - GeeksforGeeks

Instead of directly interacting with a raw variable, getters and setters let you intercept the read (getting) and write (setting) operations.
They use the get and set keywords.

Why use them?

Data Validation: You can ensure that assigned values meet certain conditions (e.g., a user's age cannot be negative).
Computed Properties: You can dynamically calculate a value on the fly whenever it's requested rather than storing it statically.
Encapsulation: You can hide internal implementation details while presenting a clean property interface to the outside code.

Example - Validation:

const user = {
  name: "Alice",
  _age: 25, // Convention: underscore indicates an internal/private-like property

  // Getter: runs when you read user.age
  get age() {
    return this._age;
  },

  // Setter: runs when you assign a value like user.age = 30
  set age(value) {
    if (value < 0) {
      console.log("Age cannot be negative!");
      return;
    }
    this._age = value;
  }
};

// Accessing the getter (notice it looks like a normal property, not a function call)
console.log(user.age); // 25

// Trying to set a valid age
user.age = 30;
console.log(user.age); // 30

// Trying to set an invalid age
user.age = -5; // Logs: "Age cannot be negative!"
console.log(user.age); // Stays 30

Example - Computed Properties:

const rectangle = {
  width: 10,
  height: 5,

  // Computed getter for area
  get area() {
    return this.width * this.height;
  }
};

console.log(rectangle.area); // 50

// If dimensions change, the area updates automatically
rectangle.width = 20;
console.log(rectangle.area); // 100

Example - Getters and Setters with classes:

class Temperature {
  constructor(celsius) {
    this._celsius = celsius;
  }

  get celsius() {
    return this._celsius;
  }

  set celsius(value) {
    this._celsius = value;
  }

  // Getter for Fahrenheit computed from Celsius
  get fahrenheit() {
    return (this._celsius * 9/5) + 32;
  }

  set fahrenheit(value) {
    this._celsius = (value - 32) * 5/9;
  }
}

const temp = new Temperature(25);
console.log(temp.fahrenheit); // 77

temp.fahrenheit = 212;
console.log(temp.celsius);    // 100

Encapsulation and private fields

Encapsulation is the packing of data and functions into one component (for example, a class) and then controlling access to that component to make a "blackbox" out of the object. Because of this, a user of that class only needs to know its interface (that is, the data and functions exposed outside the class), not the hidden implementation.

'Encapsulation' - MDN

To put it simply, encapsulation is about bundling data and the methods that operate on that data within a single unit (an object) and restricting direct access to some of the objects internal components.

Encapsulation gives you:

Data Protection: Prevents external code from accidentally breaking an objects internal logic.
Controlled Access: Enforces validation rules (e.g., ensuring an age cannot be a negative number) via methods or getters/setters.
Abstraction: Exposes only what other developers need to use

Encapsulation pre-ES2022

Before native private fields were introduced, JavaScript developers relied on conventions and closures to hide data.

The underscore convention (`_`)

Developers would use the _ convention to indicate not to use particular properties.

Example:

class User {
  constructor(name, password) {
    this.name = name;
    this._password = password; // Convention: "Please don't touch this"
  }
}

const user = new User("Alice", "secret123");
console.log(user._password); // "secret123" — It is not actually private!

The issue was that the field was not actually hidden. Nothing was actually preventing external code from reading or altering the property.

Closures and factory functions

To truly hide fields, developers would use function scopes and closures.

Example:

function createUser(name, password) {
  let _password = password; // Local variable, hidden from the outside

  return {
    name,
    getPassword() {
      return _password; // Accessible only through this closure
    }
  };
}

const user = createUser("Alice", "secret123");
console.log(user._password); // undefined
console.log(user.getPassword()); // "secret123"

The issue with this pattern is that every instance duplicates the methods in memory, which can be inefficient for large applications compared to prototype methods.

Native private fields

JavaScript introduced a native syntax for private fields, methods and static members using the hash (#) prefix.

Private elements get created by using a hash # prefix and cannot be legally referenced outside of the class.

The privacy encapsulation of these class elements is enforced by JavaScript itself.

The only way to access a private element is via dot notation, and you can only do so within the class that defines the private element.

'Private Elements' - MDN

Example:

class BankAccount {
  #balance; // Declare private field at the class level

  constructor(owner, initialBalance) {
    this.owner = owner;
    this.#balance = initialBalance;
  }

  deposit(amount) {
    if (amount > 0) {
      this.#balance += amount;
    }
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount("Alice", 1000);
account.deposit(500);
console.log(account.getBalance()); // 1500

// Trying to access #balance directly throws a SyntaxError!
// console.log(account.#balance);

Rules of private fields:

Declaration is mandatory: Private fields must be declared at the top of the class body (e.g., #balance;). You cannot dynamically create them inside methods or constructor arguments without declaring them first.
Strict runtime enforcement: Attempting to access or modify a private field outside of the class body results in a syntax error.
Private methods and static fields: You can also make methods and static properties private.

Example:

class Database {
  static #connectionLimit = 10; // Private static field

  #validateQuery(query) { // Private method
    return query.length > 0;
  }

  executeQuery(query) {
    if (this.#validateQuery(query)) {
      return "Executing...";
    }
  }
}

One of the most famous architectural debates in software engineering is inheritance vs composition. While JavaScript historically leaned into prototypal delegation that looked like classical inheritance (especially with the introduction of ES6 class syntax), modern JavaScript development heavily favours composition.

"Is-A" vs "Has-A" or "Can-Do"

To understand the core difference between inheritance and composition we can look at how each model answers the question of relationship:
Inheritance ("Is-A"): A subclass is a specialised version of a superclass.
- Example: A Dog is an Animal. A Manager is an Employee.
Composition ("Has-A" or "Can-Do"): An object is built by combining independent, modular pieces of behaviour or smaller objects.
- Example: A Robot has a battery, has a navigationSystem, and can walk. It doesn't inherit from a generic Machine tree - it is assembled from parts.

The problem with classic inheritance

Inheritance feels intuitive at first because it easily maps on to real world taxonomies. However, as applications grow, deep inheritance hierarchies begin to cause severe maintenance issues.

Issues with deep inheritance:

Tight coupling: Subclasses are deeply bound to their parent classes. Changing a method deep in the superclass can inadvertently break dozens of subclasses.
The Fragile Base Class Problem: If a base class is modified by adding a new method or property, it can clash with existing subclass methods or introduce unexpected behaviors.
Inflexible Taxonomies (The "Flying Dog" Dilemma): Imagine you start with a class hierarchy: Animal → Bird (adds fly()) and Animal → Dog (adds bark()). What happens when you need to create a RobotDog that can walk and talk, or a FlyingSquirrel that can glide, or a SuperHero that inherits traits from both human and ? Inheritance forces you into rigid, single-parent hierarchies that cannot easily accommodate cross-cutting behaviours.

Object composition

Composition in JavaScript is an object-oriented programming concept in which one object is built using other objects as its parts. It represents a strong “has-a” relationship, where the contained objects are closely tied to the lifecycle of the parent object.

'Composition in JavaScript' - GeeksforGeeks

Instead of asking "What is this object?", composition asks "What does this object do?" or "What parts make up this object?".

In JavaScript, because objects are dynamic collections of key-value pairs, you can easily assemble objects by mixing and matching independent functions.

Factory functions and object spreading

Instead of class and extends, you can use plain functions that return objects, combining behaviours using the spread operator (...).

// 1. Define independent behavior functions (traits/mixins)
const canFly = (state) => ({
  fly: () => console.log(`${state.name} is flying!`)
});

const canSwim = (state) => ({
  swim: () => console.log(`${state.name} is swimming!`)
});

const canBark = (state) => ({
  bark: () => console.log(`${state.name} says Woof!`)
});

// 2. Compose them into specific creator functions
function createFlyingDog(name) {
  let state = { name };
  
  return {
    ...state,
    ...canFly(state),
    ...canBark(state)
  };
}

// 3. Usage
const mutantDog = createFlyingDog("Bolt");
mutantDog.bark(); // Bolt says Woof!
mutantDog.fly();  // Bolt is flying!

Functional mixins

You can create functional mixins - functions that take an object, argument it with new methods and return it.

const withFlying = (target) => {
  target.fly = function() {
    console.log(`${this.name} is soaring through the clouds.`);
  };
  return target;
};

const withCombat = (target) => {
  target.attack = function() {
    console.log(`${this.name} attacks with power!`);
  };
  return target;
};

// Creating a character using composition
const warrior = withCombat({ name: "Arthur" });
warrior.attack(); // Arthur attacks with power!

Summary table: inheritance vs composition

Inheritance should be used sparingly when you have a genuine, shallow "Is-A" relationship.
For almost everything else, you should be using composition with factory functions or mixins.

Object Literal	`const obj = { name: "Test" };`	Quick, one-off collections of data.
`new Object()`	`const obj = new Object(); obj.name = "Test";`	Rarely used explicitly; mostly historical.
Constructor Functions	`function Car(make) { this.make = make; }`	Pre-ES6 blueprinting for multiple instances.
Classes (ES6+)	`class Car { constructor(make) { this.make = make; } }`	Modern, clean blueprinting using OOP syntax.
`Object.create()`	`const obj = Object.create(proto);`	Direct prototype inheritance setup.

Relationship	"Is-A" (Hierarchical)	"Has-A" or "Can-Do" (Flat)
Flexibility	Rigid; hard to change parent structure later.	High; mix and match behaviors dynamically.
Reusability	Limited to single-parent inheritance chains in JS.	Infinite; combine any number of behaviors.
Maintenance	Prone to the fragile base class problem.	Isolated; changing a trait only affects objects using it.
JavaScript Idiom	Syntactic sugar over prototypes.	Native alignment with JS's dynamic object model.

JavaScript: Objects, Prototypes and Object-Oriented Programming

JavaScript: Mastering the Event Loop, Callbacks and Asynchronous Code

JavaScript: Demystifying Execution Context, the Call Stack and the 'this' Keyword

JavaScript: Understanding Variables and Scope

What Is the Document Object Model in Web Applications?

Next.js: What Is Hydration?

Objects

What is an object?

Anatomy of an object

Accessing and modifying properties of an object

The dot notation (`.`):

The bracket notation (`[...]`):

Creating objects

Prototypes and inheritance

What is a prototype?

The prototype chain

Code example:

Object-Oriented JavaScript

Prototypes vs ES6 classes

The `extends` keyword

The `super` keyword

When it is used in a constructor (calling the parent constructor)

Getters and Setters

Why use them?

Encapsulation and private fields

Encapsulation pre-ES2022

The underscore convention (`_`)

Closures and factory functions

Native private fields

Rules of private fields:

Inheritance vs Composition

"Is-A" vs "Has-A" or "Can-Do"

The problem with classic inheritance

Object composition

Factory functions and object spreading

Functional mixins

Summary table: inheritance vs composition

Stay in the loop

Comments (0)

JavaScript: Mastering the Event Loop, Callbacks and Asynchronous Code

JavaScript: Demystifying Execution Context, the Call Stack and the 'this' Keyword

JavaScript: Understanding Variables and Scope

What Is the Document Object Model in Web Applications?

Next.js: What Is Hydration?

What is an object?

Prototypes vs ES6 classes

The extends keyword

The super keyword

Encapsulation pre-ES2022

Native private fields

Functional mixins

Stay in the loop

Comments (0)

The `extends` keyword

The `super` keyword