Part 4: Object-Oriented JS — Prototypes, Classes, and the Blueprint Pattern

Welcome to Part 4 of the Mastery Series. In Part 3, we mastered the "Brain" (Functions). Now, we are learning how to build Blueprints.

Object-Oriented Programming (OOP) in JavaScript is famous for being "different." That’s because, unlike Java or C++, JavaScript doesn't have traditional classes. It has Prototypes. Even the modern class syntax is just a beautiful mask over this prototypal reality. Today, we’ll tear off that mask and master how JS creates and inherits objects.

Topic 15: Modern Object Literals & Shorthands

Before we dive into blueprints, let's master the modern way to write objects. ES6 made objects much cleaner to write.

1. Property & Method Shorthand

If your variable name matches your property name, you don't need to type it twice.

plaintext

const name = "Barcky";
const age = 25; // Shorthand
const user = {
  name, 
  age,
  sayHi() { // No more 'function' keyword needed for methods!
    console.log("Hi!");
  }
};

2. Computed Property Names

You can use an expression (like a variable or an official ID) as an object key by wrapping it in [].

plaintext

const key = "status";
const user = {
  [key]: "active" // Result: { status: "active" }
};

Topic 16: Prototypes & Inheritance (The Magic)

This is the most important concept in JS OOP. Every object has a hidden property called [[Prototype]] (visible as __proto__). If you look for a property on an object and it's not there, JS looks at its prototype. And then its prototype's prototype. This is the Prototype Chain.

1. Prototype Inheritance

plaintext

const animal = {
  eat: true,
  walk() { console.log("Walking..."); }
}; const dog = {
  bark: true,
  __proto__: animal // Dog inherits from Animal
}; dog.walk(); // "Walking..." (Inherited from animal!)

2. The `new` Keyword & Constructor Functions

Before ES6, we used functions to create objects. The new keyword does 4 things:

Creates a blank object {}.
Sets the prototype to the constructor's .prototype.
Binds this to the new object.
Returns the object.

Topic 17: ES6 Classes (Syntactic Sugar)

Classes were introduced to make inheritance easier to read for developers coming from other languages. Crucially: Under the hood, it is still Prototypal Inheritance.

1. Basic Class Structure

plaintext

class Person {
  constructor(name) {
    this.name = name; // Stored on the INSTANCE
  }   greet() {
    console.log(`Hi, I'm ${this.name}`); // Stored on the PROTOTYPE
  }
} const me = new Person("Abdul");

2. Inheritance with `extends` and `super`

plaintext

class Developer extends Person {
  constructor(name, language) {
    super(name); // Must call parent constructor first!
    this.language = language;
  }
}

Topic 18: Static Methods & Private Fields

Modern JavaScript (ES2022+) added powerful features to classes that make them even more robust.

1. Static Methods

These belong to the Class itself, not the object you create from it. Think of them as "Helper functions."

plaintext

class MathTool {
  static add(a, b) { return a + b; }
}
MathTool.add(2, 2); // 4
// const tool = new MathTool(); tool.add(); // ❌ ERROR

2. Private Fields (`#`)

Finally, we have true privacy! Variables starting with # cannot be accessed or changed from outside the class.

JavaScript Object-Oriented JS: Prototypes, Classes, and the Blueprint Pattern

Analyze this Post?

Part 4 of 10

Part 4: Object-Oriented JS — Prototypes, Classes, and the Blueprint Pattern

Topic 15: Modern Object Literals & Shorthands

1. Property & Method Shorthand

2. Computed Property Names

Topic 16: Prototypes & Inheritance (The Magic)

1. Prototype Inheritance

2. The `new` Keyword & Constructor Functions

Topic 17: ES6 Classes (Syntactic Sugar)

1. Basic Class Structure

2. Inheritance with `extends` and `super`

Topic 18: Static Methods & Private Fields

1. Static Methods

2. Private Fields (`#`)

Drop Your Impression

Join the Conversation

🔧 Topic 4 Mastery: Mini Interview Q&A

🔗 Further Reading & Deep Dive

JavaScript Object-Oriented JS: Prototypes, Classes, and the Blueprint Pattern

Analyze this Post?

Part 4 of 10

Part 4: Object-Oriented JS — Prototypes, Classes, and the Blueprint Pattern

Topic 15: Modern Object Literals & Shorthands

1. Property & Method Shorthand

2. Computed Property Names

Topic 16: Prototypes & Inheritance (The Magic)

1. Prototype Inheritance

2. The new Keyword & Constructor Functions

Topic 17: ES6 Classes (Syntactic Sugar)

1. Basic Class Structure

2. Inheritance with extends and super

Topic 18: Static Methods & Private Fields

1. Static Methods

2. Private Fields (#)

Drop Your Impression

Join the Conversation

🔧 Topic 4 Mastery: Mini Interview Q&A

🔗 Further Reading & Deep Dive

2. The `new` Keyword & Constructor Functions

2. Inheritance with `extends` and `super`

2. Private Fields (`#`)