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 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
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal
Class Properties
Properties in JavaScript classes hold data associated with each class instance. For example, in our GameCharacter class, name, health, and strength are properties. You can access a class property using the object of the class, followed by a dot (.), and then the property name.
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 classconsole.log(character.name); // prints: Heroconsole.log(character.health); // prints: 100console.log(character.strength); // prints: 20
Properties differentiate one class instance from another and store the state of the instance.
Class Methods
A class also contains methods — actions or functions that manipulate the data in the class. For example, the attack method in our GameCharacter class simulates an attack by one game character on another.
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 GameCharacterconst character2 = new GameCharacter("Villain", 80, 15); // Second instanceconsole.log(character2.health); // prints: 80character1.attack(character2); // character1 attacks character2console.log(character2.health); // prints: 60
Examples of JavaScript Classes, Properties, and Methods
Lesson Summary and Practice
Great work revisiting JavaScript classes, their properties, and methods. JavaScript classes help organize your code, improving its readability and manageability. Now, test your understanding with exercise problems to solidify your newly refreshed knowledge. Happy coding!
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 classconsole.log(character.name); // prints: Heroconsole.log(character.health); // prints: 100console.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 GameCharacterconst character2 = new GameCharacter("Villain", 80, 15); // Second instanceconsole.log(character2.health); // prints: 80character1.attack(character2); // character1 attacks character2console.log(character2.health); // prints: 60
To deepen our understanding of JavaScript classes, let's explore another example where we build a basic BankAccount class. This class will demonstrate how we can model real-world entities using object-oriented programming by defining properties like the account holder's name and balance, and methods for depositing and withdrawing money.
JavaScript
// Define the BankAccount classclass 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 BankAccountconst account = new BankAccount("Alex", 1000); // An account with initial balance of 1000// Perform some transactionsaccount.deposit(500); // Deposit money// Output: 500 deposited. New balance: 1500account.withdraw(200); // Withdraw money// Output: 200 withdrawn. Remaining balance: 1300console.log(`Final balance in ${account.holderName}'s account: ${account.balance}`);// Output: Final balance in Alex's account: 1300
This example further illustrates how classes effectively encapsulate data (properties) and functionalities (methods), enabling us to mimic real-life scenarios. Here, the BankAccount class allows the creation of objects representing bank accounts, emphasizing the powerful organizational benefits of using classes in JavaScript.
