DEV Community

Cover image for πŸŽ‰πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘§ JavaScript Visualized: Prototypal Inheritance

πŸŽ‰πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘§ JavaScript Visualized: Prototypal Inheritance

Lydia Hallie on January 03, 2020

Ever wondered why we can use built-in methods such as .length, .split(), .join() on our strings, arrays, or objects? We never explicitly specified ...
Collapse
 
mukeshsharma1201 profile image
Mukesh Kumar

You should really make a tutorial for creating these beautiful Gifs as well :)

Collapse
 
lydiahallie profile image
Lydia Hallie • Edited

Lmao β€œhi guys welcome to my tutorial today we start off by having caffeine-induced insomnia and getting random ideas for animated gifs using Keynote at 4AM...”. But I may actually totally do it if it can help people :)

Collapse
 
iamsahithyan profile image
Sahithyan

yes. please do it. The GIFs are awesome. "Tell us how" in a video.

Collapse
 
combizs profile image
combizs

I just auth'd to the community so I can β™₯️ the parent comment and compliment how awesome the GIF is. easy to read, clean transition and carries the point across.

Collapse
 
savokiss profile image
savokiss

Please do it!

Collapse
 
kp profile image
KP

please do it!

Collapse
 
ivopauly profile image
Ivo Pauly

Please do it!

Collapse
 
mrmagician profile image
Avnish

Please do it

Collapse
 
ejbuggs profile image
EJ-Buggs

please do it! I just created an account just so I could comment, heart, unicorn, and save this for reference. Explaining things in such a visual way in beyond helpful. Thank you.

Collapse
 
tenxswej profile image
tenxswej

Hello πŸ‘‹ Could you please tell me which tool did you use to illustrate the codes in this post?? I really need this..

Collapse
 
amartya149 profile image
Amartya Aishwarya

Would love to see that tutorial

Collapse
 
meeru7 profile image
meeru7

hi, i am a beginner.
a question: what about Getters and Setters in reference to Constructor functions?
Please refer any resource specific to this.
Regards.

Collapse
 
pflash profile image
Precious adeyinka

Yes please, lydia I was just gonna ask it will mean alot to me, thank you mukesh for asking this question ur great mate!πŸ˜‰

Collapse
 
mjmhtjain profile image
mjmhtjain

i second that

Collapse
 
draczihper profile image
draczihper

Hey @lydiahallie I'm following up on the making gifs tutorial, did you make it?πŸ˜‚

Collapse
 
sebbdk profile image
Sebastian Vargr • Edited

Prototype, no one really uses it directly but it is one of the main architectural points of the language...

Instead we now have class, because, then we can look more like C# and Java, yay for pointless uniformity!

I wonder how pop JS would have looked today if we didn’t have all the baggage from poorly researched classical languages. :)

Collapse
 
jankapunkt profile image
Jan KΓΌster

I already mentioned in another discussion that still I wonder why prototypical inheritance is rarely taught at CS or SE classes. It's a very strong paradigm and mostly misused due to misunderstanding.

Collapse
 
sebbdk profile image
Sebastian Vargr

Having used JS’s version 10-12’ish years ago days I can definitely understand why.

I had a lot of problems making it have good verbosity, I might give it a go again sometime, back then I was kind of a rookie. :)

That being said, I think it comes down to familiarity, most languages are made to resemble classical OOP and their structures, the commonly accepted truth has been that is was the most optimal way.

But if we look back, most of those features were based on popularity and not research on what would be better to manage state, have high verbosity etc.

Just look at Java literally founded on hype, but I digress, I am seeing a strong pull towards more diverse paradigms, it will be interesting to see were that takes us. :)

Collapse
 
mickmister profile image
Michael Kochell

It reminds me of how interpreters evaluate variables through different closures/scopes. If it's not in this scope, let's check the next one, and so on. Once we've checked everything up to global scope and still haven't found the variable, it is considered undefined. Very useful information.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
sebbdk profile image
Sebastian Vargr

