JavaScript Classes
14 April 2025 | Category: JavaScript
JavaScript classes are a way to create objects and deal with inheritance in a cleaner, more structured way. They were introduced in ES6 (ECMAScript 2015) as a syntactic sugar over JavaScript’s existing prototype-based inheritance.
📦 What is a Class?
A class is a blueprint for creating objects with pre-defined properties and methods.
🔧 Basic Syntax
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hi, I’m ${this.name} and I'm ${this.age} years old.`);
}
}
const john = new Person("John", 25);
john.greet(); // Hi, I’m John and I'm 25 years old.
📚 Key Concepts in JavaScript Classes
1. 🔨 Constructor Method
The constructor()
is a special method automatically called when a new object is created from the class.
constructor(name) {
this.name = name;
}
2. 🧱 Methods in Classes
Methods defined inside a class are placed on the prototype of the created object, making them memory-efficient.
sayHello() {
console.log("Hello!");
}
3. 🧬 Inheritance (Extending Classes)
Use extends
to create a subclass that inherits from another class.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks`);
}
}
const dog = new Dog("Bruno");
dog.speak(); // Bruno barks
4. 🧩 super()
Keyword
The super()
method is used to call the parent class’s constructor or methods.
class Dog extends Animal {
constructor(name, breed) {
super(name); // calls Animal's constructor
this.breed = breed;
}
}
5. 🔐 Getters and Setters
You can define custom logic for getting or setting properties.
class User {
constructor(name) {
this._name = name;
}
get name() {
return this._name.toUpperCase();
}
set name(newName) {
this._name = newName;
}
}
const u = new User("john");
console.log(u.name); // JOHN
u.name = "doe";
console.log(u.name); // DOE
6. 🚫 Static Methods
Static methods belong to the class itself, not the instance.
class MathUtils {
static add(x, y) {
return x + y;
}
}
console.log(MathUtils.add(2, 3)); // 5
🧠 Behind the Scenes
JavaScript classes use prototypal inheritance under the hood. So while the class
keyword makes it look more like other OOP languages (like Java, C++), it’s still prototype-based.
🧪 Real World Use Cases
- Defining models (e.g., in MVC pattern)
- Reusable components in front-end frameworks (like React class components)
- Structuring large apps in object-oriented style
📌 Summary Table
Feature | Description |
---|---|
constructor() | Initializes the object |
extends | Sets up inheritance from another class |
super() | Calls constructor or method of parent |
Instance methods | Defined within class, available to objects |
static methods | Called on class, not object instances |
get /set | Define custom property behavior |
✅ Advantages of Using Classes
- Cleaner and readable OOP syntax
- Easier inheritance and method organization
- Encapsulation of logic within objects
- IDEs and code editors provide better autocompletion
🚫 Limitations
- Still prototype-based under the hood
- Private fields (with
#
) are not supported in older environments - More overhead than simple object literals in small apps
🔚 Conclusion
JavaScript classes provide a modern, elegant way to build objects and handle inheritance. They’re great for organizing your code, especially in large applications.