JavaScript The Hard Parts: Object Oriented Programming

Go under the hood of Object Oriented Programming and the prototype chain with Will, Codesmith CEO and Co-founder. You will develop a better understanding in:
- 4 approaches to object-oriented programming in JavaScript
- Prototype, _proto_ and the prototype chain
- Factories, constructors, and classes
- ES5 and ES6 approaches
0:00 - Introduction
1:01 - The OOP paradigm
4:13 - Our application: building a quiz game
6:21 - Objects store functions with their associated data
8:48 - Using dot notation to create and access properties
9:42 - Bracket notation vs dot notation
11:29 - Object.create method
13:39 - Keeping our code DRY: using a function to generate objects
15:12 - Running userCreator function
19:54 - What’s the problem with our solution?
21:48 - Optimizing our solution
22:34 - The prototype chain
19:24 - Going under the hood: the “bond” between an object and its prototype
33:43 - The “this” keyword
37:12 - Can we optimize our solution further?
39:09 - The “new” keyword
42:44 - Functions as objects
47:16 - Diagramming our third solution
1:00:01 - The global object
1:02:20 - Tradeoffs of the “new” keyword solution
1:03:23 - ES6 classes: “syntactic sugar”
1:08:49 - Tradeoffs of classes
1:09:33 - Closeout
To test your understanding of these concepts and find more videos, challenges, and solutions you can make a free account on CSX - csx.codesmith.io/
SUBSCRIBE for more! 👉tinyurl.com/codesmithsub 👈
Stay connected to our community!
Codesmith: www.codesmith.io/
Learn JavaScript for Free: csx.codesmith.io/
Free Events & Workshops: www.codesmith.io/coding-events
Follow us to stay updated!
Facebook: / codesmithhq
Instagram: / codesmithio
Twitter: / codesmith_
LinkedIn: / codesmith-llc
#codesmith #objectorientedprogramming #learntocode

[@denisskobalj7555]

Take notes teachers - this is how you teach! Well done, Will!

[@ziamaylan876]

😂

[@dhoomketu731]

Well said. This guy is ridiculously good at explaining complicated stuff.

[@JasmondWorks247]

@@dhoomketu731 wow. I guess I’ll have to jump on this video, cause this area is complicated for me

[@thefallenvalley4340]

@@dhoomketu731 the simpler one explains, the more they understand it

[@jared2224]

Wow! I'm smiling from ear to ear after watching this video because I understand all differences for object creation in js now. The best explanation I've come across as a newbie to javascript!

[@Codesmith]

Thanks Jared - have a look at the closure/callback sessions too and the async one from Michael - should be quite useful

[@timkelly9886]

I have been watching videos about object-oriented programming for 7-days straight and this is the best explanation I've come across. I can't recommend this enough and I will be watching all of Codesmith's videos on JavaScript. Thank you, Will, you're teaching style is engaging, fun and no bullshit. P.S. We need a Bootcamp like yours in Sydney, Australia!

[@Codesmith]

Thanks Tim

[@timkelly9886]

@@Codesmith awesome, I'm sure they're learning a tonne

[@mentoriii3475]

ikr, seeing how few people discovered these amazing videos I consider myself lucky i discovered them

[@nirajkhatriya2771]

Exactly 👍

[@charname2077]

Such an underrated video. I'm blown away by your explanation. This video deserves millions.

[@mstamp3291]

I learned more about the inner workings of JavaScript in this 1 hour video than I have in the last 2 weeks in the full stack bootcamp I'm currently in. Unreal! Thank you so much Will!

[@priyajitmukherjee7878]

Your teaching like peeling off a product and then putting it piece by piece... hats off

[@Codesmith]

Thanks Priyajit - we'd recommend the live workshop now

[@ManontheBroadcast]

By far, the best explanation ever, from an instructor that knows the inner-workings of JavaScript.

[@dhoomketu731]

Will is a magician. One heck of a teacher.

[@jenso413]

brilliant video, this needs way more views. I have been struggling to understand OOP for literally MONTHS, and this just made everything click. thank you, so much edit: I still come back to this video every couple of months lol. So helpful

[@TheMakeupmonika]

