Classes in JavaScript are syntactic sugar over prototype-based inheritance. Introduced in ES6, they provide a cleaner and more familiar syntax for creating objects and handling inheritance, making JavaScript feel more like traditional object-oriented languages.
What are classes in JavaScript?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
The Core Idea
JavaScript classes are templates for creating objects that encapsulate data (properties) and behavior (methods). While they resemble classes in languages like Java or C#, under the hood they still use prototypes — a fundamental feature of JavaScript’s object system.
The class syntax provides a more structured, readable, and modern way to define constructor functions, methods, and inheritance.
JAVASCRIPT
// Defining a simple class
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
const alice = new Person('Alice', 25);
alice.greet(); // Hello, my name is Alice
How Classes Work Internally
- The
classsyntax is syntactic sugar over constructor functions and the prototype chain. - Each class has a special
constructor()method that initializes new objects. - Methods defined inside a class are automatically added to the prototype, not the instance.
- This keeps memory usage efficient since all instances share the same methods.
Feature | Description | Example |
|---|---|---|
Constructor | A special method used for initializing objects when a class is instantiated. |
|
Instance Methods | Functions shared by all instances through the prototype. |
|
Static Methods | Methods called directly on the class, not instances. |
|
Getters & Setters | Allow controlled access to properties. |
|
Inheritance with Classes
JavaScript supports class inheritance using the extends keyword. The child class inherits properties and methods from the parent class and can add its own. The super() keyword allows calling the parent’s constructor or methods.
JAVASCRIPT
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('Rex');
dog.speak(); // Rex barks.
Behind the Scenes
Even though classes look new, they’re still built on top of JavaScript’s prototype chain:
- Every class has a hidden
[[Prototype]]link. - The class body methods are added to
ClassName.prototype. - When you call a method on an instance, JavaScript looks it up through this prototype chain.
This means the following two approaches are equivalent in behavior:
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log('Hello, ' + this.name);
};class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log('Hello, ' + this.name);
}
}Important Details
- Class declarations are not hoisted like function declarations. You must define them before using them.
- You can define anonymous classes or assign them to variables.
- By default, class methods are non-enumerable, meaning they don’t show up in
for...inloops. - Using
newis mandatory when instantiating classes — calling a class as a function throws an error.
JAVASCRIPT
// Example: static method and getter
class MathHelper {
static square(n) {
return n * n;
}
get description() {
return 'This class provides math utilities.';
}
}
console.log(MathHelper.square(5)); // 25
const helper = new MathHelper();
console.log(helper.description); // This class provides math utilities.
Still so complicated?
Think of a class like a cookie cutter 🍪 — it defines the shape and design. Each cookie (object) made from it shares the same structure, but with its own details (property values).
Summary
- Classes define blueprints for creating objects with shared behavior.
- They simplify working with prototypes and inheritance.
- Support constructors, instance methods, static methods, and getters/setters.
- Classes improve code organization and readability, making OOP patterns easier to implement in JavaScript.
- Under the hood, they’re still prototype-based — just easier to read and maintain.
Similar questions
Guides