Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 36

ES6 Classes: Syntactic Sugar for Prototypes

Recommended resources

Hello! In our last lesson, we delved into the mechanics of JavaScript's prototypal inheritance, exploring how objects inherit from one another through the prototype chain. You learned how constructor functions and their .prototype property work together to share methods, and how Object.create() offers a more direct way to establish these links.

Today, we'll build directly on that foundation to explore ES6 class syntax. The goal of this lesson is to describe how ES6 classes are primarily syntactic sugar over the underlying prototypal inheritance mechanism. You'll see how keywords like class, constructor, extends, and super provide a cleaner, more familiar interface for setting up the very same prototype chains we've already studied. This will connect the "old way" with the "new way," reinforcing your conceptual understanding of how JavaScript objects work.

The Idea of "Syntactic Sugar"

Before we dive in, let's clarify the term "syntactic sugar." It refers to syntax within a programming language that is designed to make things easier to read or to express, but which doesn't introduce any new fundamental functionality. It provides a "sweeter" way to write code that could be written in a more verbose, "under-the-hood" fashion.

The following short video clip humorously but accurately introduces the idea that the class keyword in JavaScript is exactly this kind of feature.

Inheritance in JavaScript - Prototypal Inheritance tutorial

The video 'Inheritance in JavaScript' by ColorCode gives a great introduction to why the class syntax was created. It sets the stage for our discussion about it being syntactic sugar.

Watch from 8:01 to 10:16. The key takeaway is that class provides a more readable and less 'weird and annoying' syntax for what JavaScript was already doing with constructor functions and prototypes.

As the video explains, even though we use the class keyword, we are still dealing with objects, functions, and prototypes underneath.

From Class to Prototypes: A Side-by-Side Translation

Let's see this "desugaring" process in action. We will look at a simple ES6 class and then see its direct equivalent written using the prototypal pattern you learned about in the last lesson.

The following video provides an excellent walkthrough of this translation, both for a base class and a derived (child) class.

JavaScript Classes vs Prototypes

Watch this video from Steve Griffith to see a direct, side-by-side comparison of class syntax and the traditional prototype syntax. This will make the 'syntactic sugar' concept tangible.

Watch from 00:34 to 12:48. Follow along as the presenter builds a Person and Employee class first using ES6 class syntax, and then implements the exact same functionality using constructor functions and prototype manipulation. Pay close attention to: How the constructor method maps directly to the constructor function. How class methods (like getDetails) are added to the function's .prototype. How extends is replicated using Object.setPrototypeOf() to link the prototypes. How the super() call inside a constructor is replicated using Parent.call(this, ...).

Let's summarize the key translations you just saw:

1. The Base Class

The ES6 class on the left is, for the most part, a cleaner syntax for the constructor function and prototype code on the right.

ES6 class Syntax Prototype-based Equivalent (ES5 style)
class Person { function Person(name, id) {
  constructor(name, id) {   this.name = name;
    this.name = name;   this.id = id;
    this.id = id; }
  }
  getDetails() { /* ... */ } Person.prototype.getDetails = function() { /* ... */ };
}
const bob = new Person('Bob', 123); const bob = new Person('Bob', 123);

The class syntax neatly bundles the constructor logic and the shared methods (which live on the prototype) into a single block.

JavaScript Prototypal Inheritance Diagram
This diagram shows the structure that is being built by both syntaxes. The `class` keyword is simply a more convenient way to create the constructor function (`Human`), its prototype object (`Human.prototype`), and ensure that instances (`steve`) are correctly linked via their `[[Prototype]]` property.

2. The Derived Class (Inheritance)

Inheritance with extends and super also desugars into established prototypal patterns.

ES6 class Syntax Prototype-based Equivalent (ES6+ helpers)
class Employee extends Person { function Employee(name, id, salary) {
  constructor(name, id, salary) {   Person.call(this, name, id); // super()
    super(name, id);   this.salary = salary;
    this.salary = salary; }
  }
} Object.setPrototypeOf(Employee.prototype, Person.prototype); // extends

As you saw in the video and your previous lesson, extends sets up the prototype chain for method inheritance, and super() calls the parent constructor to initialize the parent part of the instance.

More Than Just Sugar: Key Differences & Improvements

So, is the class keyword just syntactic sugar? The common answer is "yes, mostly," but for a developer who wants to understand the internals, the nuances are important. The class syntax also enforces a stricter, safer set of rules than the traditional constructor function pattern.

Object-oriented JavaScript: A Deep Dive into ES6 Classes

The article 'Object-oriented JavaScript: A Deep Dive into ES6 Classes' provides a concise section that clarifies this point. Let's read it to understand where class provides more than just a nicer syntax.

Read the section 'More than Sugar' and the first question in the FAQ. Focus on the two key improvements mentioned: how static properties are inherited and how built-in objects like Array can be properly subclassed, which were difficult or impossible in ES5.

The article highlights some crucial differences. Let's break down the most important ones:

  1. Classes are not Hoisted: Unlike function declarations, you cannot use a class before it is declared. The JavaScript engine treats class declarations similarly to let or const, creating a "Temporal Dead Zone" (TDZ).
  2. Strict Mode: The code inside a class body (both in the constructor and in its methods) is automatically in strict mode. This helps catch common errors and ensures a more robust execution environment.
  3. Constructors Must Be Called with new: You cannot call a class constructor like a regular function. Attempting Person() instead of new Person() will throw a TypeError. This prevents a common and confusing bug where this would otherwise default to the global object.
  4. Methods are Non-Enumerable: Methods defined within a class body are created on the prototype, but their enumerable property descriptor is set to false. This means they won't show up in for...in loops, which is typically the desired behavior. With ES5 prototypes, you had to use Object.defineProperty to achieve this.
  5. True Static Inheritance: As the SitePoint article mentions, the extends keyword also sets up the prototype chain between the constructor functions themselves (e.g., Object.setPrototypeOf(Employee, Person)). This allows for the proper inheritance of static methods, a feature that was cumbersome to replicate in ES5.

So, while class doesn't introduce a new object model to JavaScript, it packages the existing prototypal model into a more robust, less error-prone, and more readable format.

For an exhaustive, line-by-line "desugaring" of what class and extends do, the top answer on this Stack Overflow question is a fantastic deep dive. You don't need to read it all, but it serves as an excellent reference for the level of detail involved.
Reference: Are ES6 classes just syntactic sugar? - Stack Overflow (Resource LINK)

Conclusion

In this lesson, we've connected the dots between JavaScript's foundational prototypal inheritance and the modern class syntax.

Key Takeaways:

  • Primary Syntactic Sugar: The class, constructor, extends, and super keywords are primarily a cleaner syntax for creating constructor functions and managing their prototype chains.
  • Desugaring: An ES6 class declaration can be mentally translated into a constructor function, with its methods being assigned to the function's .prototype.
  • More Than Sugar: class syntax isn't just about looks; it introduces stricter rules and improvements that make object-oriented programming in JavaScript safer and more powerful. These include blocking hoisting, enforcing strict mode, requiring the new keyword, and providing true static method inheritance.
  • No New Model: ES6 classes do not introduce classical inheritance to JavaScript. They are an abstraction layer over the same prototypal inheritance model that has always been at the language's core.

What's Next?

Having solidified your understanding of JavaScript's object model, we are now ready to switch gears to another fundamental pillar of the language: asynchronicity. In the next module, we will begin our exploration of the JavaScript concurrency model, starting with its key components: the call stack, the event loop, and task queues.