Classes & Objects¶
JavaScript supports object-oriented programming (OOP) using classes (ES6+) and constructor functions. Classes help organize related data and behavior into reusable blueprints.
1. Creating a Class¶
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hi, I'm ${this.name}`);
}
}
2. Creating Objects (Instances)¶
const user1 = new Person("Alice", 25);
user1.greet(); // Hi, I'm Alice
3. Constructor Method¶
constructor()
is called automatically when usingnew
- Used to initialize object properties
class Car {
constructor(brand, year) {
this.brand = brand;
this.year = year;
}
}
4. Adding Methods¶
Define methods directly inside the class:
class Circle {
constructor(radius) {
this.radius = radius;
}
area() {
return Math.PI * this.radius ** 2;
}
}
5. Class Expression (Anonymous or Named)¶
const Animal = class {
constructor(type) {
this.type = type;
}
};
6. Inheritance (extends
)¶
One class can inherit from another.
class Animal {
speak() {
console.log("Generic sound");
}
}
class Dog extends Animal {
speak() {
console.log("Bark");
}
}
const d = new Dog();
d.speak(); // Bark
7. super()
Keyword¶
Calls the constructor or method from the parent class.
class Animal {
constructor(name) {
this.name = name;
}
}
class Cat extends Animal {
constructor(name, color) {
super(name);
this.color = color;
}
}
8. Static Methods¶
Static methods belong to the class, not instances.
class MathUtil {
static square(x) {
return x * x;
}
}
MathUtil.square(4); // 16
9. Object vs Class¶
- Object literal: used for single instances
- Class: used for creating multiple objects with shared structure
// Object literal
const user = {
name: "Bob",
greet() {
console.log("Hi");
}
};
Use object literals for simple structures, classes for reusable templates.