JavaScript Classes: The Great “Syntactic Sugar” Illusion

“JavaScript doesn’t actually have classes.”

It’s a controversial way to start a technical discussion, but it’s the truth.

While the class keyword arrived with ES6 in 2015, it didn’t change how JavaScript handles inheritance.

It simply put a tuxedo on a function.

Underneath that sleek, modern syntax lies a world of Prototypal Inheritance.

If you want to move from “writing code” to “understanding the engine,” you have to stop thinking in blueprints and start thinking in chains.

1. What is “Syntactic Sugar”?

In programming, “syntactic sugar” refers to syntax designed to make things easier to read or express. It makes the language “sweeter” for humans, but the computer sees the same old logic.

Take a look at these two snippets.

They are functionally identical in the eyes of the JavaScript engine:

The Modern Look (Class)

class Hero {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `I am ${this.name}`;
  }
}

The Reality (Prototype)

function Hero(name) {
  this.name = name;
}

Hero.prototype.greet = function() {
  return `I am ${this.name}`;
};

2. The Prototype Chain: Delegation, Not Cloning

In traditional Object-Oriented Programming (like Java or C++), creating an instance is like printing a house from a blueprint.

The house gets all the features of the blueprint.

In JavaScript, inheritance is delegation. When you ask an object for a method (like .greet()), JavaScript performs a search:

1. Local Search: Does the batman object have a greet property? (No)

2. The Link: It follows the hidden [[Prototype]] link to Hero.prototype.

3. The Find: Does Hero.prototype have it? (Yes!)

If it wasn’t there, it would keep climbing until it hit Object.prototype, and finally null.

3. The extends Trick

When we use class Dog extends Animal, we aren’t just copying methods. We are wiring two prototypes together.

Behind the scenes, extends does something like this:

Object.setPrototypeOf(Dog.prototype, Animal.prototype);

This creates a multi-level chain. A Dog instance can access its own methods, Dog methods, Animal methods, and Object methods—all through one continuous chain of links.

4. Why Understanding This Matters

Understanding the “sugar” allows you to do things “pure” classes can’t. You can dynamically “live-patch” your code:

const flash = new Hero("The Flash");

// Adding a method to the "Class" AFTER the object was already created
Hero.prototype.run = function() {
  console.log(`${this.name} is zooming!`);
};

flash.run(); // It works! The link stayed live.

In a static class system, you couldn’t just give a “blueprint” a new room and have all existing houses suddenly grow that room. In JavaScript, you can.

Conclusion

Classes are a fantastic tool for readability and organization. They bring safety (like mandatory super() calls and no hoisting) that the old prototype syntax lacked.

However, never forget: JavaScript is objects all the way down. When you use a class, you aren’t building a factory; you’re just building a very sophisticated chain.

Let me & my team build you a money making website/blog for your business https://bit.ly/tnrwebsite_service

Get Bluehost hosting for as little as $1.99/month (save 75%)…https://bit.ly/3C1fZd2

Best email marketing automation solution on the market! http://www.aweber.com/?373860

Build high converting sales funnels with a few simple clicks of your mouse! https://bit.ly/484YV29

Join my Patreon for one-on-one coaching and help with your coding…https://www.patreon.com/c/TyronneRatcliff

Buy me a coffee https://buymeacoffee.com/tyronneratcliff