JS: Class vs Function syntax
The history
These days many front-end developers are familiar with JS classes. However, they weren’t always there. They were shipped with ECMAScript 2015 (June 2015) and were appreciated by many developers. Despite JavaScript is not purely an object-oriented language, but a multi-paradigm language, it’s still possible to apply class syntax.
It’s commonly known that classes in JavaScript are just syntactic sugar to emulate inheritance and OOP models (not everybody can agree with that because there are subtle differences). Let’s figure out how they work and how to implement the same things with different syntax.
Internals
Object instantiation
Classes in JavaScript differ from the classes of OOP languages like C++, C#, or Java. One of the main differences is that the class in JavaScript is a… function! So it’s valid to write something like:
Let’s compare object instantiation with old function syntax and class syntax.
Assigning parameters
Let’s consider an example when we need to add some initial parameters to our object. Using a function syntax we can pass parameters directly to the function, but with class syntax, we need to declare a constructor and assign parameters inside of it.
It is also possible to make a separate method and instantiate class fields inside this method.
Instance methods
Now we want our instance to have a method greet. With function syntax, we need to access the prototype object of our function-creator for every object instantiated to be able to call this method. With class syntax, it’s enough to declare a function method within the class declaration.
You might be asking what if we use arrow functions instead of function declarations? Well, there’s a tricky thing here! Let’s firstly consider an example with class syntax.
As you can see person object contains the sayName method too! However, method greet is only contained by the person’s prototype object (person.__proto__.greet).
Let’s consider the same example but now with function syntax. To achieve the same behavior with functions we need to do this:
Important notice: you cannot apply the method sayName from the example above if it is declared with arrow function syntax. More information you can find here.
Static methods and variables
There might be cases when we want to store some data across the class instances. This data should be accessible from the class directly. That’s where static methods and variables come in handy.
Let’s imagine that we want to store the count of all persons we created.
There’s a small difference for plain function. To set static properties, we need to assign them directly to the function!
You may see that there’s no big difference between these two approaches. Finally, let’s consider examples with inheritance.
Inheritance
Classes allow us easily implement one of the main OOP principles — inheritance.
Let’s consider an example when we have a Person class that accepts the only name inside the constructor and has method greet which logs name to the console.
Also, we have another class PersonWithAge which inherits the Person class and adds new property: ‘age’. Inside PersonWithAge class we want to override the greet method so as it would log the age too.
The code is understandable and clean. To do the same thing with functions we need to write a little bit more code.
Conclusion
I hope this article helped you to get a better understanding of how things work. Personally, I prefer class syntax, but you can always do the same things with functions.
