Understanding JavaScript Classes : A Guide with BankAccount Examples
In this post, we’ll dive deep into JavaScript classes, a powerful feature introduced in ECMAScript 2015 (ES6) that provides a more clear and concise way to create objects and deal with inheritance. By using classes, you can structure your code more effectively, making it easier to create and manage complex applications. We’ll use BankAccount and SavingsAccount classes as our examples to illustrate these concepts, including how class hoisting differs from function hoisting in JavaScript.
What Are JavaScript Classes?
Classes in JavaScript are a syntactic sugar over the existing prototype-based inheritance and offer a cleaner, more declarative syntax for object creation and inheritance. They provide a blueprint for creating objects with predefined properties and methods.
Creating a Class
Let’s start by creating a simple BankAccount class:
class BankAccount {
constructor(accountNumber, accountHolderName, balance) {
this.accountNumber = accountNumber;
this.accountHolderName = accountHolderName;
this.balance = balance;
}
deposit(amount) {
this.balance += amount;
console.log(`Deposited $${amount}. New balance is $${this.balance}.`);
}
withdraw(amount) {
if (amount > this.balance) {
console.log('Insufficient funds.');
return;
}
this.balance -= amount;
console.log(`Withdrew $${amount}. New balance is $${this.balance}.`);
}
}
Creating an Object of the Class
To create an object of the BankAccount class:
let myAccount = new BankAccount('123456', 'John Doe', 1000);
myAccount.deposit(500);
myAccount.withdraw(200);
This code snippet creates a new BankAccount instance with a starting balance, then deposits and withdraws money, showcasing how you can use the class methods.
Inheritance in JavaScript Classes
Inheritance is a core concept in object-oriented programming that allows a class to inherit properties and methods from another class. Let’s create a SavingsAccount class that inherits from BankAccount but also includes an interest rate feature.
class SavingsAccount extends BankAccount {
constructor(accountNumber, accountHolderName, balance, interestRate) {
super(accountNumber, accountHolderName, balance); // Call the parent class constructor
this.interestRate = interestRate;
}
applyInterest() {
const interest = this.balance * (this.interestRate / 100);
this.deposit(interest);
console.log(`Interest of $${interest} has been applied.`);
}
}
To use the SavingsAccount class:
let mySavings = new SavingsAccount('789012', 'Jane Doe', 5000, 2);
mySavings.applyInterest();
This example demonstrates how SavingsAccount inherits functionality from BankAccount and adds its method for applying interest.
Class Hoisting in JavaScript
An important concept to understand when working with JavaScript classes is hoisting. Unlike functions, classes are not hoisted. This means you cannot use a class before it is declared in the code. Attempting to do so will result in a ReferenceError.
let account = new BankAccount('345678', 'Alice Bob', 300); // ReferenceError: Cannot access 'BankAccount' before initialization
class BankAccount {
// Class definition
}
This behavior is crucial to remember, as it differs from how functions are hoisted, where you can call a function before it’s declared due to the way JavaScript processes function declarations.