Not really, but I can see how you could interpret it like that.

I’m not sure how to help you understand how proper debate is done in this context.

But an accusation without argumentation is a really bad way to start a conversation. :/

Honestly it pissed me off a bit.
But maybe we can turn this around?

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
lydiahallie profile image
Lydia Hallie

Okay let’s stop this discussion here or continue on hackernews lol

Thread Thread
 
sebbdk profile image
Sebastian Vargr

Actually yes, you could have asked for sources, and I could have given them.

Instead you decided to attack my intentions, which you have no way of knowing.

Please think about this before you comment more. I’ve given up my initial annoyance/insulted feelings, that was not easy, you clearly have not.

I’m not trying to keep some kind of moral high ground here, but I don’t know were to meet you if you keep this level of unwillingness to have a constructive debate.

Thread Thread
 
pablorn profile image
Pablo Reyes

In the end you married or no?

Thread Thread
 
dexygen profile image
George Jempty

Why did you necro this?

Collapse
 
vncz profile image
Vincenzo Chianese

It'd probably be a better language.

Collapse
 
emmabostian profile image
Emma Bostian ✨

You have a true gift for blogging. Keep on writing!

Collapse
 
artoodeeto profile image
aRtoo

the GOAT! suggestion for the next topic is this. hehe. thank you for this. :)

Collapse
 
lydiahallie profile image
Lydia Hallie

Good idea!

Collapse
 
ptejada profile image
Pablo Tejada
Collapse
 
adriaanbd profile image
Adriaan Beiertz

Excellent articles, excellent visuals. Here's a resource I used to drill this down, with excellent explanations and visuals as well: objectplayground.com/

Collapse
 
pencillr profile image
Richard Lenkovits

This is awesome. It made me realize again that there are a lot of things I 'just use' without understanding it. Which is bad. :D

Collapse
 
focus97 profile image
Michael Lee

Came here with a "yeah, I understand JS prototypes but a visualization could be cool" and then realized how much this exceeded expectations. Great job with not just the explanations but also the animated graphics. Nicely done indeed.

Collapse
 
umashankar profile image
umashankar

It was Yesterday, when i was working on project. Inspecting Front-end code with google chrome dev tools and this thought struck my mind who would've written all these codes,where they came from.

thepracticaldev.s3.amazonaws.com/i...

And this day i found this article explaining everything very beautifully.
Thank you!

Collapse
 
nanouchkaya profile image
Claudine

Thank you so much for this awesome tutorial! Well explained. I finally understand what all those _proto_ mean in my console πŸ˜‚

Love your gif, they're very practical for understanding.

Collapse
 
charanweb profile image
CHARAN

Best article with visualize so great.Im a begginer,Classes are very new to me . By reading this article, I understand very clearly.All the concepts are animation.Thank you so much Mam❀️❀️. It helps me a Lot

Collapse
 
bigleegeek1 profile image
bigleegeek1

Your visual JS posts are the best for newbies as they provide the pertinent info needed!

bigleegeek

Collapse
 
efti profile image
Nighty Greek

The main reason that i subscribed to this site it was just to write you here a huge Congratulations and Thanks for making so simple the whole concept of Prototyps in JS. Really you gave me a huge boost to keep reading and practising the OOP part of JS that it can be useful for React.
Your series of visualized concepts of JS is a amazing work and a quite productive way to teach very easy complicated -at least for us the beginners- concepts!
Again thank you!

Collapse
 
perez11abel profile image
perez11abel

The amount of YouTube videos and articles I've read and I could not understand prototypes. I really enjoyed Your article. Everything was super clear and concise and made the most since for me (a beginner.)

Collapse
 
ptejada profile image
Pablo Tejada

Good read. All this time I thought of JS prototype as a cool way to add functionality to objects that have already been instantiated. It all makes sense now :)

Seeing how an object is composed from a class was cool too.

Collapse
 
porobertdev profile image
Robert P.

