Everything you should know about Javascript classes

class Person {
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
}

In the code example above, the class Person is defined, with the constructor, where we set name and age properties. To initialize this class, we have to use a new keyword with the class name, and parameters like it work with the object. Let’s see the code example:

var person = new Person('Peter', 25);

In the code above we initialized a class with two parameters, name= “Peter” and age= “25” and assigned it to the variable person.

What is worth to mention, although classes are functions, hoisting doesn’t work in this case. It means that every class has to be defined first and initialized next. Otherwise, the Reference Error will appear. Also, it’s good to remember that code inside the class is in ‚strict mode’. It will throw more errors and help us to avoid mistyping or syntax errors.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduceYourself() {
    return 'Hello, my name is ' + this.name;
  }
}

var person = new Person('Mark', 30);
person.introduceYourself(); // returns 'Hello, my name is Mark'

In the example above, I’ve created a new method in Person class, called  introduceYourself . This method takes this.name and returns the string. As you can see, creating method is similar to creating a function, but without using a function keyword. In the code example, you can see how the method is called.

There is also a possibility to create static methods in the class. The difference is that static methods can be accessed only from the class, not from the object created by the class. Let’s check the code example to find out how to define a static method:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  static howAreYou() {
    return 'I am okey, and you?';
  }
}

Person.howAreYou(); // returns 'I am okey, and you?';
var person = new Person('Mark', 30);
person.howAreYou(); // returns an error

To let the class know that the method we define should be static, we have to add a static keyword at the beginning of method definition. Then, you can see it will return an error if you try to call it to form the object and if you access it from class directly then it’s okay, and the result will be as expected.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  yourAge() {
    return 'I am ' + this.age;
  }
}

class Kid extends Person {
  howOldAreYou() {
    return super.yourAge() + '. I am a child';
  }

  isAdult() {
    if (this.age >= 18) {
      return true;
    } else {
      return false;
    }
  }
}

var child = new Kid('Mary', 12);
child.howOldAreYou(); // returns 'I am 12. I am a child';
child.isAdult(); // returns false;

In the code above we extended a Person class to Kid class and used yourAge() method inside Kid class howOldAreYou(), and this was used with a super keyword which enabled parent methods usage in child class. Also property this.age is used to check condition in isAdult() functions.

class Person {
  constructor(name) {
    // setter is called
    this._name = name;
  }

  get name() {
    return this._name;
  }

  set name(value) {
    this._name = value;
  }
}

var newPerson = new Person('Mary');
newPerson.name; // returns 'Mary'
newPerson.name = 'Peter';
newPerson.name; // returns 'Peter'

In the example above, we can see getter and setter for the name property. In constructor, when this._name is invoked, the setter is called to set the name. Getter and setter cannot have the same name as the property they set or get. Also if you want to use the setter to set a new property value, use it without parenthesis just like the property.

Thank you for reading.

This article was provided by our teammate Anna.