Course Content

Advanced JavaScript Mastery

1. Mastering JavaScript Classes and Inheritance

Getting Started Understanding Class Declarations in JavaScript Challenge: Create a JavaScript Class Defining Methods in JavaScript Classes Challenge: Add Methods to a Class Using Parameter Objects Working with Private Properties in Classes Challenge: Implement Private Properties in a Class Managing Properties with Getters and Setters Challenge: Implement Getters and Setters in a Class Exploring Static Properties in JavaScript Using Static Methods in JavaScript Challenge: Implement Static Properties and Methods in a Class Understanding Inheritance with extends and super()Challenge: Implement Class Inheritance with extends and super()

2. DOM Manipulation for Interactive Web Development

What Is the Document Object Model (DOM)?Querying and Selecting Elements in the DOM Challenge: Query and Select DOM Elements Understanding the DOM Hierarchy and Relationships Challenge: Navigate the DOM Hierarchy Exploring DOM Properties in JavaScript Working with Element Attributes in the DOM Challenge: Manage Element Properties and Attributes Adding Elements to the DOM Dynamically Removing Elements From the DOM Challenge: Add and Remove DOM Elements Modifying Element Styles with JavaScript Challenge: Apply Dynamic Styles to DOM Elements

3. Event Handling and User Interactions in JavaScript

Introduction to Events and Event Listeners Understanding the Event Object in JavaScript Challenge: Implement Event Listeners Event Propagation and Delegation Explained Challenge: Handle Event Propagation and Delegation Working with Keyboard and Mouse Events Managing and Removing Event Listeners

4. Asynchronous JavaScript and API Integration

Introduction to Asynchronous JavaScript Understanding Callbacks in JavaScript Handling Asynchronous Operations with Promises Using Async/Await for Cleaner Asynchronous Code Fetching and Working with APIs in JavaScript Integrating APIs in JavaScript Applications Challenge: Fetch and Use API Data Integrating Third-Party Libraries in JavaScript Challenge: Work with Third-Party Libraries Handling Multiple Asynchronous Requests

Challenge: Implement Private Properties in a Class

Task

You're creating a BankAccount class to manage users' bank accounts securely. Each account has an owner and a balance, but you want the balance to be protected from direct access. Your goal is to use private properties to prevent unintended modifications to the balance while allowing controlled access through methods.

Private Balance Property:
- Inside the BankAccount class, declare a private property #balance.
Constructor:
- The constructor should accept owner and initialBalance as parameters;
- Assign owner to a public property and initialBalance to the private #balance property.
Add Methods:
- deposit: Define a method that takes amount as a parameter. If the amount is greater than 0, it should add amount to #balance;
- withdraw: Define a method that takes amount as a parameter. If the amount is greater than 0 and less than or equal to #balance, it should subtract amount from #balance;
- getBalance: Define a method that returns a string with the owner's name and the account balance, e.g., "Account balance for John: $1500".


              123456789101112131415161718192021222324252627282930313233343536
            
class BankAccount {
  #_____; // Declare private property

  constructor(owner, initialBalance) {
    this._____ = owner;
    this.#_____ = initialBalance;
  }

  deposit(_____) {
    if (_____) {
      this.#_____ += _____;
    }
  }

  withdraw(_____) {
    if (_____ && _____) {
      this.#_____ -= _____;
    }
  }

  getBalance() {
    return `Account balance for ${this._____}: $${this.#_____}`;
  }
}

// Testing
const account1 = new BankAccount('Alice', 1000);

account1.deposit(500);
console.log(account1.getBalance()); // Expected: Account balance for Alice: $1500

account1.withdraw(300);
console.log(account1.getBalance()); // Expected: Account balance for Alice: $1200

// Attempt direct access (should cause an error)
// console.log(account1.#balance);

Declare a private property #balance in the BankAccount class;
In the constructor, assign owner to a public property and initialBalance to the private #balance property;
Define a deposit method that takes amount as a parameter. Check if amount is greater than 0, then add amount to #balance;
Define a withdraw method that takes amount as a parameter. Check if amount is greater than 0 and less than or equal to #balance, then subtract amount from #balance;
Define a getBalance method that returns a string with the owner's name and the account balance.


              123456789101112131415161718192021222324252627282930313233343536
            
class BankAccount {
  #balance; // Declare private property

  constructor(owner, initialBalance) {
    this.owner = owner;
    this.#balance = initialBalance;
  }

  deposit(amount) {
    if (amount > 0) {
      this.#balance += amount;
    }
  }

  withdraw(amount) {
    if (amount > 0 && amount <= this.#balance) {
      this.#balance -= amount;
    }
  }

  getBalance() {
    return `Account balance for ${this.owner}: $${this.#balance}`;
  }
}

// Testing
const account1 = new BankAccount('Alice', 1000);

account1.deposit(500);
console.log(account1.getBalance()); // Output: Account balance for Alice: $1500

account1.withdraw(300);
console.log(account1.getBalance()); // Output: Account balance for Alice: $1200

// Attempt direct access (should cause an error)
// console.log(account1.#balance);

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 8