I truly love this guy. I finally understand what really happens under the hood. I could watch you for hours . Thank you so so much . Your students are really lucky !!!

[@priyanayak7942]

Oh my god I was under impression I new OOP in javascript I was wrong . You made it so simpler and I don't have to go back and read again and again same topic. This is really fundamental and easy to understand Thank a ton for sharing the knowledge !!

[@lizardonastick]

Will is that rare thing, a great teacher. I've watched a wide variety of instructional videos on KZbin and elsewhere and taught for some time myself. He's made understanding why and how JavaScript works so much easier.

[@unrecited]

best teacher ever - only one who finally opened my eyes to javascript and how it works even after spending years studying it never clicked until I watched his series on

[@williamdaghouz]

Will’s teaching skills are on a different level. His pedagogy is absolutely amazing.

[@nevyanamomchilova8153]

I am just amazed, not only this but all the videos I found in the Codesmith channel are just great! Very well explained, I feel lucky to have found you! Thank you a lot :) Will, your teachings, in particular, are the top, you are a natural talent in that!

[@MegaDonaldification]

Thank YOU very much. I finally understand the beautiful science of Object Oriented Programming in Javascript. Now I can disctinctively think of what I would term as data and was I will need to do for functionality. your heavenly concept has bridged and rearranged my thought processes. These was both an active and passive interview coupled with the best, second-to-known scintillating diagramming I have ever witnessed online. Thank you very very much.

[@salemalmulaifi]

By far the best video I’ve watched about the subject. Thank you.

[@whatthef911]

This is the best video on JavaScript OOP which is fundamentally different than other language OOP. I believe lecture type videos offer the best explanations. I only understood asynchronous C# after watching a detailed lecture.

[@thesuperiorman8342]

One of the best videos I watched on JavaScript. Your teaching style is superb. You're truly gifted

[@Codesmith]

Super kind 🙏

[@MegaDonaldification]

Thank you very much for showing me all I know right now as [[JavaScript The Hard Parts: Object Oriented Programming]]. The "Seven Heavens and Unearthing of Javascript OBject ORIented PROGramming" === $$$$$$ ${Data&&Functionality}

[@sideshowlol]

When a teacher actually knows what they are talking about, and when they have the necessary teaching ability, it's very apparent. Will is one of those teachers. Thank you Will and the Codesmith team for making this video available: a clear and understandable explanation of Javascript OOP, taught in a way that also makes it fun to learn. Brilliant!

[@zubairumusa9848]

Thanks Will, this helps me a lot in understanding the inner working of the JavaScript OOP. This is recommended to anyone learning JavaScript

[@justyna6134]

The best explanation ever = one one has ever so successfully peeled off OPP = excellent job Mr.CodeSmith ! And 1:01:29 = BINGO !

[@emmanuelmathew5594]

you are a great teacher . Rare and priceless skill you posses . HATSOFF

[@webmandman]

Amazing Will. I just learned more about Javascript in this hour than in years of other learning.

[@Codesmith]

That's so good to hear Daniel - thanks so much 🙏

[@emirmartinez2116]

Thank you!!! This was a great explanation.

[@mohitpassan5388]

Can't thank you enough for this crystal clear explanation! Giving a like and a comment does not feel enough for the knowledge you just passed on to me. Thank you so much!

[@Codesmith]

Thank you Mohit!! Best thing is to hear the enjoyment

[@karineghazaryan4202]

This teacher is amazing, he explains everything perfectly understandable. Huge thanks.

[@Codesmith]

Glad it was helpful

[@hugon4]

man even with this ads i love this content free on youtube thank you so much the explanation was amazing

[@PIRAKAS666]

Such an amazing teacher.

[@Pharizer]

Such an amazing teacher! Wow.

[@oladotunolufemi]

This is amazing 💪🏽. The best so far.

[@codellyson]

This is teaching and you Will are a great teacher.

[@sumairqaisar2565]

He is the Richard Feynman of coding..........Absolute skill!!!!!!

[@SZOKE19940321]

I am really impressed by this video. The lesson was full of life, the explanations were clear and spot on. So far the most comprehensive resource I have come across. Disappointed by the view & like numbers, deserves much much more. Thank you.

