Classes in JavaScript - The Depth of ES6 Syntax and Its Relation to Prototypes

JavaScript lacked the traditional concept of "classes" as seen in languages like Java, C++, or Python for a long time. However, starting with ES6 (2015), the class syntax was introduced to create constructor-based objects in a simpler and more readable way. In this article, we'll explain how class is actually "syntactic sugar" over constructor functions, how the prototype chain works, and what to do (and not do) with classes.

---

1. Basic Class Structure

class User { constructor(name) { this.name = name; }
greet() { console.log(Hello, ${this.name}); } }

const u = new User('Ani'); u.greet(); // Hello, Ani

What happens under the hood:

• JavaScript creates a constructor function named User
• The greet() method is added to User.prototype
• New instances will inherit from this prototype

This means the above class is essentially equivalent to the following constructor function at the engine level:

function User(name) { this.name = name; }
User.prototype.greet = function() { console.log(Hello, ${this.name}); };

---

2. Classes and Prototype Inheritance

Classes implement the same prototype-based inheritance, but with more readable syntax. When we create a method inside a class, it's automatically added to its prototype.

console.log(typeof User); // function console.log(User.prototype.greet); // function greet()

Object instanceof User: the new object inherits from User.prototype.

const u = new User('Karen'); console.log(u instanceof User); // true console.log(Object.getPrototypeOf(u) === User.prototype); // true

---

3. Key Features of JavaScript Classes

Classes are not hoisted (unlike functions). They must be defined before use.

const u = new User(); // ReferenceError class User {}

Class methods are non-enumerable, unlike object literal methods.

console.log(Object.keys(User.prototype)); // []

Classes always operate in strict mode.

class Test { constructor() { undeclaredVar = 5; // ReferenceError } }

Class methods are writable and configurable, but non-enumerable:

---

4. Limitations and Common Misconceptions

• Class ≠ true OOP class. It's just syntactic sugar for constructor functions.
• Private methods are only fully supported from ES2022 onward (#methodName).
• Static methods are only accessible from the class, not instances.

class Person { static sayHi() { console.log('Hi from class'); } }
Person.sayHi(); // OK new Person().sayHi(); // TypeError

---

5. When to Use Classes

• When you have clear data structures and methods that should be shared among instances
• When you need inheritance
• When your code needs clear modular structure (in large projects)

For small or one-time objects, factory functions or object literals are often better choices.

---

Conclusion

In JavaScript, class is syntactic sugar built on top of the prototype system. While it doesn't bring a complete OOP system (despite looking similar), it provides a clean and readable API for implementing inheritance, method sharing, and static properties.

In the next part, we'll analyze inheritance using JavaScript classes, including extends, super(), and prototype chain extension.

---