What is The JavaScript Classes

#javascript

#javascript classes

In JavaScript, classes are a way to create objects with shared properties and methods. They were introduced in ECMAScript 2015 (ES6), providing a cleaner and more concise syntax for creating object-oriented code.

Defining a Class

A class definition begins with the class keyword followed by the class name. The body of the class is enclosed in curly braces `{}`.

Here's the basic syntax:

classMyClass { 
   // constructor method
   constructor(parameter1, parameter2) { 
      this.property1 = parameter1;
      this.property2 = parameter2; } 

    // method 
        myMethod() {
            console.log('Hello, world!');
        }
   }

Creating an Instance

To create an instance of a class, use the `new` keyword:

const myInstance = new MyClass('value1', 'value2');

Example: Creating a Simple Class

Let's create a class to represent a `Person`. This class will have properties for the person's name and age, and a method to greet.

Step 1: Define the Class

classPerson { 
  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.`);
  } 
}

Step 2: Create an Instance of the Class

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

Step 3: Adding More Methods

Let's add another method to calculate the year of birth based on the current year.

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.`);
  }

  yearOfBirth(currentYear) {
    return currentYear - this.age;
  }
}

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

const birthYear = person1.yearOfBirth(2024);
console.log(`I was born in ${birthYear}.`); // Output: I was born in 1994.

Example: Inheritance

JavaScript classes also support inheritance, which allows one class to inherit properties and methods from another.

Step 4: Define a Subclass

Let's create a subclass called `Student` that extends the `Person` class.

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // Call the constructor of the parent class
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying.`);
  }
}

const student1 = new Student('Bob', 20, 'A');
student1.greet(); // Output: Hello, my name is Bob and I am 20 years old.
student1.study(); // Output: Bob is studying.

Summary

  • Class Definition: Use `class` followed by the class name.
  • Constructor: Define a `constructor` method to initialize object properties.
  • Methods: Define methods inside the class.
  • Inheritance: Use `extends` to create a subclass, and `super` to call the parent class's constructor.

With this foundation, you can start creating more complex and powerful classes in JavaScript. If you have any specific scenarios or further questions, feel free to ask!