Web Development, Mobile App Development

Stop The Use of Classes in Javascript to Become a Better Developer

May 21, 2020

Blogger-Picture
Prakunj Chaudhary
Software Developer
Blog-Banner

Object-oriented programming had been ruling as a standard in the field of software engineering for years. The complete development process was dominated by the concepts of inheritance, classes, encapsulation, and polymorphism. But all the things that once roared in the tech market have an expiry date, and so did the OOP paradigm.

Here, we will discuss how the classes were introduced in the first place and why the use of classes in JavaScript is considered to be bad and the adoption of other different alternatives for such cases.

Pre-ES6 CLASSES

People were using classes far earlier than this keyword was added to JavaScript. It was achieved through prototype delegation and constructor functions. Let’s understand this fact with the help of an example where we implement the same class in both the environments of ES5 as well as ES6.

We will consider a superclass Car and a subclass SportsCar that will inherit the class Car. Both of the classes possess model and make properties as well as the start method but the subclass SportsCar has a property called turbo-charged that overrides the start method.

         



function Car (make, model) // class declaration
{
  this.make = make;
  this.model = model;
}



Car.prototype.start = function() //start method
{
  console.log('vroom');
}



Car.prototype.toString = function() //overriding the toString
Method
{
  console.log('Car - ' + this.make + ' - ' + this.model);
}



function SportsCar (make, model, turbocharged) //inheritance example
{
  Car.call(this, make, model);
  this.turbocharged = turbocharged;
}


SportsCar.prototype = Object.create(Car.prototype);
SportsCar.prototype.constructor = SportsCar;


SportsCar.prototype.start = function() //overriding the start method
{
  console.log('VROOOOM');
}


// Now testing the classes
var car = new Car('Nissan', 'Sunny');
car.start(); // vroom
console.log(car.make); // Nissan



var sportsCar = new SportsCar('Subaru', 'BRZ', true)
sportsCar.start(); // VROOOOM
console.log(car.turbocharged); // true


          
        
The function of a car and sports car are constructor functions. Objects are created with the help of a new keyword and the prototype basically refers to the common behaviour of every JS object.

The object of a car is created to access its methods and properties. The start call for car results in the actions mentioned below:
  • With the key start, the JS engine asks for a value from the object car.
  • The object responds about the possession of no such value.
  • Then, the JS engine asks for a value from the car.prototype object with a key start.
  • The object returns the function ‘start’ and the JS engine starts to execute immediately.

Similarly, the make and model properties are performed and they do not require a prototype instead, they are defined directly on the car object.

ES6 CLASS KEYWORD

After several requests from the uncomfortable community of developers who were coming with the OOP background, the much-awaited class keyword was welcomed in the world of JavaScript after the ES6 release in 2015.

Since JavaScript was not designed to be the one following the object-oriented paradigm, the introduction of classes failed to prove its application. Even though everything in JS is considered to be an object including functions, it was still different from the context of C# or JAVA.

WORKING OF CLASS KEYWORD

The class keyword is nothing but acts as a cube of syntactic sugar on the top of your code. It produces the same code conceptually and serves readability or aesthetic purpose.

WHY CLASSES IN JS IS A BAD IDEA

It is known that focusing on one task at a time is more productive than jumping in between tasks. Not to say multitasking is bad but rather that it is important to not divide your focus too much. To increase productivity and scale new heights it is important one focus on one task at a time. This helps monitor progress as well.

Think From A Leaders Perspective

If the leader and the employee would have the same vision it will become increasingly difficult for the company to function. Plan properly and implement your schedule in a way that is progressive and adds value to the company.

An unplanned day is the worst thing for a company to have. This is work and spontaneity is recommended while finding solutions and not while strategizing. Answering a hundred emails is not what makes you more productive but rather what and how you grow as a human.

  • The close dealing of class constructor functions with this keyword leads to binding issues potentially. If you try your hand at passing the class method to an external routine as a callback, the same issue of binding will be introduced.
  • Due to the implementation of a class, it is difficult to optimize the code at runtime.
  • There is no proof of the existence of private variables in JavaScript which stands as the greatest advantage of classes in the first place.
  • Classes in JavaScript introduces strict hierarchies from top-to-bottom which makes it difficult to make changes. This is not acceptable to the JS applications.
  • The class-based components are likely to be deprecated explicitly, in the near future.

CONCLUSION

JavaScript has a lot more to offer than just classes. It is possible to effectively harness the proficiency of a language with better understanding and increase your productivity by adopting the robustness of a technology.

It is not an intellectual decision to blindly stick to it. The prototype delegation and JS objects can mitigate all the issues if you are ready to embrace its philosophy.


Blogger-Picture
Prakunj Chaudhary
Software Developer