Creating a Class

Classes are the most fundamental part of OO programming, and yet, in the earlier versions, JavaScript did not have an explicit keyword to define classes. It was never clear if we were working with a class or a function. Serious OO programming requires more rigorous syntax and a clearer specification for creating and using classes. Modern JavaScript delivers that quite well, fortunately.

We’ll quickly revisit the classes of the past, which were masquerading as functions, so we can have a greater appreciation for the updated OO features that are now available in the language. Then we’ll dive into the facilities to create classes—language capabilities that are bound to please the OO programmer in you.

Out with the Old Way

To create a class, we used to write a constructor function. The constructor looked much like any other function in syntax. To tell the difference between a regular function and a constructor, we relied on programmers following the convention to capitalize the function name. While function car() is considered a function, function Car() is considered a constructor. That’s just the beginning of confusion. Let’s take a look at how members of a class were defined.

It was not clear how to define the members of a class. Should we write

or

or

Each of these has consequences, and having different ways to define functions placed a burden on programmers and resulted in errors.

Another problem was that there was nothing to stop someone from placing a new before a function, like new car(), or invoking a constructor as a function, like Car(). Accidentally using a piece of code in ways other than it was intended is a source of error and a huge time sink.

What about inheritance? And how do we override a method? Do we use

to call the method of the base class? Coding that is a form of cruel and unusual punishment. Not only was the syntax unclear, the approach was verbose and highly error prone.

Enough of that—out with the horrific old, in with the new, enriched, pleasant syntax.

In with the New Way

JavaScript has streamlined the syntax to create classes. The keyword class makes the intent obvious and unambiguous—you don’t have to wonder anymore if the programmer meant a function or a constructor. Let’s define a class named Car:

The keyword class followed by an optional name of the class and an empty {} is the minimum syntax to define a class. It’s that simple—no fuss, no confusion.

Even though we used the class syntax, we’re actually creating a function, one that can only be used with new. The output from the code shows this:

In spite of the fact that the class syntax defines a function—albeit reserved for creating an object—if we invoke the class as if it were a regular function, we’ll get an error:

Furthermore, unlike the function Car() syntax, class Car does not hoist the definition of Car—that is, the definition of the class is not moved to the top of the file or function. The class is available for use only after the point of definition in the execution flow. Thus, the following code is not valid:

If we refer to Car before we define it, we’ll get an error, like so:

However, if the definition comes to life before the point of reference in the flow of execution, as in the following example, then it’s all good:

In short, the new syntax makes defining a class a pleasant and effortless experience, removes the issues with incorrect use, and at the same time, keeps the semantics of defining a class the same as before.