Object Oriented vs Functional Programming with TypeScript

Рет қаралды 761,808

Күн бұрын

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...

Пікірлер: 487

@Fireship 5 жыл бұрын

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

@Microphunktv-jb3kj 5 жыл бұрын

If anyone interested i found this interesting video about Object Oriented Programming and why it's bad -> kzfaq.info/get/bejne/h7NhnLiWm6_TloE.html

@TheDeathMongrel 5 жыл бұрын

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 5 жыл бұрын

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

@braindeveloperdimensional5579 4 жыл бұрын

@@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 4 жыл бұрын

@@TheDeathMongrel yiff

@TheFeriner 3 жыл бұрын

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

@TheVanuPhantom 3 жыл бұрын

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

@charliebrewer1668 3 жыл бұрын

@@TheVanuPhantom 😂

@alexismandelias 2 жыл бұрын

Not really

@amiine90 2 жыл бұрын

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

@zzzzzz1039 2 жыл бұрын

It makes sense if you think of clasess as sets.

@osmankirpat 5 жыл бұрын

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

@khaki32 5 жыл бұрын

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

@oleksiikryvtsov6938 4 жыл бұрын

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

@skullteria 4 жыл бұрын

I still have him at 1.5x

@mtheos 4 жыл бұрын

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

@marisouza5060 4 жыл бұрын

@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 4 ай бұрын

@@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

@jonatangall3715 4 жыл бұрын

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 11 ай бұрын

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 :)

@slapmyfunkybass 4 жыл бұрын

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

@Microphunktv-jb3kj 4 жыл бұрын

better : the way it gets the job done

@Limpuls 4 жыл бұрын

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

@ml_serenity 4 жыл бұрын

@@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 3 жыл бұрын

Procedures have side effects functions do not

@VictorMartinez-zf6dt 3 жыл бұрын

functional programming is not procedural programming

@SirJonyG 5 жыл бұрын

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 5 жыл бұрын

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 2 жыл бұрын

@@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

@kevingarubba1370 3 жыл бұрын

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

@PeepingOtterBot 5 жыл бұрын

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!

@SaifUlIslam-db1nu 4 жыл бұрын

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

@arcane3327 2 жыл бұрын

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! :)

@victorlongon 3 жыл бұрын

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 2 жыл бұрын

i had a stroke reading your comment

@peterpandit8625 2 жыл бұрын

I had a stroke reading this too

@dertuman 11 ай бұрын

had a stroke too

@benyosu843 9 ай бұрын

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

@rebelmachine88 5 жыл бұрын

Extremely clear explanation, awesome job!

@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

@Kevin192291 5 жыл бұрын

Thanks for all of the videos this year!

@Fireship 5 жыл бұрын

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

@DEVDerr 5 жыл бұрын

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

@miszczklasykuw3025 5 жыл бұрын

lul, widzialem cie tez pod romanem

@yamiteru4376 4 жыл бұрын

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

@misterrodger 4 жыл бұрын

It's quite functional too, objectively speaking.

@Electricity0 3 жыл бұрын

@@misterrodger I extend your opinion

@sukhmandersingh4306 2 жыл бұрын

This thread is in a class of its own

@saadabbasi2063 5 жыл бұрын

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 2 жыл бұрын

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

@davidtheprogrammer 4 жыл бұрын

The sarcasm at the beginning though lol.

@eduardoverdeja9596 5 жыл бұрын

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

@stephane4487 2 жыл бұрын

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

@JoyEnergiser 4 жыл бұрын

Subscribed! Love your speedy voice and love your content👍

@mohamedkassoum1822 2 жыл бұрын

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

@sourishdutta9600 5 жыл бұрын

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. 😊

@christopherwatts2499 3 жыл бұрын

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

@NikosNtounas 5 жыл бұрын

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 5 жыл бұрын

i concur

@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.

@jarrettgoh8920 3 жыл бұрын

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

@cfmvalizan7585 3 жыл бұрын

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.

@TheEldenVox Жыл бұрын

1. yes. 2. its edited not auto filling

@davidmikan7925 3 жыл бұрын

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?!

@lightspeed001 5 жыл бұрын

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

@kahnfatman 2 жыл бұрын

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?

@Kreeg0 2 жыл бұрын

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.

@juancamilosepulveda 2 жыл бұрын

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

@NguyenNguyen-hm5ve 2 жыл бұрын

You've found it yet? thanks

@Fil-Dev 5 жыл бұрын

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!

@53studleyroad61 5 ай бұрын

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.

@carlosdavila9719 3 жыл бұрын

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

@AundreL 4 жыл бұрын

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

@kuzmicheff 2 жыл бұрын

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

@mage1over137 2 жыл бұрын

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

@iPepper_ 3 жыл бұрын

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 :)

@fushipunk 5 жыл бұрын

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 4 жыл бұрын

Console.log ?

@RogiervandenBerg 4 жыл бұрын

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

@chickeninabox 2 жыл бұрын

@@felixrichnau Console.log ?

@md.azwadhasanchowdhury6823 Жыл бұрын

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

@josejuliansalazarlopez724 4 жыл бұрын

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

@bity-bite 3 жыл бұрын

@ary4051 3 жыл бұрын

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

@vizzy4652 2 жыл бұрын

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

@danielmalo1753 4 жыл бұрын

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!

