SESSION 037 — Classes — BREAK && BUILD

CONCEPTS.UNLOCKED

🏗

Classes

class Filter { constructor() {...} apply() {...} } — blueprints for creating objects with shared structure and behavior. Define once, instantiate many times.

🔨

constructor, this, Methods

constructor() initializes the object. this refers to the instance. Methods are functions defined inside the class that operate on the instance's data.

🧬

Inheritance: extends

class BrightnessFilter extends Filter — inherits all properties and methods from Filter. Override only what's different. Shared behavior written once.

📞

super()

Calling the parent constructor: super('Brightness', -100, 100, 0). The child class passes arguments up to the parent's constructor. Must be called before using this.

⚠

Abstract Methods

The base class throws: throw new Error('apply() not implemented'). Forces every subclass to implement its own version. Forget to implement → clear error message.

⚖

Classes vs Functions

Classes for things with shared structure + state + behavior. Plain functions for stateless transformations. Not everything needs a class — practical guidelines matter.

HANDS-ON.TASKS

Create the Filter Base Class

▶

class Filter {
  constructor(name, min, max, defaultValue = 0) {
    this.name = name;
    this.min = min;
    this.max = max;
    this.defaultValue = defaultValue;
    this.value = defaultValue;
    this.active = false;
  }

  apply(r, g, b) {
    throw new Error(
      `${this.name}: apply() not implemented`
    );
  }

  reset() {
    this.value = this.defaultValue;
    this.active = false;
  }
}

The base class defines the shared structure: every filter has a name, range, value, and can be reset. The apply() method throws — each subclass MUST override it with its own math.

Create Specific Filters

▶

class BrightnessFilter extends Filter {
  constructor() {
    super('Brightness', -100, 100, 0);
  }

  apply(r, g, b) {
    return [
      r + this.value,
      g + this.value,
      b + this.value
    ];
  }
}

class GrayscaleFilter extends Filter {
  constructor() {
    super('Grayscale', 0, 1, 0);
  }

  apply(r, g, b) {
    if (!this.active) return [r, g, b];
    const avg = (r + g + b) / 3;
    return [avg, avg, avg];
  }
}

Each filter is ~10 lines: constructor calls super() with its specific config, and apply() implements its unique math. All shared logic (reset, properties) is inherited for free.

Create a FilterManager

▶

class FilterManager {
  constructor() {
    this.filters = [
      new BrightnessFilter(),
      new ContrastFilter(),
      new SaturationFilter(),
      new GrayscaleFilter(),
      new InvertFilter(),
    ];
  }

  applyAll(r, g, b) {
    let result = [r, g, b];
    for (const filter of this.filters) {
      result = filter.apply(...result);
    }
    return result;
  }

  resetAll() {
    this.filters.forEach(f => f.reset());
  }
}

FilterManager doesn't know the details of any filter — it just calls apply() on each one. Adding a new filter = creating a class + adding one line to the array. Zero changes to FilterManager.

Refactor PixelCraft

▶

Replace the 14 scattered filter functions with the class hierarchy. Wire the FilterManager into the rendering pipeline from Session 28.

When Are Classes Overkill?

▶

Use Classes When	Use Functions When
Shared structure + state + behavior	Stateless transformation
Multiple instances needed	Single utility function
Inheritance makes sense	Composition is simpler
Complex internal state	Input → output (pure)

Close the Ticket

▶

git switch -c refactor/PIXELCRAFT-025-class-hierarchy
git add src/scripts/
git commit -m "Refactor filters to class hierarchy with FilterManager (PIXELCRAFT-025)"
git push origin refactor/PIXELCRAFT-025-class-hierarchy
# PR → Review → Merge → Close ticket ✅

CS.DEEP-DIVE

Object-Oriented Programming (OOP).

Classes model "things" that have both state (properties) and behavior (methods). Inheritance shares common behavior while specializing.

// OOP dominated the 1990s–2000s:

Java     → everything is a class
C++      → classes + low-level control
C#       → classes + Microsoft ecosystem

// Modern JS uses a MIX of OOP
// and functional programming.

OOP         → "things" with state
Functional    → pure transformations

// Understanding BOTH lets you choose
// the right tool for each problem.

REF.MATERIAL

ARTICLE

Classes — MDN

Mozilla Developer Network

Complete class reference: constructors, methods, static, private fields, inheritance, super(), getters/setters.

CLASSESMDNREFERENCE

VIDEO

JavaScript OOP Crash Course — Traversy Media

Traversy Media

Practical OOP: classes, constructors, inheritance, method overriding, and when to use OOP vs functional approaches.

OOPPRACTICAL

ARTICLE

Class Basic Syntax — javascript.info

javascript.info

Interactive class tutorial: syntax, expressions, inheritance chain, and how classes relate to prototypes under the hood.

CLASSESINTERACTIVE

VIDEO

OOP in 100 Seconds — Fireship

Fireship

Ultra-fast overview: encapsulation, abstraction, inheritance, polymorphism. The four pillars of OOP in 100 seconds.

OOPQUICK

ARTICLE

Class Inheritance — javascript.info

javascript.info

Extends, super(), overriding methods, constructor rules, and the prototype chain. Interactive exercises.

INHERITANCEINTERACTIVE

CLASS HIERARCHY