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...
Пікірлер: 484
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
2 жыл бұрын
@@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.
🚨 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 -> kzread.info/dash/bejne/g4Fly7eeZqzVlrA.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
4 жыл бұрын
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
I love how you talk fast enough so that I don't have to set the speed to 1.25.
@khaki32
4 жыл бұрын
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 KZread to let me go faster!
@marisouza5060
4 жыл бұрын
Gg
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
3 ай бұрын
@@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
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
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
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
10 ай бұрын
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 :)
I like how you took something trivial like the hotdog question and wrapped it in with the theme and made it relevant.
Not a TypeScript coder ( yet ), but definitely helped me get a more flexible understanding of OOP. Thanks!
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!
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! :)
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
Жыл бұрын
I had a stroke reading this too
@dertuman
10 ай бұрын
had a stroke too
@benyosu843
9 ай бұрын
@@fenrir5211 Was wondering if that was me or his comment LOL
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
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
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.
Extremely clear explanation, awesome job!
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
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?
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
I subscribed during the intro because I found the way you introduce the ideas both brilliant and funny
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
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
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.
The sarcasm at the beginning though lol.
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
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. 😊
What vscode extension for the console.log result appear on the side of the code? And the error too apparently
@zzzzzzzzzzzzzzzzzz1g
5 жыл бұрын
Probably quokka
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
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.
Subscribed! Love your speedy voice and love your content👍
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
Great vid again, what's the intro track called?
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?
What extension is he using for seeing the console.log output within the IDE?
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!
So the last part is basically typeclass in Haskell/ traits in Rust/ interfaces in Java?
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?!
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
Which plugin are you using to get realtime output of return/console.log() ?
Hello! What is the intro song that you used?
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.
What is the plugin using in VS code to auto display the console logs?
Typescript is just beautiful. Sick explanation btw 👍🏽👍🏽
I like the use of the triple equal operator to test equality.
Dude, what vscode theme and extensions r u using?
What's the background song in the beginning called?
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
Can we do mixing in angular? because it's not type safe and can't be compile. Does it?
what is your vs code theme? how did you put the emoji 2:54?
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
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.
Hi how do you show the result of console log on the same line in your ide you use?
what is that extension that shows the return type from a line of code?
Woah nice fonts and color, what editor or theme is this?
Thank you, I wish I saw this video 5 years ago.
Which music have you used in the last 20 seconds of the video??
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
Thank you for this explanation, it helped me allot
what is the name of the plugin used in the video?
What is the plugin for vscode to run console log with result ?
@Fireship
5 жыл бұрын
quokkajs.com/docs/index.html
@WesleyOverdijk
4 жыл бұрын
Theres also wallaby which is less playground (snippet) based. Same creator I think.
@ZpeedTube
4 жыл бұрын
Oh I just thought he did type it or copy paste it manually.. 😅 Awesome plugin!
What are the vs Code Extensions you using ?
Functional object oriented programming of course. While individually they are both great, they are exponential better when combined correctly.
Great video again. Thanks!
I'm still learning programming. I'll be coming back every few months I see how much I've learnt.
@bity-bite
3 жыл бұрын
k
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
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.
How do you get the output of a console.log to be shown in the file?
Which theme and editor you are using
I watched quite a few of your episodes by now, and I really like your style! Thanks a ton for making these videos!
The name of the song in the intro, someone please?
Great video, thank you!
whats that vs plugin you use for console.log?
please Anyone know what extension is he using to show console.log instantly ? 5:17
What editor are you using ?
People debating about OOP and Functional Programming mean while python is oop and functional
Good one! Thank you so much!
wait, i cannot understand the semi-colon one. is this only referring to TypeScript? I’m still trying to learn TypeScript, and my experience with PHP tells me this would fill my file with errors until i saved - which would annoy the crap out of me!
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.
When we update redux state inside a component, it is a side effect...is it?
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 :)
Why is this video so good 💚 and why are the answers to all of the opening questions just "both".
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!
Was this meant to be published 1st April?
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?
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.
Which extensions r u using?
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.
I am @1:12 but had to comment this. The intro was awesome!! epic. loved it.
What theme are you using?
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
5 жыл бұрын
I think this is Quokka.js
@renanenjoyshare9937
5 жыл бұрын
@@KamenMinkov Thanks Kamen =)
Is being able to see the console.log output in the IDE window clever editing or a great plugin?
@somerandomuser5155
3 жыл бұрын
Quokka
great stuff... cya next year!
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
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
What are the pre-requisite for OOPs?
Hey! My prettier throws away semicolons. I hate that because I switch between java and javascript programming. Am I using the wrong prettier?
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
HOW DO YOU GET THAT STABBY ARROW @ 2:34 on line 19? (I'm assuming this is VSCode...)
@xyangst
10 ай бұрын
Its some weird font
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.
What extension are you using to get the results on the right of the code?
@jellene4eva
5 жыл бұрын
Looks like wallabyjs