How to create classes in Javascript ES6

Following our last posts about new features in ES6, we will learn about how to create classes in Javascript ES6. Classes in ES6 have a nice and clean syntax which changes our usual way of using objects and prototypes.

Class definition

We can define a class in two ways. declare it or express it.

Class declaration 

class Rectangle {

  constructor(height, width) {

   this.height = height;

<span class="token keyword">this</span><span class="token punctuation">.</span>width <span class="token operator">=</span> width<span class="token punctuation">;</span>

  }

}

Here we actually declare it with class keyword.

Class expressions

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"
// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle2"
```


The name given to a named class expression is local to the class’s body. It can be retrieved through the class’s (not an instance’s) [.name](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name) property, though)

## Class body and method definitions {#Class_body_and_method_definitions}

The body of a class is executed in [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode), i.e., code written here is subject to stricter syntax for increased performance.

The `constructor` method is a special method for creating and initialising an object created with a `class`.A constructor can use the `super` keyword to call the constructor of the super class. ( As in react) In the below class we have a constructor and a method.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}
const square = new Rectangle(10, 10);

console.log(square.area); // 100
```


The interesting thing about classes in ES6 is that there is no function keyword to declare one. We could use the name right away.

## Class Extension

We could use extends keyword to create a new child class (of both types explained above) of another class.In the example below, the Dog class extends Animal class and using super to call class constructor and pass in the name.

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}
class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

  speak() {
    console.log(this.name + ' barks.');
  }
}
let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.
```


**Note: **If there is a constructor present in subclass, it needs to first call super() before using “this”. This is very useful in react application classes.

You could also use class inheritence to extend old defined functions:

function Animal (name) {
  this.name = name;  
}

Animal.prototype.speak = function () {
  console.log(this.name + ' makes a noise.');
}
class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}
let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.
```


It is important to know that classes cannot extend regular objects unless you use setPrototypeOf method to add the object as a method:

const Animal = {
  speak() {
    console.log(this.name + ' makes a noise.');
  }
};
class Dog {
  constructor(name) {
    this.name = name;
  }
}
// If you do not do this you will get a TypeError when you invoke speak
Object.setPrototypeOf(Dog.prototype, Animal);
let d = new Dog('Mitzie');
d.speak(); // Mitzie makes a noise.
```


## Calls with Super class

The **super keyword** is getting used to call the super class methods. In this example it is used to call the speak method of the parent class:

classCat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}
class Lion extends Cat {
  speak() {
    super.speak();
    console.log(`${this.name} roars.`);
  }
}
let l = new Lion('Fuzzy');
l.speak(); 
// Fuzzy makes a noise.
// Fuzzy roars.
```


It was a brief about classes and their definition in Javascript ES6.However In future posts we will build some applications using ES6 classes. 
© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.