Thank you Lydia! πŸ™‚

Very good article, easy to follow along and understand. This helped solidifying the knowledge I've previously learned before being linked here, but I've also got a rough idea on classes now. Classes seemed so weird until now πŸ˜‚

Nice gifs too!

I can't wait to read your other articles.

Collapse
 
develawyer profile image
Zamir Narro πŸ‡΅πŸ‡ͺ

You made it easy to follow and understand. Thanks Lydia! πŸ€—

Collapse
 
gamzerol profile image
Gamze Erol

it was an issue I was working on these days. Thank you, Lydia. With this animations, i completely figure out 🀩

Collapse
 
veebuv profile image
Vaibhav Namburi

Hey @lydia! Just discovered this and your twitter!

Amazing work pushing such excellent content soon after coming out of a bootcamp! Looking forward to all your future content!

subscribed

Collapse
 
tothricsaj profile image
Richard Toth

Yhea, I am fond of your articles. Could you write one about book recommendation?

Collapse
 
mukherjee96 profile image
Aritra Mukherjee

The animated diagrams help a lot! Thanks. ☺

Collapse
 
ben profile image
Ben Halpern

Wow, these are great!

Collapse
 
ericwu91 profile image
EricWu91

Awesome content! I've been constructing objects in Javascript for a while, and never thought about adding methods directly to the prototype to save memory.

Thanks for that! πŸŽ‰

Collapse
 
iggy_code profile image
Ignatius Sani

Informative article

Collapse
 
mrjaypeasmith_36 profile image
Jay

Superb! I'm learning React at the moment and this helped me understand some of the structure of Class based components!

Collapse
 
lydiahallie profile image
Lydia Hallie • Edited

That's great! Yeah it's definitely an important thing if you want to understand what's really going on when you're using React.

Collapse
 
alonedatascientist profile image
alonedatascientist

Very helpful. Thank you.

Collapse
 
zafer profile image
Zafer

Excellent! Must have been hard to prepare

Collapse
 
vvilliam5 profile image
Williams Oluwafemi • Edited

Lydia, I really admire how articulate and visual your posts are, great article as usual. Keep up the awesome work :)

Collapse
 
lydiahallie profile image
Lydia Hallie

Thanks!!

Collapse
 
hinasoftwareengineer profile image
Hina-softwareEngineer

Nice effortπŸ‘πŸ‘πŸ‘

Collapse
 
tobiasramzy profile image
Tobias

πŸ₯Ί

Collapse
 
ziizium profile image
Habdul Hazeez

Simply amazing!

Collapse
 
lydiahallie profile image
Lydia Hallie

Thank you!

Collapse
 
gizelads profile image
Gizela Delgado Soto

It is a cool article! And the visuals help a lot! πŸ˜„

Collapse
 
tanth1993 profile image
tanth1993

thank you for your sharing. now I know why we don't need to code: arr.prototype.filter(...), but arr.filter(..).

Collapse
 
berns_churches profile image
Berns Fire Death

This rules. The gifs make it exciting and clear to what is happening, your explanations are simple and fun! Thank you!

Collapse
 
mohamedhesham1 profile image
Mohamed Hesham

amazing article

Collapse
 
phatsss profile image
phatsss

i really love your Gifs lolz

Collapse
 
lightningwind profile image
David Islam

Well explained!

Collapse
 
prafulla-codes profile image
Prafulla Raichurkar

Wow! This explanation makes it crystal clear

Collapse
 
devvsakib profile image
Sakib Ahmed

great!!!!!!!!! describing was easy

Collapse
 
dvakatsiienko profile image
Dima Vakatsiienko

Hi! How do you create such a cool looking pictures with diagrams and animations?

Collapse
 
dvakatsiienko profile image
Dima Vakatsiienko

hello!
how do you create such a cool looking animations and disagrams?

Collapse
 
thorondormanwe profile image
Carlos Rangel

