🧬 Evolving Class Syntax in JavaScript 🧬

In JavaScript, almost everything (except a few primitive types) is object — even functions!

Before ES6 (2015), JavaScript had no class keyword! 😮
Instead, classes were emulated using (constructor) functions and prototypes:

function Person(name) { 
 this.name = name; // Field 
} 
Person.prototype.greet = function() { // Method 
 return `Hello, ${this.name}`; 
};

ES6 finally introduced the class keyword, but it’s just syntactic sugar over the old prototype system. With this new class definition option, the class blocks have quite similar syntax to objects, with no commas in between the method definitions, also no function keyword is used.

Get Yousef Fatouraee’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In Java, C++, or PHP we know that classes consist of fields and methods (attributes & member functions). 🔧
Interestingly, until ES2022 (2022), JavaScript did not support defining fields directly within the class body, as we do in Java or C++. The only way to define fields was inside the constructor. Also there was no way to define private properties either! 🚫
Example:

class Person {
   constructor(name) {
     this.name = name; // Field initialization
   }
}

Even today, JavaScript still doesn’t formally support protected properties. However, thanks to ES2022, we can finally use class syntax that more closely resembles other Object Oriented Programming languages:

class Person {
   #age; // Private field

   constructor(name, age) {
     this.name = name; // Public field
     this.hashtag#age = age; // Private field assignment
   }

   greet() {
       return `Hello, my name is ${this.name} and I'm ${this.#age} years old!`;
   }
}