Object Oriented vs Functional Programming with TypeScript

Learn how object-oriented 🎁 and functional ❄️ programming are awesome in their own ways. Also, get infallible answers answers to questions like "composition over inheritance?", "GIF over JIF?", "Is a hotdog a sandwich?" and more!
Special Thanks to Patrick Mullot - you rock!
Functional Cake Recipe probablydance.com/2016/02/27/...
Full Article: angularfirebase.com/lessons/o...
TS Mixins www.typescriptlang.org/docs/h...

[@TheFeriner]

Ironic naming when SuperHuman is a subclass of Human and Human is its superclass lol

[@TheVanuPhantom]

Save me, Superclass! I will, though I don't have a method to handle lasers. _Gets vaporized by a laser._

[@charliebrewer1668]

@@TheVanuPhantom 😂

[@alexismandelias]

Not really

[@amiine90]

A SuperHuman is basically a Human who finished his studies 🤣😂

[@zzzzzz1039]

It makes sense if you think of clasess as sets.

[@Fireship]

🚨 Warning 🚨. This video makes an attempt at sarcasm in the first 60 seconds. Watch the chat replay above for the full experience

[@Microphunktv-jb3kj]

If anyone interested i found this interesting video about Object Oriented Programming and why it's bad -> kzbin.info/www/bejne/h36Umoiba66inK8

[@TheDeathMongrel]

Actually the guy who created GIF says it's pronounced "JIF" and the sound comes from GEE the letter, not what it stands for, Graphics. This will be a never-ending argument... to-may-to, to-mah-to.. :)

[@nikhilshankar4190]

dude do you really have to use so many emojis ? are you gen z?

[@braindeveloperdimensional5579]

@@nikhilshankar4190 why do you have a problem? We are gen Z and we love it. If it wasn't for the emojis then I might not have subscribed.

[@Guiguiandange]

@@TheDeathMongrel yiff

[@osmankirpat]

I love how you talk fast enough so that I don't have to set the speed to 1.25.

[@khaki32]

Or too fast so that you'll need to set the speed to 0.75.

[@oleksiikryvtsov6938]

It is not about 'speaking fast' it is all about 'already prepared pieces of code' which create such an effect

[@skullteria]

I still have him at 1.5x

[@mtheos]

1.25x?? 2x and waiting for KZbin to let me go faster!

[@marisouza5060]

Gg

[@idedary]

This mostly depends on what you are doing right now. OOP is better for making closed complex systems and FP is better for universal multipurpose code. From my experience It's best to mix them, I believe it works very nice combined.

[@idedary]

@@prajjwalsharma. OOP for wrappers, FP for everything else. If your functions have the same prefix, it might be a good idea to make them methods on object instead

[@slapmyfunkybass]

What’s better, oop or procedural? Answer: yes

[@Microphunktv-jb3kj]

better : the way it gets the job done

[@Limpuls]

You use both. Inside you classes you write methods that does procedural stuff.

[@ml_serenity]

@@Limpuls What are you referring to is "imperitive" programming. OOP and procedural programming are not the same. They both are imperitive (mostly), but no, they're not the same. Just because you're writing functions doesn't mean it's a procedural or functional programming. There are certain traits specific to functional (like pure functions only, very declarative approach etc) and to the procedural (modules, procedures/functions, side-effects allowed, structure is purely imperitive). Each of us in our day to day work uses some parts of imperitive and functional programming to some degree and very few of us actually doing pure functional (Haskell etc) or pure procedural (well, pure procedural is nearly non-existent nowadays... like COBOL for example). The most commonly used nowadays is OOP imperitive programming with some functional programming on top of it to make life easier. Pure functional is VERY hard to do properly, believe me...

[@bestintentions6089]

Procedures have side effects functions do not

[@VictorMartinez-zf6dt]

functional programming is not procedural programming

[@jonatangall3715]

The metaphor about the sandwich and the hotdog was brilhant! You guys are Genius, I love this channel, thanks a lot for share it!

[@roxchkplusony]

In the compositional world, it does not matter whether a hotdog is a sandwich. You can hold it and eat it like a sandwich, and that is good enough :)