I came here guided by the Odin Project, and your explanation is really clear and concise. Thanks :)

Collapse
 
dennisrcao profile image
Dennis Cao

wow, thank you for this article, tried many online sources - YT , other articles. this one really fully explained it, really appreciate the gifs as well.

Collapse
 
priyadarshu profile image
Priyadarshini Chettiar

Amazing article ❀️

Collapse
 
roeyherzel profile image
Roey Herzel

Awesome article! Which node console/repl did you use for the gifs? That object explorer (expand) is super useful

Collapse
 
bjw1234 profile image
ZuoZuomu

good job!

Collapse
 
paulinegc profile image
Poplingue

Β« Daisy is cute, Jack is fearless Β» but nice article anyway.

Collapse
 
rricardocoder profile image
Ricardo el coder

Hi! Awesome article. I had a little question, how do you do that amazing animations?

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
ziizium profile image
Habdul Hazeez
Collapse
 
ruthiel profile image
Ruthiel Trevisan

Thank you so much for this lessons.
The GIF's are amazing and it is easy to understand.

Collapse
 
mukeshsharma1201 profile image
Mukesh Kumar

Can you please tell me about Function overloading and overriding in Javascript?

Collapse
 
danieltareke profile image
Daniel

great article

Collapse
 
juliosaraiva profile image
Julio Saraiva

@theavocoder, In the last example, why me there is a proto if only Functions there is a prototype?

Collapse
 
nqaze profile image
Nabil Kazi

Which tool do you use to craft these beautiful code flow and animations? Would love to hear about that.

Collapse
 
prabutdr profile image
Prabhakaran

Very good explanation with images, loves it.

Collapse
 
pablowbk profile image
Pablo

This was awesome. Recently completed the OOP section on freeCodeCamp and your article helped me cement those concepts

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Wow, superbly explained...better than my professors!

Collapse
 
lydiahallie profile image
Lydia Hallie

Lol thank you!

Collapse
 
mbougarne profile image
Mourad Bougarne

It's just a JavaScript there is no magic there, even Prototyping is a JavaScript that helps in extend, add extra custom functionality to an existing object. Am I wrong?

Collapse
 
patrykbernasiewicz profile image
Patryk Bernasiewicz

I love how you can make your articles so informative and in the same time, so super-fun to read. All the best to you!

Collapse
 
jinglescode profile image
Jingles (Hong Jing) • Edited

Great article and beautiful graphics to explain concepts! Keep writing more, we will be reading...

Collapse
 
rboesp profile image
Robert Boespflug

This is amazing thank you!!

Collapse
 
trisha114 profile image
Trisha Aguinaldo

This is such a cool article! Thank you for sharing ❀️

Collapse
 
mat3uszkek profile image
Mateusz SkrobiΕ›

"A chihuahua is (somehow... 😐) still a dog." hahaha :D Great article btw!!!! <3

Collapse
 
codingfunky profile image
CodingFunky

This really helped me understand the concepts :)

Collapse
 
surjoyday_kt profile image
Surjoyday Talukdar

"Prototypal Inheritance" this will now stick to my memory permanently. The best way one can explain. Thank You @lydiahallie

Collapse
 
endzelisp profile image
Armando Endzelis

Hi there.. Exist a difference between using:

me = Object.create(person) and,
me.prototype = Object.create(person.prototype)

Thank you for your great tutorial.

Collapse
 
adarshk profile image
Adarsh K.

πŸ™ Thank you for sharing this, very well explained.

Collapse
 
emmaindal profile image
Emma Indal

Thank you Lydia, great job, again!!

Collapse
 
lydiahallie profile image
Lydia Hallie

Thank you Emma!

Collapse
 
abdellani profile image
Mohamed ABDELLANI

You did a great job. Thank you !

Collapse
 
adrianadamz profile image
Adrian Adam Ε»ywno

You've done a beautiful job at taking a complicated topic and making it easy to digest. Your visualizations and brevity allow for this. Many thanks!