Class Syntax & Constructor Methods0%
Class Syntax & Constructor Methods
Beginner12 min read•Updated: Jul 11, 2026
Class Syntax & Constructor Methods in Modern JavaScript
Introduced in ECMAScript 2015 (ES6), the class syntax provides a clean, declarative syntax over JavaScript's existing prototype-based inheritance model. While classes in JavaScript are syntactic sugar over prototypes, they introduce strict semantics, constructor encapsulation, and class-level invariants.
1. Class Declaration & The constructor Method
A class defines the blueprint for objects. The constructor() method is a special function that runs automatically whenever a new instance is created via the new operator:
JavaScript
class BankAccount {
// Constructor: Initializes instance properties
constructor(accountHolder, initialBalance = 0) {
this.accountHolder = accountHolder;
this.balance = initialBalance;
this.createdAt = new Date();
}
// Instance Method (Added to BankAccount.prototype)
deposit(amount) {
if (amount <= 0) throw new Error('Deposit amount must be positive.');
this.balance += amount;
return this.balance;
}
withdraw(amount) {
if (amount > this.balance) throw new Error('Insufficient funds.');
this.balance -= amount;
return this.balance;
}
}
// Instantiation
const myAccount = new BankAccount('Sarah Connor', 1000);
myAccount.deposit(500);
console.log(`Balance: $${myAccount.balance}`); // Balance: $1500
Output
Instance Memory Model:
myAccount ──► [ { accountHolder: 'Sarah', balance: 1500 } ]
│
▼ __proto__
BankAccount.prototype ──► [ deposit(), withdraw() ]
2. Key Differences Between Classes & Constructor Functions
| Feature | ES6 Class | Constructor Function (function Account()) |
|---|---|---|
| Strict Mode | Automatically runs in 'use strict' | Non-strict unless explicitly declared |
Invocation without new | Throws TypeError immediately | Fails silently and pollutes global window |
| Hoisting | Temporal Dead Zone (Cannot instantiate before declaration) | Hoisted (Can be called before definition) |
| Method Enumerability | Methods on prototype are non-enumerable | Prototype methods are enumerable by default |
JavaScript
// Classes CANNOT be called without 'new':
// BankAccount('Alex', 100); // TypeError: Class constructor BankAccount cannot be invoked without 'new'
3. Subclassing with extends and super()
To inherit from an existing class, use extends. The subclass constructor must invoke super() before accessing this:
JavaScript
class PremiumAccount extends BankAccount {
constructor(accountHolder, initialBalance, cashbackRate = 0.02) {
// MUST call super() before accessing 'this'!
super(accountHolder, initialBalance);
this.cashbackRate = cashbackRate;
}
// Method overriding
deposit(amount) {
const cashback = amount * this.cashbackRate;
const totalDeposit = amount + cashback;
console.log(`Bonus Cashback Earned: $${cashback}`);
return super.deposit(totalDeposit); // Invoke parent method via super
}
}
const vip = new PremiumAccount('John Connor', 5000);
vip.deposit(1000); // Bonus Cashback: $20, Balance: $6020
Critical Rule: In a derived class constructor, accessing
this before calling super() results in a ReferenceError: Must call super constructor in derived class before accessing 'this'.Interactive Quiz
Practice Quiz
Question 1
What happens if you attempt to instantiate an ES6 class without the new keyword (e.g. BankAccount())?
Question 2
What must be called inside a derived subclass constructor before accessing the this keyword?
Question 3
Where are standard methods declared inside a class body (like deposit()) stored in memory?
Question 4
Are ES6 classes hoisted like traditional function declarations?
Question 5
How do prototype methods created via class syntax differ in enumerability from traditional prototype functions?
Next Lesson
Getters, Setters & Static Methods
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
| Previous Lesson | Next Lesson |
|---|---|
| Scope Chain & Lexical Environment | Getters, Setters & Static Methods |
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.