Mastering JavaScript Classes: A Comprehensive Guide.🚀🚀💪

Introduction

JavaScript classes, introduced in ECMAScript 2015 (ES6), provide a much cleaner and more intuitive syntax for creating objects and dealing with inheritance. This post explores JavaScript classes in depth, covering essential concepts and features with clear examples.

1. Overview

JavaScript classes are templates for creating objects. They encapsulate data with code to work on that data. Although they are primarily syntactical sugar over JavaScript's existing prototype-based inheritance, classes make object-oriented programming more accessible and easier to understand.

Example:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person1 = new Person('Alice', 30);
person1.greet(); // Hello, my name is Alice and I am 30 years old.

2. Constructor

The constructor method is a special method for creating and initializing an object created with a class. There can be only one special method with the name "constructor" in a class.

Example:

class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }

  displayInfo() {
    console.log(`This car is a ${this.brand} ${this.model}.`);
  }
}

const myCar = new Car('Toyota', 'Corolla');
myCar.displayInfo(); // This car is a Toyota Corolla.

3. Extends

The extends keyword is used in class declarations or class expressions to create a class that is a child of another class.

Example:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const myDog = new Dog('Rex');
myDog.speak(); // Rex barks.

4. Private Properties

Private properties are declared with a # prefix, making them inaccessible from outside the class.

Example:

class User {
  #password;

  constructor(username, password) {
    this.username = username;
    this.#password = password;
  }

  checkPassword(password) {
    return this.#password === password;
  }
}

const user1 = new User('john_doe', '12345');
console.log(user1.checkPassword('12345')); // true
console.log(user1.#password); // SyntaxError: Private field '#password' must be declared in an enclosing class

5. Public Class Fields

Public class fields are properties that can be defined directly within the class body, making them more concise and readable.

Example:

class Product {
  name = 'Default';
  price = 0;

  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  displayProduct() {
    console.log(`Product: ${this.name}, Price: $${this.price}`);
  }
}

const product1 = new Product('Laptop', 1200);
product1.displayProduct(); // Product: Laptop, Price: $1200

6. Static Methods

Static methods are called on the class itself, not on instances of the class. They are often used to create utility functions.

Example:

class MathUtils {
  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
}

console.log(MathUtils.add(5, 3)); // 8
console.log(MathUtils.subtract(5, 3)); // 2

7. Static Initialization Blocks

Static initialization blocks allow you to perform complex initialization of static properties.

Example:

class Config {
  static API_URL;
  static PORT;

  static {
    this.API_URL = 'https://api.example.com';
    this.PORT = 8080;
  }

  static getConfig() {
    return `API URL: ${this.API_URL}, PORT: ${this.PORT}`;
  }
}

console.log(Config.getConfig()); // API URL: https://api.example.com, PORT: 8080

8. Getters and Setters

Getters and setters are used to define methods that get and set the value of an object’s properties.

Example:

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  set fullName(name) {
    [this.firstName, this.lastName] = name.split(' ');
  }
}

const person = new Person('John', 'Doe');
console.log(person.fullName); // John Doe
person.fullName = 'Jane Smith';
console.log(person.fullName); // Jane Smith

9. Instance Methods

Instance methods are methods defined within a class that operate on instances of that class.

Example:

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }

  perimeter() {
    return 2 * (this.width + this.height);
  }
}

const rectangle = new Rectangle(10, 5);
console.log(rectangle.area()); // 50
console.log(rectangle.perimeter()); // 30

Conclusion

JavaScript classes offer a clean and concise way to create and manage objects, providing a range of features to support object-oriented programming. By understanding constructors, inheritance, private properties, public fields, static methods, and other concepts, you can leverage the full power of JavaScript classes in your projects. Happy coding!

Blog

Mastering JavaScript Classes: A Comprehensive Guide.🚀🚀💪

Dharmendra Kumar

Introduction

1. Overview

2. Constructor

3. Extends

4. Private Properties

5. Public Class Fields

6. Static Methods

7. Static Initialization Blocks

8. Getters and Setters

9. Instance Methods

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related