Module 5: Modern JavaScript (ES6+)

Master modern JavaScript features and ES6+ syntax for building contemporary applications.

Back to Course|3 hours|Intermediate

Modern JavaScript (ES6+)

Master modern JavaScript features and ES6+ syntax for building contemporary applications.

Progress: 0/5 topics completed0%

Select Topics Overview

JavaScript Classes (ES6+)

Learn modern class syntax, inheritance, static methods, private fields, and advanced class features introduced in ES6 and beyond

Content by: Jigar Solanki

JavaScript Developer

Connect

Class Fundamentals

ES6 introduced a cleaner, more intuitive syntax for creating objects and implementing inheritance. Classes provide a more familiar syntax for developers coming from other object-oriented languages while maintaining JavaScript's prototype-based inheritance under the hood.

Class Features

  • ā€¢Class Declaration: Modern syntax for creating objects
  • ā€¢Constructor Method: Initialize object properties
  • ā€¢Instance Methods: Methods available on class instances
  • ā€¢Static Methods: Methods available on the class itself
  • ā€¢Private Fields: Truly private class members (ES2022+)
  • ā€¢Class Inheritance: Extend classes with 'extends'

Basic Class Examples

Code Example
// Class declaration
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    greet() {
        return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;
    }
    
    static createAdult(name) {
        return new Person(name, 18);
    }
}

const person = new Person('John', 30);
console.log(person.greet()); // "Hello, my name is John and I'm 30 years old."

const adult = Person.createAdult('Jane');
console.log(adult.greet()); // "Hello, my name is Jane and I'm 18 years old."

// Class inheritance
class Employee extends Person {
    constructor(name, age, position) {
        super(name, age);
        this.position = position;
    }
    
    work() {
        return `${this.name} is working as a ${this.position}.`;
    }
}

const employee = new Employee('Bob', 25, 'Developer');
console.log(employee.greet()); // Inherited method
console.log(employee.work()); // "Bob is working as a Developer."

// Private fields (ES2022+)
class BankAccount {
    #balance = 0; // Private field
    
    constructor(initialBalance = 0) {
        this.#balance = initialBalance;
    }
    
    deposit(amount) {
        if (amount > 0) {
            this.#balance += amount;
            return `Deposited ${amount}. New balance: ${this.#balance}`;
        }
        return 'Invalid deposit amount';
    }
    
    withdraw(amount) {
        if (amount > 0 && amount <= this.#balance) {
            this.#balance -= amount;
            return `Withdrew ${amount}. New balance: ${this.#balance}`;
        }
        return 'Insufficient funds';
    }
    
    getBalance() {
        return this.#balance;
    }
}

const account = new BankAccount(1000);
console.log(account.deposit(500)); // "Deposited 500. New balance: 1500"
console.log(account.withdraw(200)); // "Withdrew 200. New balance: 1300"
// console.log(account.#balance); // Error: Private field

// Getter and setter methods
class Circle {
    constructor(radius) {
        this._radius = radius;
    }
    
    get radius() {
        return this._radius;
    }
    
    set radius(value) {
        if (value > 0) {
            this._radius = value;
        } else {
            throw new Error('Radius must be positive');
        }
    }
    
    get area() {
        return Math.PI * this._radius ** 2;
    }
    
    get circumference() {
        return 2 * Math.PI * this._radius;
    }
}

const circle = new Circle(5);
console.log(circle.radius); // 5
console.log(circle.area); // 78.54...
console.log(circle.circumference); // 31.41...

circle.radius = 10;
console.log(circle.area); // 314.15...
Swipe to see more code

Practice Exercise: Classes

Code Example
// Exercise: Build a Library Management System
class Book {
    constructor(title, author, isbn, year) {
        this.title = title;
        this.author = author;
        this.isbn = isbn;
        this.year = year;
        this.isAvailable = true;
    }
    
    borrow() {
        if (this.isAvailable) {
            this.isAvailable = false;
            return `${this.title} has been borrowed.`;
        }
        return `${this.title} is not available.`;
    }
    
    return() {
        this.isAvailable = true;
        return `${this.title} has been returned.`;
    }
    
    getInfo() {
        return `${this.title} by ${this.author} (${this.year}) - ISBN: ${this.isbn}`;
    }
}

class Library {
    constructor() {
        this.books = new Map();
        this.members = new Map();
    }
    
    addBook(book) {
        this.books.set(book.isbn, book);
        return `Book ${book.title} added to library.`;
    }
    
    removeBook(isbn) {
        const book = this.books.get(isbn);
        if (book) {
            this.books.delete(isbn);
            return `Book ${book.title} removed from library.`;
        }
        return 'Book not found.';
    }
    
    findBook(query) {
        const results = [];
        for (const book of this.books.values()) {
            if (book.title.toLowerCase().includes(query.toLowerCase()) ||
                book.author.toLowerCase().includes(query.toLowerCase())) {
                results.push(book);
            }
        }
        return results;
    }
    
    getAvailableBooks() {
        return Array.from(this.books.values()).filter(book => book.isAvailable);
    }
    
    getBorrowedBooks() {
        return Array.from(this.books.values()).filter(book => !book.isAvailable);
    }
}

// Test the library system
const library = new Library();

const book1 = new Book('The Great Gatsby', 'F. Scott Fitzgerald', '978-0743273565', 1925);
const book2 = new Book('To Kill a Mockingbird', 'Harper Lee', '978-0446310789', 1960);
const book3 = new Book('1984', 'George Orwell', '978-0451524935', 1949);

library.addBook(book1);
library.addBook(book2);
library.addBook(book3);

console.log(book1.borrow()); // "The Great Gatsby has been borrowed."
console.log(library.getAvailableBooks().length); // 2
console.log(library.findBook('Gatsby')); // [Book object]
Swipe to see more code

šŸŽÆ Practice Exercise

Test your understanding of this topic:

Previous Module

Module 4: Data Structures & Objects

Next Module

Module 6: Asynchronous JavaScript

Ready for the Next Module?

Continue your learning journey and master the next set of concepts.

Continue to Module 6