Every developer doesn’t like classes in JavaScript due to the fact that they behave differently in different scenarios. Many times you might have heard complaints about classes from developers. I’ll explain how a class works in JS and how to achieve class like behaviour without using class keyword.
People from object-oriented background often get confused with classes in JS. They come with presupposition and try to relate things with each other which is a good thing to fast track our understanding, but while trying to relate the behaviour of a class in Java or C++ to JavaScript classes puts them in more confusion rather than simplifying things. I would urge you to do not corelate OOPs classes with JS classes to understand JS concepts in better way.
People from OOPs background must understand that JavaScript is a functional programming language and to understand the paradigm of functional programming language I request you to go through this article.
Everything in JavaScript is a function for example:
ES6 introduced class keyword, prior to that constructor function and a factory function were used to implement class like behaviour in JavaScript, please pay attention to the following.
Constructor Function
A constructor function always starts with the upper case later by convention and we can create an instance of a constructor function using new keyword. Due to these properties, we can achieve class like behavior in JavaScript using constructor function.
The Person function above provides almost similar functionality as of class in Java.
Every function has a special property called prototype, this property is an object and often called as prototype object. By default this prototype object has a property called constructor which points back to our function.
We can add new properties to the Class Person using prototype.
Properties added using prototype becomes automatically available to all the instances of the constructor function.
But it has one problem, Reference type properties get shared between instances.
Now that we have understood constructor function and use of the prototype, Let’s understand what is Class keyword.
Class in JavaScript
You might think this is something different than constructor functions and prototypes, well it’s not!
Class is just syntactic sugar over constructor functions, don’t believe? I thought so, let’s have a look at the below example.
This is how we write a class in JavaScript.
And this is after transpiring the code to pure JavaScript, (heard Babel? good)
So the point is, Class keyword in JavaScript is just syntactic sugar for the sake of simplicity, under the hood it uses constructor function and power of prototype.
Using classes makes your code “cleaner”, “maintainable” and easy to understand for newbies.
If you enjoyed this article, applaud and sharing is highly appreciated.
Josh Software 