[@SaifUlIslam-db1nu]

Not a TypeScript coder ( yet ), but definitely helped me get a more flexible understanding of OOP. Thanks!

[@kevingarubba1370]

I like how you took something trivial like the hotdog question and wrapped it in with the theme and made it relevant.

[@PeepingOtterBot]

It took me almost a hour and a half to get through this while rubber ducking the ideas and taking notes to make sure I take everything in, but it made everything super understandable. Thank you!

[@Kevin192291]

Thanks for all of the videos this year!

[@Fireship]

Thank you Kevin. Ready for a much needed break, but have some cool stuff in the works for 2019.

[@victorlongon]

I have worked with React for several years. My life totally changed embracing composition. I am very happy not haven't written a loop in some years. But the one of the points where composition win over inheritance is testability, which is something I put a lot of focus into. That's my personal opinion from experience of course. If oop is more of cup of tea great. I love that we can choose

[@fenrir5211]

i had a stroke reading your comment

[@peterpandit8625]

I had a stroke reading this too

[@dertuman]

had a stroke too

[@benyosu843]

@@fenrir5211 Was wondering if that was me or his comment LOL

[@arcane3327]

Thank you so friggin much. I just wanted to pick up typescript and i found your channel. Now i have a broad idea on how typescript works and i finally understood how the idea of Interfaces actually work out. Kudos! :)

[@stephane4487]

3 years old vid that is still spot on and very informative. Thanks! 👌

[@chris94kennedy]

just saying, if the video is accurate on day 1 why would it be less accurate after 3 years

[@rebelmachine88]

Extremely clear explanation, awesome job!

[@DEVDerr]

Holy shit. That's really well-composed episode. Congrats man and goodluck in 2019!

[@miszczklasykuw3025]

lul, widzialem cie tez pod romanem

[@yamiteru4376]

Or is it a well-inherited video... hmmm?

[@misterrodger]

It's quite functional too, objectively speaking.

[@Electricity0]

@@misterrodger I extend your opinion

[@sukhmandersingh4306]

This thread is in a class of its own

[@saadabbasi2063]

Thank you so much Jeff for making these wonderful episodes. I learn something everytime. I never realised constructor(public ...) adds values automatically, i was doing those manually all the time :)

[@akatsukilevi]

Same, only discovered now and it's jaw dropping to me

[@SirJonyG]

There is always going to be a bunch of ways to solve a problem, but CERTAIN programming paradigms are better for CERTAIN problems. It's not really a gif jif thing, its more of a use the best case solution for your problem.

[@Fireship]

I agree 100% - the bigger point was that this stuff is not religious dogma. Basically every js project I've been involved in uses some combination of these paradigms.

[@hashtagPoundsign]

@@Fireship Exactly. As for the other questions: I use pronunciation gif, and a hotdog is a taco.

[@viniciusataidedealbuquerqu2837]

I think OO pretty much solidified the backend and functional the front

[@SilverishKitten]

That's exactly what this video said. But thanks for the summary I guess

[@lightspeed001]

Great vid again, what's the intro track called?

[@user-sp4fz1gw9w]

Thank you for being so clear and easy to understand programming it’s a great series tutorials that you have I don’t watch anyone else anymore

[@eduardoverdeja9596]

Thanks for the inheritance x composition view using the hotdog x sandwich debate on the last piece of the video. Really helper me grok it

[@21coltsrox]

What plugin is installed on your ide that's printing the blue results

[@SiddiqNx]

It's called Quokka.js

[@whoman7930]

@@SiddiqNx Thanks so much buddy!

[@weiiswurst]

@@SiddiqNx Thanks!

[@magne6049]

WallabyJS, from the same guys, also blew my mind: wallabyjs.com, it "runs your JavaScript and TypeScript tests immediately as you type, highlighting results in your IDE right next to your code."

[@anothermouth7077]

And for emoji it's plugin named Emoji, it's not useful but it's kinda fun

[@davidtheprogrammer]

The sarcasm at the beginning though lol.

[@mohamedkassoum1822]

I subscribed during the intro because I found the way you introduce the ideas both brilliant and funny

