Classes And Modern Oop 2022 Features
ES6 Classes bring JavaScript closer to traditional OOP languages, while the 2022 updates finally add true privacy and static fields.
Modern Object-Oriented Programming in JavaScript has evolved significantly. We've seen the "Hard Parts" of the prototype chain and the new keyword. But let's be honest: adding methods to userCreator.prototype one-by-one is ugly. To make this feel like a modern programming language, ES6 introduced the class keyword.
The Essentials
- Syntactic Sugar:
classdoesn't change how JavaScript works under the hood; it just looks nicer. - Constructor: The special method that runs when you use
new. - Static Fields: Methods or data attached to the class itself, not the objects it creates.
- Private Fields (
#): A 2022 feature that finally allows for truly private data that cannot be accessed from outside the class.
ExpandES6 Class vs Underlying Reality
Solution 4: The class Keyword
A class is just a wrapper for the function-object combo we've been building.
class UserCreator {
constructor(name, score) {
this.name = name;
this.score = score;
}
increment() {
this.score++;
}
login() {
console.log("Logged in");
}
}
const user1 = new UserCreator("Denver", 3);Under the hood, JavaScript takes the constructor and makes it the main function. It takes increment and login and adds them to UserCreator.prototype. It's exactly what we did in Solution 3, but much cleaner.
2022 Extensions: Powering Up
Recently, JavaScript has added features that move it even closer to languages like Java or C++.
Static Fields
Sometimes you want a method on the Class, not on every User. For example, a method that describes what the class does.
class UserCreator {
static describe() {
console.log("This class creates user objects.");
}
}
UserCreator.describe(); // Called on the class directlyPublic & Private Fields
We can now define properties directly in the class body. By using the # symbol, we can make them Private.
class UserCreator {
loggedIn = false; // Public instance field
#score; // Private instance field
constructor(name, score) {
this.name = name;
this.#score = score;
}
getScore() {
return this.#score; // Allowed: Accessing private data from within
}
}
const user1 = new UserCreator("Denver", 3);
console.log(user1.#score); // ERROR: Private field cannot be accessed outsideThis is true encapsulation. Before #, you could always go user1.score = 1000 to cheat. Now, the data is truly protected.
Static Private Fields: Protecting the Class Itself
We can also use the # symbol on Static properties. This is data that belongs to the class but is hidden from the outside world.
A classic example from the lecture is using a private static field to limit the number of instances created.
class UserCreator {
static #count = 0; // Private static field
constructor(name, score) {
UserCreator.#count++;
if (UserCreator.#count > 2) {
throw new Error("Only two users allowed!");
}
this.name = name;
this.score = score;
}
}
const user1 = new UserCreator("Denver", 3);
const user2 = new UserCreator("Neal", 5);
const user3 = new UserCreator("Peter", 10); // ERROR: Only two users allowed!In this setup, #count is hidden. No one can go UserCreator.#count = 0 to reset the limit. It is truly private to the class logic.
The Prototypal Coat
JavaScript is a prototypal language wearing a classical coat. The class keyword and the # private fields are incredible tools for building resilient, well-structured code. They allow us to emulate the strengths of classical OOP while taking advantage of JavaScript's unique flexibility.
By understanding the Prototype Chain foundations, you are now equipped to navigate any modern framework (React, Angular, Node) with absolute clarity on what is actually happening under the hood.
Further Reading and Watching
- Video: Modern Class Features
- MDN: Classes
- Concept: Private class fields
Keep reading