JavaScript Classes in Object-Oriented Programming

Lesson Overview

Greetings! Today, we're revisiting JavaScript classes, the core building block of Object-Oriented Programming (OOP) in JavaScript. Through hands-on examples, we'll revisit the fundamental concepts of JavaScript classes, including their structure, properties, and methods.

JavaScript Classes Refresher

Let's begin with a refresher on JavaScript classes. Essential to OOP, JavaScript classes bundle relevant data and functions into compact units called objects. Consider a video game character, which is a typical example of a class instance, with specific properties (such as health or strength) and methods (such as attack or defense). JavaScript class GameCharacter {// constructor method constructor(name, health, strength) {this.name = name; // property this.health = health; // property this.strength = strength; // property} attack(otherCharacter) { // method otherCharacter.health -= this.strength;}} JavaScript classes facilitate the grouping of associated code elements, simplifying their management. Now, to better remind ourselves how the above example works, let's go through it step-by-step.

Structure of a JavaScript Class

A JavaScript class serves as a blueprint consisting of properties and methods. While properties represent data relevant to a class instance, methods are actions or functions that manipulate this data. Each class includes a constructor function, which is used to define class properties. An essential keyword within these methods is this, which represents the class instance. In object-oriented programming, it's needed to access the class's properties and methods. When a new class instance is created, JavaScript automatically passes it to the this parameter to access individual instance properties and methods using the this keyword. This mechanism allows each object to keep track of its own state and behaviors. JavaScript class GameCharacter {// constructor: defines class properties constructor(name, health, strength) {this.name = name; // property this.health = health; // property this.strength = strength; // property}} const character = new GameCharacter("Hero", 100, 20); // object or instance of the class class GameCharacter {// constructor: defines class properties constructor(name, health, strength) {this.name = name; // property this.health = health; // property this.strength = strength; // property}} const character = new GameCharacter("Hero", 100, 20); // object or instance of the class

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

JavaScript

class GameCharacter {
    // constructor: defines class properties
    constructor(name, health, strength) {  
        this.name = name;       // property
        this.health = health;   // property
        this.strength = strength;   // property
    }
}

const character = new GameCharacter("Hero", 100, 20);  // object or instance of the class

JavaScript

class GameCharacter {
    // constructor: defines class properties
    constructor(name, health, strength) {  
        this.name = name;       // property
        this.health = health;   // property
        this.strength = strength;   // property
    }
}

const character = new GameCharacter("Hero", 100, 20);  // object or instance of the class
console.log(character.name);  // prints: Hero
console.log(character.health);  // prints: 100
console.log(character.strength);  // prints: 20

class GameCharacter {
    // constructor: defines class properties
    constructor(name, health, strength) {  
        this.name = name;       // property
        this.health = health;   // property
        this.strength = strength;   // property
    }
}

const character = new GameCharacter("Hero", 100, 20);  // object or instance of the class
console.log(character.name);  // prints: Hero
console.log(character.health);  // prints: 100
console.log(character.strength);  // prints: 20

JavaScript

class GameCharacter {
    // constructor: defines class properties
    constructor(name, health, strength) {  
        this.name = name;       // property
        this.health = health;   // property
        this.strength = strength;   // property
    }

    attack(otherCharacter) {  // method
        otherCharacter.health -= this.strength;  // modifies 'otherCharacter's health property
    }
}

const character1 = new GameCharacter("Hero", 100, 20);   // First instance of GameCharacter
const character2 = new GameCharacter("Villain", 80, 15);  // Second instance

console.log(character2.health);  // prints: 80
character1.attack(character2);  // character1 attacks character2
console.log(character2.health);  // prints: 60

class GameCharacter {
    // constructor: defines class properties
    constructor(name, health, strength) {  
        this.name = name;       // property
        this.health = health;   // property
        this.strength = strength;   // property
    }

    attack(otherCharacter) {  // method
        otherCharacter.health -= this.strength;  // modifies 'otherCharacter's health property
    }
}

const character1 = new GameCharacter("Hero", 100, 20);   // First instance of GameCharacter
const character2 = new GameCharacter("Villain", 80, 15);  // Second instance

console.log(character2.health);  // prints: 80
character1.attack(character2);  // character1 attacks character2
console.log(character2.health);  // prints: 60

JavaScript

// Define the BankAccount class
class BankAccount {
    // Constructor with a default balance of 0
    constructor(holderName, balance = 0) {
        this.holderName = holderName;
        this.balance = balance;
    }

    // Method to deposit money
    deposit(amount) {
        if (amount > 0) {
            this.balance += amount;
            console.log(`${amount} deposited. New balance: ${this.balance}`);
        } else {
            console.log("Deposit amount must be positive.");
        }
    }

    // Method to withdraw money
    withdraw(amount) {
        if (0 < amount && amount <= this.balance) {
            this.balance -= amount;
            console.log(`${amount} withdrawn. Remaining balance: ${this.balance}`);
        } else {
            console.log("Insufficient balance for the withdrawal or amount is not positive.");
        }
    }
}

// Create an instance of BankAccount
const account = new BankAccount("Alex", 1000);  // An account with initial balance of 1000

// Perform some transactions
account.deposit(500);  // Deposit money
// Output: 500 deposited. New balance: 1500

account.withdraw(200);  // Withdraw money
// Output: 200 withdrawn. Remaining balance: 1300

console.log(`Final balance in ${account.holderName}'s account: ${account.balance}`);
// Output: Final balance in Alex's account: 1300

JavaScript

class GameCharacter {
    // constructor: defines class properties
    constructor(name, health, strength) {  
        this.name = name;       // property
        this.health = health;   // property
        this.strength = strength;   // property
    }
}

const character = new GameCharacter("Hero", 100, 20);  // object or instance of the class
console.log(character.name);  // prints: Hero
console.log(character.health);  // prints: 100
console.log(character.strength);  // prints: 20

JavaScript

class GameCharacter {
    // constructor: defines class properties
    constructor(name, health, strength) {  
        this.name = name;       // property
        this.health = health;   // property
        this.strength = strength;   // property
    }

    attack(otherCharacter) {  // method
        otherCharacter.health -= this.strength;  // modifies 'otherCharacter's health property
    }
}

const character1 = new GameCharacter("Hero", 100, 20);   // First instance of GameCharacter
const character2 = new GameCharacter("Villain", 80, 15);  // Second instance

console.log(character2.health);  // prints: 80
character1.attack(character2);  // character1 attacks character2
console.log(character2.health);  // prints: 60

JavaScript

// Define the BankAccount class
class BankAccount {
    // Constructor with a default balance of 0
    constructor(holderName, balance = 0) {
        this.holderName = holderName;
        this.balance = balance;
    }

    // Method to deposit money
    deposit(amount) {
        if (amount > 0) {
            this.balance += amount;
            console.log(`${amount} deposited. New balance: ${this.balance}`);
        } else {
            console.log("Deposit amount must be positive.");
        }
    }

    // Method to withdraw money
    withdraw(amount) {
        if (0 < amount && amount <= this.balance) {
            this.balance -= amount;
            console.log(`${amount} withdrawn. Remaining balance: ${this.balance}`);
        } else {
            console.log("Insufficient balance for the withdrawal or amount is not positive.");
        }
    }
}

// Create an instance of BankAccount
const account = new BankAccount("Alex", 1000);  // An account with initial balance of 1000

// Perform some transactions
account.deposit(500);  // Deposit money
// Output: 500 deposited. New balance: 1500

account.withdraw(200);  // Withdraw money
// Output: 200 withdrawn. Remaining balance: 1300

console.log(`Final balance in ${account.holderName}'s account: ${account.balance}`);
// Output: Final balance in Alex's account: 1300

Lesson Overview

JavaScript Classes Refresher

Structure of a JavaScript Class

Join the 1M+ learners on CodeSignal

Class Properties

Class Methods

Examples of JavaScript Classes, Properties, and Methods

Lesson Summary and Practice