Class in ES6

As we all know JavaScript is an object-oriented language (prototype based). That means classes in JavaScript too is prototype based. The concept of class is not new in JavaScript but the keyword class is new, the keyword class is actually a syntactical sugar over the function and function is first class citizen. Lets see how new feature/syntatic sugar looks

class Animal {
  constructor(animalName, noise) {
    this._animalName = animalName;
    this._noise = noise;
  }
  // constructor(name) {
  //  this.Name = name;
  // }
  //  Uncaught SyntaxError: A class may only have one constructor

  get AnimalName() {
    return this._animalName.toUpperCase();
  }
  get Noise() {
    return this._noise.toUpperCase();
  }
}

In the above snippet code class `Animal` is created with a constructor which accepts two parameters (animalName, noise). Currently class can have only one constructor if you try to have multiple it would throw `SyntaxError`. Next is we have two properties `AnimalName` and `Noise` which doesn’t implement set. So it is like a readonly property

class Animal { }//SyntaxError: Identifier 'Animal' has already been declared

var Animal = class {};//SyntaxError: Identifier 'Animal' has already been declared

If you try to create class with same name you will `SyntaxError`. A class can be created similar to how we create function which is what illustrated in the last line of the code.

var dog = new Animal('dog', 'barks');
console.log(dog.Noise);//BARKS
console.log(dog.name);//Animal
console.log(dog.AnimalName);//DOG

Here an instance is created for the `Animal` class. If you notice dog.Noise returns ‘barks’ where Noise is the property where as dog.name is not property which we created but it returns ‘Animal’. Here class.name is the name of the class which we have not defined but automatically gets included.

console.log(Animal.length);//2

Similarly we didn’t create property ‘length‘ it is automatically included which is actually the number of parameters of class’s constructor

class ClsA{
  constructor(){
  }
}

class ClsB{
  constructor(a, b, c){    
  }
}

class ClsC{
  constructor(a, b, c, d, e){    
  }
}

console.log(ClsA.length);//0
console.log(ClsB.length);//3
console.log(ClsC.length);//5

So it is better not to name static properties with name `name` and `length`