[@cfmvalizan7585]

1) i believe this was answered in a different video, but you can make functions private and protected in a class, correct? i don’t recall seeing that in this one. 2) how are you making it auto fill your return statement? that would be such a time saver! 3) nested classes get tricky in any language. The deepest i’ve gone and think i’d ever go is a sub class of a sub class of a class.

[@thependingdataset]

1. yes. 2. its edited not auto filling

[@sourishdutta9600]

WOW!!!! Do more videos on js like patterns and please share some link regarding this topics that you discuss, where we will get deep knowledge. Thank you so much. 😊

[@johannbauer2863]

So the last part is basically typeclass in Haskell/ traits in Rust/ interfaces in Java?

[@JoyEnergiser]

Subscribed! Love your speedy voice and love your content👍

[@kahnfatman]

OOP gets messy when there is a process of data transformation involved. Should the process be a singleton? Should static function be introduced? But wait, why class static members and not plain functions?

[@christopherwatts2499]

This was a great explanation. What would be cool is if you could do an update to this but use decorators instead of the mixin function. Probably a little more advance but would be a great step into using decorators

[@damarjati693]

What vscode extension for the console.log result appear on the side of the code? And the error too apparently

[@zzzzzzzzzzzzzzzzzz1g]

Probably quokka

[@NikosNtounas]

First of all I want to thank you for your awesome work! Do you plan to release any Machine learning content any time soon? You are a great teacher and Machine learning lacks good tutorials and resources.

[@trucane3472]

i concur

[@puneetsandal]

can we extend the functionality of existing type script classes for javascript like (Array or String) as we do in plain javascript using prototype and c# using extention methods. by add i mean adding function like str.replaceMultiple("","") for string.

[@coolbrotherf127]

I've only ever used OOP with languages like C++ and Python so the functional programming way of doing things was quite interesting to see. I'll have to try some F# code and make some simple stuff to try it out.

[@juancamilosepulveda]

Nice video! What VSCode extension are you using to get the console log output in the editor?? :)

[@NguyenNguyen-hm5ve]

You've found it yet? thanks

[@fushipunk]

hey! thanks, I see your videos from time to time and they are always really good. Question: what do you do to get the results of the console.log directly inside the editor?

[@felixrichnau]

Console.log ?

[@RogiervandenBerg]

Looks like quokkajs.com/ to me :) I'm also using that frequently to test stuff out

[@chickeninabox]

@@felixrichnau Console.log ?

[@md.azwadhasanchowdhury6823]

same question, it doesn't show in the editor like the video

[@kuzmicheff]

I watched quite a few of your episodes by now, and I really like your style! Thanks a ton for making these videos!

[@mitsu-dev]

Great video. My only gripe is the way you paste in code snippets during your explanation as it sometimes happens faster than your voice over or it happens uncommented. I know it's probably just a way for you to keep track of what's next but having something typed out while talking about it is easier for me to follow. Keep it up!

[@vizzy4652]

What extension is he using for seeing the console.log output within the IDE?

[@TheHackhell]

When you declare icon private in constructor it is already be read-only right? So we can not change it from outside of the class. If that so it is already read-only and do we have to create get icon() in class to make it read-only again?

[@AundreL]

I like the use of the triple equal operator to test equality.

[@carlosdavila9719]

Typescript is just beautiful. Sick explanation btw 👍🏽👍🏽

[@tendies]

Thank you for this explanation, it helped me allot

[@danielceballostejero4512]

What sort of plugin do you use for placing the code snippets just in time of your commentary? Let's have a chat about video editing. I'm interested in your way of presenting code

[@Fireship]

Check out the live stream in the video feed from a few months ago where I give away all these secrets

[@jacecotton4190]

What font are you using in your editor? I really like the ligaturization of the arrow notation.

[@codeonmars579]

search on vs code themes, you will find lots of it.

[@antt0023]

Fira Code

[@davidmikan7925]

wow wow wow wow, this 12 minute video helped me (coming from python) understand the core ideas of javascript better than the last 2 weeks of studying did, what the hell?!

[@jscalderons]

