JavaScript Classes and Instantiation Patterns: Cheat Sheet (5 patterns) — Functional, Functional-shared, Prototypal, Pseudoclassical & ES6
And with mermaids! -You’ll understand in a sec -
So, you might have heard that Classes in Javascript are “new” since ECMAScript 2015. But they’ve always been there. It’s just syntactical sugar for the old known prototype handling.
A class is basically a syntax for defining constructor functions and the prototype properties. But keep in mind -in JavaScript, classes are not the same as they are in other languages like Java. Java is class-based; JavaScript is prototype-based. For example, JavaScript prototypes can be redefined at runtime, and has immediate effect for all referring objects, while Java classes cannot be redefined in a way that affects any existing object instances. So JavaScript allows methods in an object to be redefined independently of its prototype; while methods in a Java object are tied to its class, and cannot be redefined at runtime.
Now that’s been said, let’s compare 5 ways of creating and instantiate classes in JavaScript.
Let’s have fun with creating cute mermaids!
1. Functional Pattern
Wonder how to instantiate and would give / log what? I typed it for you here:
One of the problems is that define the methods everytime; it takes memory. Let’s store them outside of it, and assign them to the object instead.
That leads us to the second pattern — functional-shared.
2. Functional-Shared Pattern
Ok! Can you tell what we changed here?
More efficient. And if you’re again wondering what would log what in that case -don’t move -I typed it for you here:
All good? Let’s move on to the third pattern.
3. Prototypal Pattern
All JavaScript objects inherit properties and methods from a prototype.
Data objects inherit from Data.prototype , Person objects inherit from Person.prototype , Array objects inherit from Array.prototype..
This prototype property is by default an empty object, for which properties and methods or even other objects can be added.
To avoid confusion on this slippery topic, I recommend you read this: https://codeburst.io/master-javascript-prototypes-inheritance-d0a9a5a75c4e .
Done? Alright. Back to our mermaids.
Let’s see what it means in practice:
You’re again wondering what would log what in that case -I saved you the effort here:
4. Pseudoclassical Pattern
A popular one, and for good reason: this code is super cool because very concise, and stuff are automatically provided for us (not as much as in ES6 though, wait for it) -but if you have doubts on how it works under the hood, then I’d advise you try implementing more of the others first, to get your head around the logic of it all behind the scenes :)
Let’s let the code do the talk:
Again, I’d rather repeat myself there — the “this” may be automatically generated for us, but it’s not a trick -under the hood, it actually perform var this = Object.create(YourObject.prototype)
So no magic here.
I saved you the time to log everything, here are some examples:
What a cool bunch of mermaids we got here! But you know what’s even cooler?
I’m not going to spoil it — go next pattern :
5. ES6!
Ok, same as for pseudoclassical -there’s no magic, no trick, it performs under the hood the same things. So if you’re not sure of how it all works, I suggest you try to implement classes the old school ways, and once you’re comfortable, you’ve earned the right to enjoy ES6 bliss -less code, more readable (aka (more)“human friendly”) — here’s how it now looks like:
Neat! Right? You use the class keyword, everything is clear, you group the properties first then the methods in a row, and you’re set. The ‘this’ is again provided without the need to type the things -that still happen under the hood, I know I repeat myself but it’s important :)
Bonus: subclassing gets super easy using this cool syntax. Again — let’s let the code talk:
Let’s say we wanted to have a mermaid on which we can decide the hair style. She shares the same properties as any other Mermaids, only -on her we add the feature to do what we want with her hair style.
Hence the keyword ‘super’ which shows what she shares with the rest of the Mermaids -default color, tailColor, and home. Now we want to add her the hair property, and the method to make it straight.
Cool! You still want to double-check it styles her hair how we want? Sure thing -
:)
Conclusion
This is a cheat sheet to create JS classes. For more information on many topics mentioned here, such as prototypal inheritance, instantiation, subclasses which were not fully covered here(just in “ES6 bonus”) etc => do more research, and come back here to have those different ways briefed all in one place ! :)
I really liked how this was originally explained at Codeworks (Barcelona), cheers Alessandro!
Happy coding, see you on @yeahgirlscode ❤
