Denham Coder

Javascript ES6 has come a long way to look like regular OOP languages and move away from looking functional or prototypical. This probably upsets quite a few dev’s but not me. I don’t particularly like Javascript so anytime I can get my classes looking like the classes in C# for example is all good to me.

Remember the inner workings of Javascript are still the same, it’s just the syntactic sugar that sits on top. This becomes obviously when stepping through code with a debugger. One area I want to look at are class definitions. Let’s see how ES6 has made these easier to work with.

Note: I want to keep it looking as much like C# and not the multitude of alternative ways we could use. E.g. class expressions for example. Also all my explanations are for strict mode.

Class Definition

We define a class as follows. Remember everything is lowercase in Javascript.

class myClass {

}

Notice we do not have any access modifiers; all classes, methods and properties are Public.

We instantiate the class as follows:

let myclass = new myClass();

Here we use the new ES6 let keyword to declare a variable with true block scoping.

Constructor

Let’s add a constructor. We can only have one and it’s declared using a constructor keyword rather than the name of the class. They can take zero or more arguments and are used to set default values to instance properties. Unlike C#, we cannot declare the properties outside of a method. Notice we declare the properties with the this Keyword. This enables the properties to be available outside of the method (constructor) but scoped to the class.

constructor(p1, p2) {
  this._p1 = p1;
  this._p2 = p2;
}

We instantiate the class as follows

let myclass = new myClass("value1", "value2");

Method

We can create methods that take zero or more arguments and optionally return a value. Notice there are no types declared.

myMethod(name) {
   return "Hello " + name;
}

We can call the method and assign the return value to a variable.

let myvalue = myclass.myMethod("denham");

Static Method

We have the ability to create static methods by prefixing the method with the static keyword. These are called by using the class name directly as we do in other OO languages such as C#.

static StaticMethod(name) {
   return "Hello " + name;
}

A static method does not have access to any instance members like an instance method does. So bare that in mind.

let myvalue = myClass.StaticMethod("denham");

Setter

Setters use the set prefix on a method with a single argument. Its good practise to make sure a value is passed to the setter before setting the instance property

set p1(value){
   if(value){ 
      this._p1 = value;
   }
}

Notice when we call it that although it looks like a method, we call it like we would call a setter in C#.

myclass.p1 = "value1";

Getter

Getters use the get prefix on a method with no arguments.

get p1() {
    return this._p1.toUpperCase();
}

Notice when we call it that although it looks like a method, we call it like we would call a getter in C#.

let p1Value = myclass.p1;

So this finishes up how classes are implemented syntactically which are not as feature rich as C# for example; but does make your code much easier on the eye. Of course you can still mix and match the original syntax for all you hard core Javascript coders.

In the next blog Ill show how we can perform class inheritance.