Ustedes son asombrosos, me gustaría que en los videos incluyan subtítulos en español :)

[@le0nz]

Por qué no aprende usted inglés? Le puede ayudar a usted mucho. O chineso tal vez sería más útil.

[@iPepper_]

Omg I am so addicted to your videos!! Even tho I don't understand 100% of it but you explain it so well it does not matter that I dont understand it :)

[@AndreyPiterov]

Thanks for the great video? but what are that green squares with an insta result?

[@FernandoLucaDeTenaSmith]

He answered before ;) quokkajs.com/docs/index.html

[@53studleyroad61]

Nice but you've got Composition vs Inheritance convoluted yourself. You're right that, they are not a choice for example a Tshirt vs Trouser where in upper body scenario you'd apply T-shirt and for lower body a trousers. But then when you go on to say that composition is another way for reusability, one could get an idea that it might be used interchangeably with inheritance which is not right. On the contrary, there might be scenarios where you'd need both. Here's an example for inheritance; Shark and Dolphin can be inherited from a base class of Fish. For composition, we can make a Fish class by composing it from a Fin and a Gill class in addition to it being inherited from Animal class.

[@mage1over137]

Functional object oriented programming of course. While individually they are both great, they are exponential better when combined correctly.

[@DrSwad]

Hello! What is the intro song that you used?

[@ary4051]

Thank you, I wish I saw this video 5 years ago.

[@rafesiriso2765]

Is being able to see the console.log output in the IDE window clever editing or a great plugin?

[@somerandomuser5155]

Quokka

[@renanenjoyshare9937]

