A Short Class on ES6 Classes

The world of web development is ever expanding and often I come across issues which leave me feeling oblivious and like an amateur, despite having worked on JavaScript for over half a decade, I still find myself lacking depth in many concepts in my favorite programming language( maybe that's why its my favorite language) and ES6 classes is perhaps on such topic.

The syntactical sugar for JavaScript functions, is full of pleasant surprises, not only enables a more object oriented programming in JS but also ensure more efficient code as its similar to type JavaScript in strict mode. While in they are similar to functions in the way they hoist variables and scoping, they defer from functions in how the use a constructor and new operator to initialize instances and set context in this, and more, but in this article I wanted to specifically cover the use static and private variables which are introduces to JS through ES6 classes.

class Base {
  
   #PRIVATE_FIELD = 'private';
   static STATIC_FIELD = 'static';
   static #PRIVATE_STATIC_FIELD = 'private static';
   
   static getThis() {
   return this;
   }
   
   getThis() {
   return this;
   }
   getPrivateField() {
      return this.#PRIVATE_FIELD;
   };
   
   static getStaticField() {
   return this.STATIC_FIELD;
   }
   
   static getPrivateStaticField() {
   return this.#PRIVATE_STATIC_FIELD;
   }
}


class Derived extends Base {
  constructor() {
    super();
  }
}


instanceOfBase = new Base();
derievedBase = new Derived();

        

The prefix # is used to make a field/method private inside a class. all private fields/methods can only be accessed be public methods of the class and they cannot be accessed directly. If a derived class extends a base class the same access controls apply there as well.

console.log(instanceOfBase.PRIVATE_FIELD) //undefined

console.log(derievedBase.PRIVATE_FIELD) //undefined

console.log(instanceOfBase.getPrivateField()); //'private'

console.log(instanceOfBase.getPrivateField()) //'private'        

The prefix static is used to make variables and methods inside the class static. Any static variable/ method can only be accessed for directly the class and not from instances of the class, if we try to access, from the instance of class, the static field it throws undefined and for a static method a type error.

console.log(instanceOfBase.STATIC_FIELD) //undefined

console.log(derievedBase.STATIC_FIELD)// undefined

console.log(instanceOfBase.getStaticField()) // Uncaught TypeError: instanceOfBase.getStaticField is not a function 


//right way to access the
console.log(Base.STATIC_FIELD) // 'static'
console.log(Derived.getStaticField()) // 'static'
        

so far we have seen the access controls provide same access to private fields for base and derived classes but lets take things a level up , with private static fields/methods things get tricky.

console.log(Base.getPrivateStaticField()) // 'private static'

console.log(Derived.getPrivateStaticField// Uncaught TypeError: Cannot read private member #PRIVATE_STATIC_FIELD from an object whose class did not declare it'        

while trying to access 'getPrivateStaticField' method works well for base class they throw an exception for the derived class, this is because there is a special restriction on private static fields/ methods where only class that have defined them have access to them and not the derived classes. since the derived class context('this') is pointing to derived class when we try to call 'getPrivateStaticField' it throws a type error.

Another interesting pointer is that you can use the 'in' operator to access private fields/methods of an object. But that is for another article and another day. But if your really curious do play around with the below lines.

const check1 = 'PRIVATE_FIELD' in instanceOfBase;
const check2 = 'PRIVATE_FIELD' in Base;
console.log(check1);
console.log(check2);        

Hope this article, stirred some curiosity about ES6 classes in you. If you had any suggestions on making this article better or just want to discuss other quirky JS features, feel free to reach out me.