ES6 Lesson #8 - Classes and Methods

Prior to ES6, jаvascript did not support classes that everyone uses, in almost all programming languages. But now this problem is solved. Classes add a bit more structured code to jаvascript, sometimes called syntactic sugar.

Create Class and Constructor

All classes consist of the constructor in which the actions take place, and the methods that perform these actions. Methods and actions inside the class are separated from other jаvascript code, and it will become possible to use them only when call the class.

class demoClass {
   constructor(parmetres) {
     console.log("class created");
   }

   method_1() {
      console.log("valera what is your name?");
   }
}

let test = new demoClass();
// will run the class

console.log(test); // Will return object of class

Note that the constructor is called when the class is created. To execute and initialize a class, call it using new className()

Methods and Properties

For create any properties or call method from class, you need to use specify the keyword "this".

class demoClass {
   constructor(parmetres) {
     // Set Property
     this.property_1 = "valera";

     // Run method
     this.method_1();
   }

   method_1() {
      console.log("valera what is your name?");
      console.log(this.property_1);
   }
}

new demoClass();
demoClass.method_1();

If u need call class property or method from another place, u can refer to the class:

console.log(demoClass.property_1)


Next. The constructor can receive parameters, such as a function, and you can pass them when called. 

class testClass {
   constructor(titleBlock = 'default value') {
      this.title = titleBlock;
      console.log(this.title);
   }
}

new testClass("Is this valera?");

console.log(new testClass("sora").title)

Add static property in class after init

If you need to add some property, after the class is created, but to execute it in the class itself, it is not necessary to pass it through the parameters. This will give you dynamic opportunities.

class testClass {   
   constructor() {
      if(testClass.afterproperty == 2) {
      	console.log("afterproperty works")
      }
   }
}

testClass.afterproperty = 2
new testClass();

Static methods

Static methods are only needed for use inside the class, because you cannot call them outside of the class withot call the class. This makes it impossible to transfer the class static function when importing it, but eases the load on the browser.

class testClass {   
   constructor(title = testClass.getTitle()) {
     console.log(title)
     console.log(testClass.getTitle())
   }
   
   static getTitle() {
      return "Ye we TRUE";
   }
}


let testclass = new testClass();

console.log(testclass.getTitle()) // Will gives error

Get and Set 

Get and Set work like filters. Inside the class they are functions, but outside they are properties.

Sometimes this can be useful if you use them for tagging or as a filter. The name of the get and set functions should not coincide with the names of the properties, therefore among jаvascript developers it is customary to put the "_" sign in front of internal variables, which will notify that the property has an external method to call.

class testClass {   
   constructor() {
      this._complete = "2";
   }
   
   get complete() {
      return this._complete == 2 ? true : false
   }
   
   set complete(val) {
      this._complete = val;
   }
}

let testclass = new testClass();

console.log(testclass.complete) 
testclass.complete = 55;
console.log(testclass.complete)