how do you print the output in front of the statement you do line by line (extension)? Or it`s a video editing thing?

[@KamenMinkov]

I think this is Quokka.js

[@renanenjoyshare9937]

@@KamenMinkov Thanks Kamen =)

[@rubberepileptic9833]

Hi how do you show the result of console log on the same line in your ide you use?

[@ferinzz]

Can't wait until I can actually understand most of what just happened here. A few more weeks hopefully.

[@worldshaper1723]

Are you there??

[@neofilomata3254]

yeah, how did it went?

[@TheKamieniu]

What is the plugin for vscode to run console log with result ?

[@Fireship]

quokkajs.com/docs/index.html

[@WesleyOverdijk]

Theres also wallaby which is less playground (snippet) based. Same creator I think.

[@ZpeedTube]

Oh I just thought he did type it or copy paste it manually.. 😅 Awesome plugin!

[@alvinyanson]

what is your vs code theme? how did you put the emoji 2:54?

[@Kreeg0]

About the composition example... video game coders are particularly skeptical of any kind of class hierarchies. That's why the ECS system is gaining traction so much... because class hierarchies are too rigid and pretty horrible as far as reuse is concerned. They're hard to adapt to changing requirements. Even hardcore OOP people stopped arguing in favor of classical inheritance.

[@jarrettgoh8920]

Woah nice fonts and color, what editor or theme is this?

[@ArtamisBot]

Why is this video so good 💚 and why are the answers to all of the opening questions just "both".

[@danielmalo1753]

This channel has exactly the type of content that I would've wished I'd seen when I become a pro in two years time. Thank you!

[@rahulr9539]

Which plugin are you using to get realtime output of return/console.log() ?

[@alexstone691]

i think its best to mix them, some situations gets really messy without inheritances or idk strategy pattern

[@anonymoususer520]

The Stategy Pattern is just a function. The only reason it exists is because OO languages like Java didn't have first-class functions back in the day. It's not necessary in JS.

[@TheQuestion0mark]

Can we do mixing in angular? because it's not type safe and can't be compile. Does it?

[@choy211995yt]

What is the plugin using in VS code to auto display the console logs?

[@nikcekorn]

The name of the song in the intro, someone please?

[@aii-yin3800]

what editor/extension is used where the console.log result preview is automatically updated? or is it just video editing updating the console.log preview timestamp: 5:55 - 6:00

[@jasperduanemendiola3293]

Very cool vid! May I know what font are you using in your editor? '=>' looks cool haha

[@althoframdhan2265]

fira code

[@josejuliansalazarlopez724]

I'm still learning programming. I'll be coming back every few months I see how much I've learnt.

[@bity-bite]

k

[@VitorGRosa]

what is the name of the plugin used in the video?

[@truth4503]

When we update redux state inside a component, it is a side effect...is it?

[@LeFede]

will composition like this be natively available on JS or TS without that ugly boilerplate anytime soon? Great video :D

[@MCasterAnd]

What's the background song in the beginning called?

[@lloydatkinson8030]

Was this meant to be published 1st April?

[@ml_serenity]

That's why most of the modern languages are multiparadigm. Gotta choose the best tool for the task and have a very clear understanding of how OOP (imperative) and functional programming can co-exist and make life actually easier.

[@FuckUTubeCorp]

Dude, what vscode theme and extensions r u using?

[@hinerron]

Wooooowwwww...... I loved this. Thank you so much for the great content! I'm a noob programmer so I had to pause this shit like 20 times to keep up, but I prefer that to the alternative.

[@rashidanwar101]

Which music have you used in the last 20 seconds of the video??

[@jeffhappens1]

what is that extension that shows the return type from a line of code?

[@Omniwoof]

I chuckled at the intro.

[@Fireship]

That's good, I was worried people would not get my dry sense of humor

[@leandrodasilva2523]

What extension did you use to show the “console.log” result on the right side?

[@GameDesignerJDG]

He's just hitting ctrl+z to undelete the stuff he had previously written and deleted. The emojis are either copied output, or he didn't even bother and just wrote what it should output. Solid video presentation technique.

[@quadrisyedsohail500]

What are the pre-requisite for OOPs?

[@AKMTUFAZZUL]

What are the vs Code Extensions you using ?

[@ankithalder7120]

Please make videos on Good programming techniques and tips

[@CunningBard]

People debating about OOP and Functional Programming mean while python is oop and functional

[@bentekkie]

What extension are you using to get the results on the right of the code?

[@jellene4eva]

Looks like wallabyjs

[@idtyu]

Composition is well implemented in php using trait... It's so awesome

[@AlanBem]

Junhai Yang traits are just glorified copy-paste in PHP - nothing more. Composition is something different, to be honest that this video failed to explain,.

[@HackeyTube]

Really nice video , I have a question for you. What is the plugin you using to print console.log in inline of vs code?

[@harisiqbal9120]

Which theme and editor you are using

[@uncleiroh6728]

Ideally you use both functional and object oriented programming. Over the years, I have found function closures to work better for me than classes, as the 'this' keyword is just complete garbage in javascript. Of course this may be different for typescript but as of right now I do not have the time to refactor my thousands of lines of code to typescript, maybe something for in the future, but not for now.

[@MercyFromOverwatch2]

Jeff is my favourite tech youtuber!

[@VincePhoenix]

What editor are you using ?

[@presidentbanana4536]

How do you get the output of a console.log to be shown in the file?

[@albirtarsha5370]

Hey! My prettier throws away semicolons. I hate that because I switch between java and javascript programming. Am I using the wrong prettier?

[@MrAbrazildo]

1:40, I know it's meant for didactic purposes, but it was a pointless f(). 6:55, it encapsulated the logic of how it works, but it should also encapsulate the variable changing itself! If everybody can change the var, it's prone to bugs, if the project gets complex or large. 'change' should not be public too. C++ has the 'friend' keyword, which says what f()s can change everything in the class. Whenever a bug occurs, you have the list of all suspects. This is key for code safety.

[@re1konn]

Can you please compare scala.js and typescript compilers? Thanks.

[@SaifUlIslam-db1nu]

"... and if there is one thing that companies hate, is that they hate creative programming solving solutions by their programmers... " and then I read your comment below. Thank goodness.

[@feritperliare2890]

I'm experiencing a weird feeling as I've yet to work with JS so I understand and don't understand stuff cause a lot of it is the basics of other languages I did learn and some is completely out of left field for me sometimes

[@DreamInSummerAutumn]

Please demo the output will make this tutorial clear and more understandings

[@codeonmars579]

yes, but it would consume a lot of time. Can open your editor along with video to have hands on.