Class

Level 7 — Objects & Prototypes ES6 syntactic sugar over constructor functions and prototypal inheritance.

1. Prerequisites

• Constructor Function — The older, underlying logic Classes replace.
• Prototypal Inheritance — How Classes secretly share data.

2. Term Category

Language Core (Introduced in ES6) (Universal): Class is a fundamental concept in this technology stack. Level 7 — Objects & Prototypes

3. Explanation

(1) Design Motivation — "Why did we design this?"

Before ES6 (2015), creating objects and setting up inheritance using traditional Constructor Functions and manually linking Object.create(Prototype) was messy, confusing, and completely alien to developers coming from other languages like Java, C#, or Python.

To make JavaScript more approachable and to clean up the code, the TC39 committee introduced the class keyword. However, they did not change the underlying engine. JavaScript is still inherently Prototypal! The class syntax is simply "syntactic sugar" — a beautiful wrapper that secretly compiles down to the exact same Constructor Functions and Prototype links developers used to write by hand.

(2) Reality Metaphor

Imagine a baker who manually mixes flour, water, and yeast every single day to bake a loaf of bread. It's messy and takes a lot of manual steps. The class keyword is like buying an automated Bread Maker machine. You press one button, and it makes the bread for you. The machine didn't invent a new type of bread; it is still secretly mixing flour, water, and yeast inside the box. It just hides the messy details from you.

(3) JavaScript Code Examples

Short Snippet

class User {
  // The 'constructor' method replaces the old Constructor Function
  constructor(name) {
    this.name = name;
  }

  // Any methods written here are secretly placed on User.prototype!
  greet() {
    console.log(`Hello, I am ${this.name}`);
  }
}

// You MUST use the 'new' keyword to instantiate a class!
const alice = new User("Alice");
alice.greet(); // "Hello, I am Alice"

Fuller Example: Getters and Setters

class BankAccount {
  constructor(owner, balance) {
    this.owner = owner;
    this._balance = balance; // The underscore is a convention for "private"
  }

  // A Getter allows you to access a method as if it were a property
  get balance() {
    console.log("Checking balance...");
    return `$${this._balance}`;
  }

  // A Setter allows you to run logic when someone tries to assign a value
  set deposit(amount) {
    if (amount <= 0) {
      console.log("Deposit must be positive!");
      return;
    }
    this._balance += amount;
  }
}

const myAccount = new BankAccount("Bob", 100);

// We don't use () for getters!
console.log(myAccount.balance); 

// We use = for setters!
myAccount.deposit = 50; 

4. Common Mistakes & Pitfalls

Mistake 1: Misunderstanding Class Scope and Variable Hoisting

The mistake: Assuming variables or functions declared within Class blocks behave identically regardless of var, let, or const keyword usage.

Why it's wrong: var declarations are function-scoped and hoisted with an initial value of undefined. let and const are block-scoped and enter a Temporal Dead Zone (TDZ) before declaration, throwing a ReferenceError if accessed prematurely.

Incorrect:

console.log(value); // ❌ Throws ReferenceError due to Temporal Dead Zone!
let value = "class";

Fix:

let value = "class";
console.log(value); // Correct: Variable initialized prior to reading

Mistake 2: Losing Context Binding (this) in Class Callbacks

The mistake: Passing methods from Class instances as standalone callbacks to timers or event listeners without explicitly binding this.

Why it's wrong: Extracting object methods disassociates them from their target parent instance, causing this to resolve to undefined (in strict mode) or window/globalThis at runtime.

Incorrect:

const obj = {
    name: "class",
    log() { console.log(this.name); }
};
setTimeout(obj.log, 100); // ❌ Output: undefined (loses object context)

Fix:

const obj = {
    name: "class",
    log() { console.log(this.name); }
};
setTimeout(() => obj.log(), 100); // Correct: Arrow function captures lexical context

Mistake 3: Unhandled Asynchronous Failures in Class Operations

The mistake: Executing asynchronous operations within Class without wrapping await calls in try...catch blocks or chaining .catch().

Why it's wrong: Unhandled promise rejections trigger UnhandledPromiseRejectionWarning in Node.js or unhandled rejection errors in modern browsers, leaving application state in corrupted or uncoordinated states.

Incorrect:

async function processData() {
    const res = await fetch("/api/class"); // ❌ Unhandled network failure crashes execution flow
    const data = await res.json();
    return data;
}

Fix:

async function processData() {
    try {
        const res = await fetch("/api/class");
        if (!res.ok) throw new Error(`HTTP Error: ${res.status}`);
        return await res.json();
    } catch (err) {
        console.error(`Caught error in class: ${err.message}`);
        return null;
    }
}

5. Practice Exercises

Exercise 1: Encapsulated User Domain Model Class

Scenario: A domain architecture package defines a User class with a constructor, getter methods, and instance methods for updating user profiles.

Requirements:

1. Define class User with constructor(id, name, email).
2. Implement getProfile() method.
3. Implement updateEmail(newEmail) method.
4. Return formatted profile.

class User {
  constructor(id, name, email) {
    this.id = id;
    this.name = name;
    this.email = email;
  }

  getProfile() {
    return `${this.name} <${this.email}>`;
  }

  updateEmail(newEmail) {
    if (typeof newEmail === "string" && newEmail.includes("@")) {
      this.email = newEmail;
    }
  }
}

// Verification tests
const u = new User(1, "Alice", "alice@old.com");
console.assert(u.getProfile() === "Alice <alice@old.com>", "Test 1 Failed");
u.updateEmail("alice@new.com");
console.assert(u.email === "alice@new.com", "Test 2 Failed");

Exercise 2: Class Advanced Context Handler

Scenario: A web application component processes class data operations within enterprise workflows.

Requirements:

1. Write handleClassSecondary(target, options).
2. Validate target input.
3. Apply domain updates.
4. Return boolean status.

function handleClassSecondary(target, options) {
  if (!target) return false;
  const opts = options || {};
  target.status = opts.status || "VERIFIED";
  return true;
}

// Verification tests
const mockTarget = {};
console.assert(handleClassSecondary(mockTarget, { status: "VERIFIED" }) === true, "Test 1 Failed");
console.assert(mockTarget.status === "VERIFIED", "Test 2 Failed");

Exercise 3: Class Performance Optimization

Scenario: An application utility optimizes class execution to prevent performance bottlenecks.

Requirements:

1. Write optimizeClassTertiary(collection).
2. Validate collection input.
3. Filter invalid items.
4. Return clean collection.

function optimizeClassTertiary(collection) {
  if (!Array.isArray(collection)) return [];
  return collection.filter(item => item !== null && item !== undefined);
}

// Verification tests
const list = [10, null, 20, undefined, 30];
const clean = optimizeClassTertiary(list);
console.assert(clean.join(",") === "10,20,30", "Test 1 Failed");

6. Related Terms

• extends — Used to create child classes.
• super — Used inside child classes to call the parent.
• Constructor Function — Related concept: Constructor Function.
• Getters & Setters — Related concept: Getters & Setters.
• instanceof — Related concept: instanceof.
• new Keyword — Related concept: new Keyword.
• Design Patterns (Module, Singleton, Observer, Factory) — Related concept: Design Patterns (Module, Singleton, Observer, Factory).
• Prototype — Related concept: Prototype.

7. Key Takeaways

• class is a modern, clean syntax for creating objects and setting up inheritance.
• It is "syntactic sugar" over JavaScript's existing Prototypal Inheritance model.
• You must always use the new keyword to create an instance of a class.
• The constructor() method is run automatically when the class is instantiated.
• Methods written inside the class block are automatically placed on the Prototype.