I think prototypes are hard to remember and work on (I am glad I learn programming after ES6 classes 😂) – on the other side classes are easy to work on. And, we all agree on this right?
That exact frustration is the reason ES6 classes were created in the first place.
Managing prototypes manually feels heavy on your head because you are forced to write fragmented code across different lines, whereas classes let us group everything inside a single, clean block.
Why prototypes feel hard
Though I learn a little about Prototype and it feel hard –
- Scattered code – define constructor in one place, then manually attach methods to the .prototype object elsewhere in your file
- Leaky Abstraction – to create inheritance, you have to use confusing methods like Object.create(), which forces us to manually reset the .prototype.constructor property and forgetting the step means code breaks.
- Invisible Rules: just for a second forget the new keyword while calling a prototype constructor, JS do a joke to you and won’t stop you – it will just silently break your application by corrupting global variables. WOW!!
Why Classes Feel Easy
- Centralization: The constructor, properties, methods, getters, and setters live together inside one clear set of curly braces {}.
- Readable Inheritance: Instead of complex plumbing, you just use the human-readable extends keyword.
- Built-in Safety: If you try to use a class without the new keyword, JavaScript immediately throws an error, saving you hours of debugging.
JavaScript does not have real classes.
When we all write a modern ES6 class, the JavaScript engine translates our clean code back into those exact same confusing prototype chains (but don’t look that code). Because of this, classes are often called “syntactic sugar” — a sweeter, prettier syntax wrapped around a complex engine.
You can try yourself here – https://es6-to-es5.vercel.app/ (Note: I don’t promote this website – I just found this while writing this blog)
// Parent Class
class Animal {
constructor(name) {
this.name = name;
}
eat() {
return `${this.name} is eating.`;
}
}
// Child Class inheriting from Animal
class Dog extends Animal {
constructor(name, breed) {
super(name); // Calls the parent constructor
this.breed = breed;
}
bark() {
return `${this.name} barks!`;
}
}
const myDog = new Dog("Buddy", "Golden Retriever");
Paste the above code and convert it. You’ll see something like this –
That’s it for now – I’ll learn more and post more… If you read till here you are going to be a great man of honor.
Check out these too –