55-Es6 classes.md

ES6 classes

ES6 classes in JavaScript are a syntactic sugar that provides a cleaner and more concise way of defining constructor functions and creating objects with prototype-based inheritance. They use the "class" keyword to define a constructor function, which can have a constructor method, instance methods, and static methods. ES6 classes also support inheritance through the use of the "extends" keyword, allowing for easier code reuse and organization.

Setters and Getters

Setters and getters are functions in JavaScript that allow you to define object properties with special behavior. A setter function is used to set the value of a property, while a getter function is used to retrieve the value of a property. They can be useful for enforcing data validation, accessing private variables, or triggering side effects when a property is accessed or modified. In ES6 and later versions of JavaScript, setters and getters can be defined using the set and get keywords respectively.

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

  get height() {
    return this._height;
  }

  set height(value) {
    if (value <= 0) {
      throw new Error('Height must be positive');
    }
    this._height = value;
  }

  get width() {
    return this._width;
  }

  set width(value) {
    if (value <= 0) {
      throw new Error('Width must be positive');
    }
    this._width = value;
  }

  get area() {
    return this._height * this._width;
  }
}

const rectangle1 = new Rectangle(10, 20);
console.log(rectangle1.height); // logs 10
console.log(rectangle1.width); // logs 20
console.log(rectangle1.area); // logs 200

rectangle1.height = 5;
console.log(rectangle1.height); // logs 5

rectangle1.width = 0; // throws an error

In this example, we define a class called Rectangle with properties for height and width. We define getter methods for the height and width properties, as well as a setter method for each property that checks if the value being set is positive. We also define a getter method for the area property, which calculates the area of the rectangle based on its height and width.

We then create a new Rectangle object called rectangle1 with a height of 10 and a width of 20. We log the height, width, and area properties of rectangle1 to the console.

We then set the height property of rectangle1 to 5, and log the height property again to verify that it was set correctly.

Finally, we try to set the width property of rectangle1 to 0, which throws an error because the width value must be positive according to the setter method.

Static methods

In JavaScript, static methods are methods that are defined on a class and can be called on the class itself, rather than on an instance of the class. These methods are typically used for utility functions or operations that don't depend on any specific instance of the class. To define a static method in JavaScript, you can use the static keyword before the method name. For example:

class MyClass {
  static myStaticMethod() {
    console.log('This is a static method.');
  }
}

MyClass.myStaticMethod(); // Outputs: "This is a static method."

Note that unlike instance methods, static methods cannot access instance-specific properties or methods using this. Instead, they operate solely on the class itself or any arguments passed into them.

How to use ES6 classes

To use ES6 classes in JavaScript, you can follow these basic steps:

1. Define a class using the class keyword followed by the class name.
2. Define the class constructor method using the constructor keyword.
3. Add class methods to the class using the regular function syntax within the class definition.
4. Create an instance of the class using the new keyword followed by the class name and any arguments required for the constructor.

Here's an example:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHi() {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const john = new Person('John', 30);
john.sayHi(); // logs "Hi, my name is John and I'm 30 years old."

In this example, we define a Person class with a constructor that takes a name and age argument. We also add a sayHi method to the class that logs a message to the console. We then create a john object as an instance of the Person class using the new keyword, passing in the necessary arguments to the constructor. Finally, we call the sayHi method on the john object to log the message to the console.