From Functions to Classes

Why we bundle data and behaviour together — and how the class keyword turns a blueprint into as many objects as you need.

Welcome to JavaScript Advanced 🎓 — the follow-up to JavaScript Fundamentals.

Everything from that course is fair game here: variables, strings, numbers, arrays, objects (and references!), functions, loops, and the async basics — callbacks, promises, async/await, and fetch. If any of those feel rusty, a quick refresher there will pay off, because this course builds directly on them.

Here's the journey ahead:

Classes & OOP — blueprints for objects (this module)
Error handling — code that fails gracefully
Collections & data — Map, Set, JSON, saving data
Regular expressions — pattern-matching text
The event loop & advanced async — how JavaScript really runs your code
Modules — organising code across files
Advanced functions — closures, recursion, generators
Professional JavaScript — debugging, testing, clean code, and a capstone

By the end, you won't just write JavaScript — you'll write it the way professionals do.

Let's start with a problem you can feel.

Imagine you're building a game. Each player has data, and there are things every player can do:

const player1 = { name: "Ana", score: 0 };
const player2 = { name: "Ben", score: 0 };

function addPoints(player, points) {
  player.score += points;
}

addPoints(player1, 10);

This works for two players. But picture fifty players and ten functions — addPoints, resetScore, levelUp, rename… The data lives in one place, the behaviour in another, and nothing connects them. Nothing even stops you from calling addPoints on a shopping cart by accident.

What we want is a way to say: "a Player is data plus the actions that belong to it — packaged together."

That idea has a name: object-oriented programming (OOP for short) — a style of organising code where related data and behaviour live together inside objects. It's one of the most widely used styles in the industry, and JavaScript supports it fully.

You already know one way to package data and behaviour: a function that builds and returns an object (sometimes called a factory function):

function makePlayer(name) {
  return {
    name,
    score: 0,
    addPoints(points) {
      this.score += points;
    },
  };
}

const ana = makePlayer("Ana");
ana.addPoints(10);
console.log(ana.score); // 10

Much better — each player carries its own behaviour. But there are two catches:

1. Wasted memory. Every call to makePlayer creates a brand-new copy of addPoints. A thousand players means a thousand identical functions.
2. No official type. Nothing in the language says these objects are all "Players" — they're just objects that happen to look alike.

JavaScript has a construct designed exactly for this. That's where classes come in.

Predict the output

Quick warm-up using what you know from Fundamentals. What does this log?

function makePlayer(name) {
  return { name, score: 0 };
}

const a = makePlayer("Ana");
const b = makePlayer("Ben");
b.score = 10;

console.log(a.score, b.score);

A0 10
B10 10
C0 0
Dundefined 10

Here is the same Player, written as a class — a blueprint for building objects:

class Player {
  constructor(name) {
    this.name = name;
    this.score = 0;
  }

  addPoints(points) {
    this.score += points;
  }
}

const ana = new Player("Ana");
ana.addPoints(10);
console.log(ana.name, ana.score); // Ana 10

Four new words, all worth knowing precisely:

A class is a blueprint: it describes what data each object will hold and what it can do.
An instance is an object built from that blueprint — ana is an instance of Player.
The constructor is a special setup method that runs once each time an object is built. It receives the arguments you pass in and uses this to attach data to the new object.
The new keyword does the building: it creates an empty object, points this at it, runs the constructor, and hands you the finished object.

Multiple choice

What does the new keyword do in const ana = new Player("Ana")?

ACreates a fresh empty object, points `this` at it, runs the constructor, and returns the object
BCopies the Player class into the variable `ana`
CRuns every method defined in the class once
DReserves memory but waits until a method is called to create the object

Predict the output

Two instances from one blueprint. What does this log?

class Counter {
  constructor() {
    this.count = 0;
  }
  up() {
    this.count += 1;
  }
}

const c1 = new Counter();
const c2 = new Counter();
c1.up();
c1.up();
c2.up();

console.log(c1.count, c2.count);

A2 1
B3 3
C2 0
D1 2

Recap 🧠

OOP (object-oriented programming) = organising code so data and its behaviour live together in objects.
A class is a blueprint; an instance is an object built from it.
The constructor runs once per new, attaching data to this (the object being built).
new ClassName(args) creates the object, runs the constructor, and returns the instance.
Every instance is independent — changing one never affects another.

Next up: what classes can do — methods, and properties that compute themselves.

Let's start with a problem you can feel.

Imagine you're building a game. Each player has data, and there are things every player can do:

const player1 = { name: "Ana", score: 0 };
const player2 = { name: "Ben", score: 0 };

function addPoints(player, points) {
  player.score += points;
}

addPoints(player1, 10);

What we want is a way to say: "a Player is data plus the actions that belong to it — packaged together."

function makePlayer(name) { return { name, score: 0, addPoints(points) { this.score += points; }, }; } const ana = makePlayer("Ana"); ana.addPoints(10); console.log(ana.score); // 10

class Player { constructor(name) { this.name = name; this.score = 0; } addPoints(points) { this.score += points; } } const ana = new Player("Ana"); ana.addPoints(10); console.log(ana.name, ana.score); // Ana 10

class Counter { constructor() { this.count = 0; } up() { this.count += 1; } } const c1 = new Counter(); const c2 = new Counter(); c1.up(); c1.up(); c2.up(); console.log(c1.count, c2.count);