[@Codesmith]

Glad it was helpful 🙌 feel free to share it 😂

[@daryllmamaril4225]

Thank you! You make learning actually fun and engaging! Really enjoyed this class!!!!

[@Codesmith]

Thanks Daryll 🙏

[@jon8236]

fantastic video, by far the best explanation I have seen so far.

[@Rajakumar-yg4nc]

what a great explanation ! totally a masterpiece.

[@AmitKumar-vy3so]

one of the best that I have seen sir! I have watched most of the frontend masters you are the best...can you please take on React and optimizations

[@markovujanic]

If you just now discovered Will, consider yourself lucky, he's a legend and he's style of teaching is the way.

[@Codesmith]

Thanks Marko

[@nontakennick]

Wonderful lecture! Thank you Will!

[@Fe6b0lA]

Amazing way to break it down! 🔥

[@wbaloo1]

Amazing teaching style!

[@nsikakakpan6638]

Great tutorial video, i now full understand OOP, thanks to Codesmith KZbin channel.

[@AlexBurov-wk8my]

this one was good and informative.Thank you very much

[@NavdeepSinghEr]

Will, Thanks for the effort. It is a really enlightening lecture regarding the new keyword, _proto_, Prototype. It will certainly help me to nail down interviews.

[@Codesmith]

Amazing Navdeep - good luck with them too

[@wenli9351]

The best explanation ever!!! Thank you, Will, you are the best!

[@Codesmith]

Thanks Wen! So glad you enjoyed it - let us all know more topics you'd like to learn about

[@Hizbullla]

Brilliant work.

[@thefallenvalley4340]

phenomenal teaching Will👍

[@adrianoprovenzano8973]

Really easy to understand explanation of OOP in JS

[@Codesmith]

Happy to hear you enjoyed this one! We have a live OOP workshop this Thursday if you are interested in attending: app.codesmith.io/coding-events/javascript-the-hard-parts-classes-and-prototypes-remote-only/2984

[@surfphilosophy01]

Valuable content... Thumbs Up

[@MegaDonaldification]

Thank you very much.

[@NoudvD63]

Loud applause for this explanation! Thanks Will.

[@Codesmith]

Glad you enjoyed it!

[@BleedingFryTheHeart]

This gentleman right here is brilliant

[@ankansaha642]

Absolutely great

[@adamtoth2089]

This is pure gold..

[@stevehapp]

great explanation. I was thoroughly confused about javascript objects and proto thingiees..

[@Codesmith]

@Steve - glad it was helpful 🙏

[@fredpies]

great lesson

[@Aiducateur]

Finally, all becomes clear!

[@mentoriii3475]

Very helpful videos, I'm surprised about the low views your videos have, I consider myself lucky I found these videos

[@anthonyhaddad5630]

You definitely deserve more subs and views!

[@Codesmith]

Super kind of you Anthony - feel free to share with the world! :D

[@MEWIIE]

Great video!

[@BrantK147]

Brilliant!

[@pushpakgupta22]

I will not be one of them is going to be my motto from now. This is like elixir of OOP in js. I will share it to my friends definitely.

[@vikumravinayake1882]

Best debugger ever man. Thank you very much 👌✌🤟

[@Codesmith]

Thank you 🎉 👍

[@kandelaarjan363]

truly amazing.

[@learnings.academy]

