ES6 Classes in JavaScript 🎯

Welcome to our deep dive into ES6 Classes in JavaScript! This tutorial is designed for both beginners and intermediates, covering the basics and delving into advanced concepts. Let's get started!

Understanding Classes 📝

Classes are a powerful feature introduced in ES6 (short for ECMAScript 2015), providing a more object-oriented approach to JavaScript. They help in organizing code, reusing functionality, and enforcing encapsulation.

What are classes? 💡

Think of a class as a blueprint or template for creating objects. You can define a class to specify the structure and behavior of an object. Once the class is defined, you can create multiple instances of that class, each representing an individual object with its own properties and methods.

Creating a Class 💡

To create a class in JavaScript, use the class keyword followed by the class name, enclosed in quotes. Here's a simple example of a class named Car:

javascript

class Car {
  // Class properties and methods go here
}

Properties and Methods 📝

In a class, properties and methods are defined inside the class body, using the constructor, get, set, and function keywords.

Constructor 💡

The constructor is a special method that runs when a new instance of the class is created. It's used to initialize properties of the object.

javascript

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

Creating an Instance 💡

To create an instance of a class, use the new keyword followed by the class name and pass the necessary arguments to the constructor.

javascript

let myCar = new Car('Toyota', 'Corolla', 2020);

Accessing Properties 📝

You can access the properties of an object using the dot notation.

javascript

console.log(myCar.brand); // Output: 'Toyota'

Methods 💡

Methods are functions that belong to an object. Let's create a method in our Car class to get the age of the car.

javascript

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

  getAge() {
    const currentYear = new Date().getFullYear();
    return currentYear - this.year;
  }
}

let myCar = new Car('Toyota', 'Corolla', 2020);
console.log(myCar.getAge()); // Output: 0

Inheritance 💡

Inheritance allows one class (the subclass) to inherit properties and methods from another class (the superclass). This helps in code reusability and modularity.

javascript

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }
}

class Car extends Vehicle {
  constructor(brand, model, year) {
    super(brand); // Calling the constructor of the superclass
    this.model = model;
    this.year = year;
  }

  getAge() {
    const currentYear = new Date().getFullYear();
    return currentYear - this.year;
  }
}

let myCar = new Car('Toyota', 'Corolla', 2020);
console.log(myCar.brand); // Output: 'Toyota'

Quiz 📝

Happy coding! Let's move on to more advanced topics in our ES6 Classes tutorial. Stay tuned! 🎯