@damarjati693 5 жыл бұрын

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

@zzzzzzzzzzzzzzzzzz1g 5 жыл бұрын

Probably quokka

@johannbauer2863 5 жыл бұрын

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

@jasperduanemendiola3293 4 жыл бұрын

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

@althoframdhan2265 3 жыл бұрын

fira code

@danielceballostejero4512 5 жыл бұрын

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 5 жыл бұрын

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

@ferinzz 4 жыл бұрын

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

@worldshaper1723 3 жыл бұрын

Are you there??

@neofilomata3254 3 жыл бұрын

yeah, how did it went?

@CunningBard 2 жыл бұрын

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

@DrSwad 5 жыл бұрын

Hello! What is the intro song that you used?

@jscalderons 5 жыл бұрын

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

@le0nz 4 жыл бұрын

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

@ArtamisBot Жыл бұрын

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

@21coltsrox 4 жыл бұрын

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

@SiddiqNx 4 жыл бұрын

It's called Quokka.js

@whoman7930 3 жыл бұрын

@@SiddiqNx Thanks so much buddy!

@weiiswurst 3 жыл бұрын

@@SiddiqNx Thanks!

@magne6049 3 жыл бұрын

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 3 жыл бұрын

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

@alexstone691 4 жыл бұрын

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

@anonymoususer520 2 жыл бұрын

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.

@ml_serenity 4 жыл бұрын

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.

@uncleiroh6728 3 жыл бұрын

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.

@rubenssz 2 жыл бұрын

Please, a video about Oriented Aspect Programming !!!

@alberthoekstra 5 жыл бұрын

Great video again. Thanks!

@ankithalder7120 5 жыл бұрын

Please make videos on Good programming techniques and tips

@VincePhoenix 3 жыл бұрын

What editor are you using ?

@MCasterAnd 4 жыл бұрын

What's the background song in the beginning called?

@AndreyPiterov 5 жыл бұрын

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

@FernandoLucaDeTenaSmith 5 жыл бұрын

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

@tendies 3 жыл бұрын

Thank you for this explanation, it helped me allot

@harisiqbal9120 3 жыл бұрын

Which theme and editor you are using

@jacecotton4190 5 жыл бұрын

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

@codeonmars579 5 жыл бұрын

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

@antt0023 4 жыл бұрын

Fira Code

@AdnaanAhmedZohran 5 жыл бұрын

I am @1:12 but had to comment this. The intro was awesome!! epic. loved it.

@TheHackhell 5 жыл бұрын

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?

@cn5703 6 ай бұрын

Would've been great to see the OOP examples as FP and vice versa.

@feritperliare2890 3 жыл бұрын

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

@puneetsandal 5 жыл бұрын

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.

@VitorGRosa 2 жыл бұрын

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

@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.

@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

@its.khalid 5 жыл бұрын

great stuff... cya next year!

@lloydatkinson8030 5 жыл бұрын

Was this meant to be published 1st April?

@rashidanwar101 3 жыл бұрын

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

@LOL-hc5fv 4 жыл бұрын

functional programming in js is hard because map (for example) is often not enough to actually create a new object if each element is array or object as well, it simply references the old objects instead of creating new ones - works well with strings/bool/numbers that link by value. the deep copy via json.parse(json.stringify adds a lot of overhead computation that I've had to mutate state and just be careful not to reference old state

@chris94kennedy Жыл бұрын

does deep copy via lodash methods add less computational overhead. And does it count as antipattern or bad practice to mutate state values ?

@AveN7ers Жыл бұрын

items.map(elem => ({...elem})). Don't know about the performance though

@FuckUTubeCorp 5 жыл бұрын

Dude, what vscode theme and extensions r u using?

@hinerron 3 жыл бұрын

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.

@jonghunpark1403 3 жыл бұрын

Good one! Thank you so much!

@LeFede Жыл бұрын

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

@rahulr9539 2 жыл бұрын

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

@AKMTUFAZZUL 3 жыл бұрын

What are the vs Code Extensions you using ?

@DreamInSummerAutumn 5 жыл бұрын

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

@codeonmars579 5 жыл бұрын

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

@norbqcd 4 жыл бұрын

You can compare procedural and functional programming, but OOP is a higher abstraction level. If you compare functional with OOP is like you'd compare a leather seat with a car. Like inside the car the seat can be leather or other type, you can write procedural or functional code inside a class.

@Eagle3302PL 2 жыл бұрын

Thank you commenter from the past, that's what I was thinking but couldn't put into words.

@rafesiriso2765 3 жыл бұрын

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

@somerandomuser5155 3 жыл бұрын

Quokka

@thesanjithkumar 2 жыл бұрын

Which extensions r u using?

@HackeyTube 2 жыл бұрын

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

@rubberepileptic9833 2 жыл бұрын

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

@tvo7781 5 жыл бұрын

Great Video! Thank you.

@ewaschenko 4 жыл бұрын

What theme are you using?

@sonoftroy8572 5 жыл бұрын

I like that you communicate the content in a language based communication, but for beginners they won’t be able to follow so easily... other than that great work and thanks for the content

@idtyu 4 жыл бұрын

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

@AlanBem 4 жыл бұрын

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,.

@SaifUlIslam-db1nu 4 жыл бұрын

"... 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.

@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.