[JavaScript] Class — A Fresh Approach to Object-Oriented Programming Syntax

4 min readMar 24, 2024

We have explored how OOP (object-oriented programming) works in JavaScript. In ES6, we can also implement it with the syntactic sugar — class.

Before we start, it is worth noticing that classes in JS are different from the traditional classes in other OO languages like Java and C++.

Class in JavaScript simply uses the concept of function constructor and prototypal inheritance behind the scenes. It allows us to do the same thing as we can do with constructor functions and prototypal inheritance but using a nicer and more modern syntax.

Classes in JavaScript

Classes provide a convenient way to create and manage objects by encapsulating data and functionality within a single unit. They make code reusability, maintainability, and modularity in large-scale applications.

There are also a few things we should know about classes:

Classes cannot be hoisted. In JavaScript, we can hoist a function declaration, which means the function can be called before it’s declared. However, we cannot instantiate an object before the class is created.
Just like functions, classes are also first class citizen in JS. That means, they can be treated like any other data type, including being passed as arguments or returned from functions. Why? Because classes are just a syntactic sugar of function constructor that means they are simply a function behind the scenes.
By default, code within classes in JavaScript is executed in strict mode. This ensures that certain actions are prohibited, like using undeclared variables, which can help prevent errors and promote safer coding practices.

How to create a class?

There are two ways we can use to create a class: class declaration and class expression. Every class will have a special function called a constructor. When we instantiate objects using a class, the constructor function will be called.

In the above class, there are some elements, let’s break down each one:

name and birthYear: These are public properties of the Person class. They are initialized in the constructor by passing parameters.
nationality: This is a private variable within the constructor of the class, which is not accessible outside of the constructor.
getNationality: This is a privileged method, a method with access to private variables. Every instance of the class will have access to this method via inheritance.
calcAge: this is also a method of the class. Instances of the class will also have access to this method.

Extends and Super

The extends keyword is used in a class declaration to create a subclass (child class) that inherits from another class (a.k.a. superclass or parent class).

The super keyword is used to call the constructor of the superclass. This is necessary to initialize inherited properties or perform any setup specific to the superclass before the subclass constructor body runs.

In the above code snippet, a new class Student is declared, which also inherits from the Person class using the extends keyword.

The constructor method is used to initialize instances of the Student class, taking two parameters: name and school.

The super keyword is used to call the constructor of the parent class (Person) to initialize inherited properties.

What if the child class needs to call the methods in parent class? The answer will still be the keyword super. We can usesuper followed by the dot notation and the name of the method we want to call.

While extends and super are important for setting up inheritance and calling constructors from the parent class, JavaScript classes also inherit methods and properties through the prototype chain.

Static

The static keyword within a class is used to define static methods or properties. Quite straightforward, right?

These methods or properties belong to the class itself rather than to instances of the class. Therefore, they can be called directly on the class without the need to create an instance. In other words, instances of the class cannot use static methods or properties.