Classes
📚 What are JavaScript Classes? A class is a blueprint for creating objects. You define properties and methods once in the class, then create as many instances as you need with new. Classes organise related data and behaviour together, making complex code much easier to manage.
Appy Says…
What if you could create a blueprint for 'User' and then stamp out a thousand users instantly — each with their own name, score, and methods? That's exactly what classes do. They're the building blocks of large JavaScript applications.
What are JavaScript Classes?
A class is a blueprint for creating objects with shared properties and methods. You new the class to create an instance. Classes in JavaScript are syntactic sugar over prototype-based inheritance.
- •Define:
class User { constructor(name) { this.name = name; } } - •Instantiate:
const u = new User('Appy'); - •
constructor()runs when you create a new instance - •
thisrefers to the current instance inside methods - •Add methods:
greet() { return 'Hi, ' + this.name; } - •
extends:class Admin extends User { ... }— inherit from a parent class - •
super()— call the parent class constructor
Think of it like a Roblox character template
In Roblox, you can create a character template with health, speed, and a jump method. Every new character spawned from that template has the same setup — but each instance has its own health value. The class is the template; each new User() is a freshly spawned character.
How It Works
- •1.
class Dog { constructor(name) { this.name = name; } bark() { return 'Woof!'; } } - •2.
const rex = new Dog('Rex');— creates a new instance, runsconstructor - •3.
rex.name→'Rex';rex.bark()→'Woof!' - •4. Methods are shared on the prototype — not duplicated per instance (memory efficient)
- •5.
class Poodle extends Dog { fetch() { return this.name + ' fetches!'; } } - •6.
staticmethods belong to the class itself, not instances:User.create()
Real-World Examples
- •A game:
class Enemy { constructor(health) { this.health = health; } } - •A chat app:
class Message { constructor(text, author, timestamp) { ... } } - •React class components (legacy but important to recognise):
class App extends React.Component { ... } - •Node.js EventEmitter — your custom classes can
extend EventEmitterto emit events - •TypeScript heavily uses classes for typed service layers and data models
Key Facts
- •JavaScript classes were added in ES6 (2015) — before that, developers used constructor functions manually
- •Under the hood, classes use the prototype chain —
classis syntactic sugar - •
instanceofchecks:rex instanceof Dog→true - •Private fields (ES2022):
#score = 0;— only accessible inside the class
Watch Out!
Forgetting new when creating an instance is a classic bug. User('Appy') calls the class as a function, which in strict mode throws a TypeError. In non-strict mode it silently creates global variables. Always use new.
Remember
Classes are blueprints. new ClassName() creates an instance. this inside methods refers to that instance. Methods are shared on the prototype.
What You Learned
- •Classes define blueprints;
new ClassName()creates instances with their own data - •
constructor()initialises, methods are shared,extendsenables inheritance - •Unlocks: organising complex code, game entities, React class components, TypeScript models
Key Facts
- →JavaScript classes were added in ES6 (2015) — before that, developers used constructor functions manually
- →Under the hood, classes use the prototype chain —
classis syntactic sugar - →
instanceofchecks:rex instanceof Dog→true - →Private fields (ES2022):
#score = 0;— only accessible inside the class
Real-World Examples
Remember
Classes are blueprints. new ClassName() creates an instance. this inside methods refers to that instance. Methods are shared on the prototype.
Quick Quiz
new ClassName() creates?