33 Javascript Concepts — #14. ES6 Class

First of all, this story is based on Stephen Curtis -33 Fundamentals Every Javascript Developer Should Know and you can read it here.
I thought it is a great concept to know although it is not a requirement. I decided to learn and explain these concepts one by one.

Index
1. Classes
2. Class declaration
3. Method
4. Inheritance
5. Overwriting
6. Conclusion

Classes

Classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JavaScript are built on prototypes but also have some syntax and semantics that are not shared with ES5 classalike semantics.

Class declaration

One way to define a class is using a class declaration. To define a class, we need to use class keyword. Once we define a class, we can generate as many instances as we want by using new keyword.

Let’s see the simple example below.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
const rect1 = new Rectangle(100, 200);
const rect2 = new Rectangle(50, 100);
console.log(rect1); // Rectangle {height: 100, width: 200}
console.log(rect2); // Rectangle {height: 50, width: 100}

First, we declare Rectangle class with class keyword and it has a constructor function that is only invoked when instances are made by using newkeyword.

Second, we made two instances, rect1 and rect2 . Since we made our instances using new keyword, constructor function is invoked. What constructor function do here is to store height and width as a member variable. Therefore two instances are made that have different variable values.

Note that You need to declare class before calling it since, Unlike function declaration, class declaration is not hoisted.

Method

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  logArea() {
    console.log(`${this.height * this.width}`);
  }
}
const rect1 = new Rectangle(100, 200);
const rect2 = new Rectangle(50, 100);
rect1.logArea(); //20000
rect2.logArea(); //5000

Class doesn’t only store member variables. It also can make methods!! When we define a function inside of the class, we don’t need to use function keyword. Simply make function declaration without function keyword.

Inheritance

class Shape {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  area() {
    console.log(‘calculating…’);
    return this.width * this.height;
  }
}
class Rectangle extends Shape {}
const rect = new Rectangle(10, 10);
console.log(rect.area());
// result 
calculating...
100

By using extends keyword, other class can inherit the parent class’s member variable and methods. In here, Rectangle class inherits the Shape class. Therefore we can use area method in rect object that is made by Rectangle class.

Overwriting

class Shape {
  constructor(width, height) {
    this.width = width;
    this.height = height;
}
  area() {
    console.log('calculating...');
    
    return this.width * this.height;
  }
}
class Triangle extends Shape {
  area() {
  return (this.width * this.height) / 2;
  }
}
const triangle = new Triangle(10, 10);
console.log(triangle.area());
// result
50

Sometimes, we need to change the method since the class that inherits the parent class has different characteristics. For example, as triangle’s area is half of the rectangle area, we need to divide width * height by 2.
In this case, we can simply overwrite the parent’s class method like above example.

super

class Shape {
  constructor(width, height) {
    this.width = width;
    this.height = height;
}
area() {
    console.log('calculating...');
    
    return this.width * this.height;
  }
}
class Triangle extends Shape {
  area() {
  super.area();
  return (this.width * this.height) / 2;
  }
}
const triangle = new Triangle(10, 10);
console.log(triangle.area()); 
// result
calculating...
50

What if we want to overwrite the parent class method partially? In that case, we can use super keyword. super keyword let us can access the parent class.
For example, In the above, I just added super.area() inside of Triangle class. What it does here is to call area method that is in the Shape class. And then, instead of return this.width * this.height, return this.width * this.height / 2 by overwriting it.

Conclusion

Today I explained simple keywords that are used in the JavaScript ES6 classes.
Although there are lots of more complicated concepts, this is gonna be great fundamentals when you study deeper.

Thanks for reading this story.

Reference : MDN