Understanding JavaScript Classes ( An ECMAScript 2015 )

Classes are basically special functions which we declare using the class keyword. We put a constructor method in a class. This is a special method. You initialize properties in the constructor method.

Defining a Class

We have two ways of defining classes in JavaScript.

  1. Class Declaration
  2. Class Expression

1. Class Declaration

To declare a class, we use the class keyword with the class name you desire as in the example below where our class name is Person.

Hoisting : Class decalarations are not hoisted. You first need to declare your class and then access or use it.

 // class declaration syntax
    class Person {
        constructor(name, country) {
            // initialize Person properties here
            this.name = name;
            this.country = country;
        }
    }

Create an object, person based on the class Person as shown below.

 // create an object, person, on the Person class
    let person = new Person(`Maye Edwin`, `Kenya`);

Now the final class Person becomes as shown below.

 // es6 class syntax
    class Person {
        constructor(name, country) {
            // initialize Person properties here
            this.name = name;
            this.country = country;
        }
    } 
    // create an object, person, on the Person class
    let person = new Person(`Maye Edwin`, `Kenya`);

Creating more objects on the class Person.

Let's add a custom method, Print(), that prints data fron the person object created on the class Person.

 // adding custom methods to a class
    class Person {
        constructor(name, country) {
            // initialize Person properties here
            this.name = name;
            this.country = country;
        }
        // create a custom method
        Print() {
            return `Name : ${this.name} Country : ${this.country}`;
        }
    } 
    // create an object, person, on the Person class
    let person = new Person(`Maye Edwin`, `Kenya`);

To call the custom method on the person's object, here is what to do.

 // calling the custom method on the person's object
    person.Print();

You can as well send parameters to the custom print method, Print(). If the parameter name is say title, then we shall have;

 // sending a parameter to Print()
     Print(title) {
        return `Title : ${title} Name : ${this.name} Country : ${this.country}`;
     }
   }

Calling the custom method on the person's object passing a parameter.

 // calling the custom method on the person's object passing a parameter
    person.Print(`CEO`);

Static Methods

We define static methods on the class and to call it, we do it on the class as well. We use the static keyword to define static methods. Read more about this on this mozilla web docs spec.

 // defining a static method
     static Employee(type) {
        return `${type}`;
     }
   }

Calling the static method on the class and passing a parameter.

 // calling the static method, 'Employee' on 'Person' and passing a parameter 'type'
    Person.Employee(`Fulltime`);
   }

Class Inheritance

We use the extends keyword to create classes which inherit methods from other classes. This is basically creating a class as a child of another class.

The class below extends the parent class, Person used in the above examples. Read more about Inheritance on this mozilla web docs spec.

 // class Salary extends class Person
    class Salary extends Person {
        constructor(name) {
            // call the super class constructor and pass in the 'name' parameter
            super(name);
        }
    } 

The syntax in classes must be written in "strict mode". This makes sure that you do not use a variable before decalring it. A good practice 👍 indeed!

2. Class Expressions

Class expressions can be named or unnamed. If named, the name of the class is local to the class body only.

 // class expression syntax
    let Person = class {
        constructor(name, country) {
            this.name = name;
            this.country = country;
        } 
        // create a custom method
        Print() {
            return `Name : ${this.name} Country : ${this.country}`;
        }
    }
    // create an object, person, on the Person class
    let person = new Person(`Maye Edwin`, `Kenya`);
    // expected output is Name : Maye Edwin Country : Kenya
    console.log(person.Print());

Learn more about JavaScript Classes in this detailed mozilla web doc.

Got any question? You wanna have a chat? Hit my inbox on twitter asap 😉