i am big of this man, i watched your courses on frontend masters (sadly i couldn't buy course due to my financial limitation and found some where on pirated site, hope you forgive my this action so that i can get relief) great explanation, thank you so much, you deserve more then this, 💕❤

[@CharlesRyu]

LOL, I wonder if Will cares about the pirating. Happy that you got to learn though.

[@imran_ashraf]

Amazing! 🙂

[@pushpakgupta22]

21:24 "aaahhh....salmon skin roll"😂 . No jokes this is really really insightful and informative. Had to pause and cite this from friends tho😄😅

[@christopherirish2804]

Excellent.

[@Codesmith]

Thank you Christopher - glad you like the course

[@JJ-ot3ps]

this guy is amazing!

[@malvin_gaming]

This is so good

[@icebridge3940]

This is that front end DEV oxford education i never had 😭

[@arthursato8343]

Brilliant pedagogy

[@Codesmith]

Thanks Arthur 💙

[@Knochenkotzer01]

Thanks for this great content. 💥💥💥

[@Codesmith]

Thank you Marian!

[@benaliissameddine5697]

God Bless you 🧡

[@liammahoney1748]

brilliant

[@sg1894]

I wish I had a teacher as good as him

[@Codesmith]

Thank you! There's more videos that you're welcome to watch

[@user-pe9qg3hg3k]

wow this guy is great

[@pluscday2]

Excellent + 1

[@jasonvictor1798]

Dense video but fantastic!

[@sivacharan3987]

Sir,I have a doubt in oop in JavaScript.when can implement anything in JavaScript without oop also.Then what is the use of oop in JavaScript?When do We use oop in JavaScript?

[@taofeeqomotolani2311]

What a video😍😍

[@Codesmith]

Thank you Taofeeq!!!

[@MrYomantanepali]

Will Will be making more videos ? ( his explanation ) on Closures was just amazing ....

[@adamradiv]

+1. just let man curse and swear, I love it when he's super comfortable :D

[@adamradiv]

58:49 - we've achieved code. stonks

[@Codesmith]

Honored to get a 'stonks' mention

[@mustafahamid5443]

best ever

[@TheInfamousAlpha]

Under the hood of under the hood OOP

[@SuperNZY]

they(whoever might be) are always talking about the 'this' keyword in a nested object, and how the keyword is bound to the object's context. For example, how this is bounded in a nested object: const test = { google: true, studiedAt: function() { console.log(this.google) // yes }, where: { location:'L.A.', getLocation: function() { console.log(this.location); // ''L.A.' } } } BUT NO ONE says that : this is always bound to the object on the left-hand-side of the dot (LEGACY) min 36:17. GOLD

[@Nanito354]

👍 thumbs

[@MegaDonaldification]

I just realised that parameters and variables inside a function are classed as local variables. And, I thank all of your coleagues from Udemy and film crew that made this videos and others alike on this channel. I am super grateful. I have always struggled with understanding the execution context and have never done one in my whole life until I met you guys on this channel. I have always wanted to find a programmer that teach by diagramming and breaking down each line like day separate fron night, seasons from other seasons. Thank you very much. Words alone can not express how I feel and think right now since I was mesmerised and dazzled by your simplification of programming as a whole. Thank you very much. I strongly feel that i have been dipped in ecma script. Thank you.

[@het314]

Finally found the video...

[@DelannaLeonard]

😭😭😭😭I finally get it!

[@Codesmith]

🎉 Awesome!

[@logannelsen4932]

the sigh at the end lol

[@kllokoq]

Having a programmer on standby whenever new user joins social media to enter all the data manually, is the way to solve the problem of complexity

[@ibsagoalball]

reminds me of the teacher in willie wonka

[@MegaDonaldification]

Whether or not i get an IT web developer job.

[@Aaron-sy5yx]

I'm lost from the 3rd one on.

[@nickeax]

I think the code example shown on the bottom left of the screen was slightly different to the one the class was viewing. So 'functionStore' for us was actually 'userFunctionStore' for the students in the video.

[@TiffanyNg100]

Don't want to be rude, but the thumbnail caught me off guard. I thought the image on the thumbnail was a criminal because the orange shirt and the white background and how it was shot. Make me wonder why I search for oop for js and get the "news"

[@nadir15]

Good talk! But the Javascript language author is an absolute idiot! Problem with these individuals is that they haphazardly patch up a language by copying other language concepts, there by making a language inelegant. Contrast this with the design of C++, where every single new concept is studied by a committee in depth and then the new syntax of the language is very carefully selected so the concept is naturally introduced in the language in a very elegant way. Every new character and keyword introduction is debated and pondered upon greatly to ensure that it is most simple for the users of the language. Why would anyone want to confuse function and objects? They are intuitively different things by definition.

[@Codesmith]

I think that's a well put point - it's got a lot better in the past few years - dramatically more thoughtful introduction of new features etc

[@nickeax]

He had two weeks to make it!

[@brunobueno5638]

good video, but very bad audio