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 https://probablydance.com/2016/02/27/functional-programming-is-not-popular-because-it-is-weird/

Full Article: https://angularfirebase.com/lessons/object-oriented-programming-with-typescript/

TS Mixins https://www.typescriptlang.org/docs/handbook/mixins.html
2024-02-04T07:06:07.505Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
f5eda1e8-5eed-4290-bd52-456a56dc9a77
f7ae76e07e302ad1e15444a5ace445b540e3ebad94924be1abde0cc2c5e81bef
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Which is better, object oriented or functional programming?
How about composition or inheritance?
Semicolons or no semicolons?
Is it pronounced gif or gif?
And is a hot dog a sandwich?
Today, you'll get all the answers and I encourage you to just accept these as the facts and not try out anything on your own.
There's only one correct way to write code, and if there's one thing that employers hate, it's creative problem solving skills from their programmers.
If you're new here, like and subscribe.
Scribe and congrats to Alexander Torres.
You're the random t shirt winner from last week.
And a huge thank you to Patrick Miu Lou.
He contributed to the content of this video and has helped out 100 if not 1,000 of developers on our Slack channel?
So make sure to spam him with a thank you message.
Let's go ahead and take care of the easy is first.
When writing your code, you should leave semicolons out and then have Prettier add them back when you save the file.
GIF stands for graphics interchange format, so it's obviously pronounced GIF following the first word in the acronym itself?
Is a hot dog a sandwich?
Well, that one's a little more complex, so let's wait till the end of the video.
How about object oriented versus functional programming?
If you guessed object oriented is better, you're completely wrong.
And if you guessed functional programming, you're way off base.
Debating programming paradigms at this level is like debating art.
There is always more than one way to solve a problem especially in JavaScript, and it's great to debate these things but there are no absolutes.
There's going to be a trade off for every decision that you make.
Let's start by taking a look at some functional TypeScript code.
The most important concept in functional programming is the Concept of Pure Functions.
This means that the output of your function should only depend on its inputs.
For example, here we have a function called ToString which takes a value as its argument and then returns that value formatted as a string.
We can make this an impure function by mutating the number variable directly.
Klee?
This would be considered a side effect and functional code should produce no side effects.
In addition, they should not rely on any outside value to produce a return value.
Pure functions are easier to test and also easier to reason about because you don't have to think about anything happening outside of the function itself.
Another core principle of functional programming is immutable data.
Functional code is stateless, meaning that when data is created, it is never mutated.
For example, we can simulate this in JavaScript by using object freeze on this array of numbers.
We could hack around this, but it prevents us from doing things like array push, Which you wouldn't do in a functional program.
So, obviously, our data has to change somehow if we have a dynamic software application.
So you'll often be passing functions as arguments to other functions.
So here we have a typical first order function, which takes a value and returns a different value.
In this case, just appending an emoji to a string.
Now a higher order function is one that either takes a function as an argument or returns a function itself.
JavaScript has some really nice built in higher order functions for arrays such as map.
So instead of using a for loop, we can just pass in our function to map Which will run our add emoji function on every element in the array and transform the value.
So that gives us a very concise and elegant way to transform the values in an array.
Another cool thing we can do is create functions that return functions.
This is very useful when you wanna start with some base functionality and then extend it with some dynamic data.
Let's imagine we're building a weather app, and we need to append strings with certain emojis.
We'll start with a base function called append emoji and then use it to compose more complex functions?
So in this case, the inner function takes both of the arguments and adds them together.
We can use this to create more specialized functions that point to to pick emoji?
For example, we'll have a rain function and a sun function.
Then we can call this function with the string that we want the emoji appended to.
The end result is some concise and readable code that doesn't rely on any shared state that would make it difficult to test.
That's about as basic as it gets for functional programming?
And things get a lot more interesting when you have asynchronous data and side effects and things like that.
So now let's go ahead and compare this to object oriented programming.
The best comparison I've seen is to a baking recipe.
I'll have a link to that in the description.
The object oriented or imperative approach on the top gives you a clear set of Statements to follow to get the cake to its final state.
The functional or declarative approach on the bottom describes the state and logic involved, but has no opinion on the actual control Well, now let's go ahead and look at some object oriented TypeScript code.
The first thing we'll do is define a class, which itself doesn't really do anything, Rather, it serves as a blueprint for instantiating objects.
So an instance of this emoji class will be an object with an icon property.
Then the constructor method is special because it runs once when the object is instantiated.
We'll pass an argument to the constructor with the actual emoji icon And then we'll set that equal to the property on this object.
And the emoji class works similar to a function, but we use the new keyword in front of it.
And as you can see when we do that it creates an emoji object with an icon property of sun.
In TypeScript, there's an easier way to do this because we have the concept of public and private members?
So if we use the public keyword in front of the argument in the constructor, TypeScript will automatically know to set that as a public property on each object.
When you declare a property or method public, it means it's available to the class itself and any instances of the class.
That can be both a good and a bad thing.
For example, we can simply change the icon by just mutating the value on this object.
On one hand, it's very convenient, but on the other hand, if you have a lot Code doing this, it can be hard to keep track of and hard to test effectively.
I'd like to point out at this point that classes in JavaScript are actually just syntactic sugar for functions and prototypal inheritance?
If we can pile our code to e s 3, you can see that it's just a function with a closure that prevents the local variables from bleeding out into the global scope?
That's just something to be aware of, but TypeScript also provides some tools for us To improve the tooling that we have when writing object oriented code.
For example, we can mark members as private so that they can only be used inside of this class definition.
This means that we can separate our public API from internal logic for this class.
For example, if we wanna make this icon value immutable, we can make it private.
Then we'll define a getter so the user can read the value but not change the value.
Another important thing to point out here is that class instances can have their own internal state.
Let's imagine we have a button where the user can toggle the emoji and maybe go back and forth between different states.
This is a really simple thing to implement in object oriented programming.
We'll add another private property to this class called previous and then use a getter to retrieve that value.
Then we'll define a change method which will mutate the actual icon value on this instance?
When that happens, we'll first change the previous value to the current icon and then update the current icon to the new value.
On the first console log, we get the sun icon and undefined.
And if we mutate the state a couple times, you can see that our internal values on this class instance have changed.
So the end result is that we have a class that's encapsulated all the logic for how an emoji should work.
And with TypeScript, we automatically have an interface and documentation for this class.
Another cool thing you can do with classes is define static methods.
The unique thing about a static method is that it's on the class itself and not an instance of a class.
So we'll just go ahead and define a static method here, which itself is actually a pure function, and its job is simply to add 1 to the input argument.
The cool thing is that we can now use the emoji class as a namespace to run this function.
Now we're going to switch gears and talk about composition versus inheritance for code reusability?
This is an area where people tend to get very strong opinions and the actual definition of composition tends to be a little convoluted.
But the whole thing really just boils down to this.
With inheritance, you start with a larger base class then have child classes inherit all of this functionality and override or Extend it with whatever custom behaviors that they need.
Composition, on the other hand, breaks apart the interfaces and logic into a lot of small pieces, then builds up larger functions or objects by combining these pieces together?
Let's go ahead and take a look at an example of inheritance.
We start with the class of human that has a public property of name and has the ability to say hi.
But what if we have a lot of other objects in our program that Similar but implement slightly different features based on what they're designed to do?
For example, in a video game, you might have a human character And then a superhuman character that has all of the human abilities but with a little something extra.
In TypeScript, we can simply inherit All of the functionality from the human class by saying superhuman extends human.
We do have an argument in the constructor, so we'll also need to add that to the constructor without private or public?
Then we call super, which will execute the code in the constructor of the parent class, which in our case is just initializing this name property.
At this point, we'll go ahead and define an additional method called superpower.
Then we'll create an instance of the superhuman class, and what you'll see here is that it Has the superpower method, whereas the regular human does not, but the superhuman can still call all the methods that were defined in the parent class.
Inheritance can be great in the right situation, but you want to avoid creating really deeply nested classes because it becomes very hard to debug when things go wrong somewhere in the middle.
As an alternative, we can use composition and there are actually multiple different ways we can apply this pattern.
In Angular, we can do it by injecting services into our components And also at the template level by creating directives.
I'm not going to cover that here, but it's just one of the awesome things about Angular that I've covered in many other videos.
Another alternative is to concatenate objects together which I've seen covered in several different articles on the web.
The idea here is that you decouple your properties or behaviors into objects or functions that return objects?
We can then merge all these objects together into a final function that does everything that we need it to.
This is usually referred to as a mixin pattern and it's just a certain type of multiple inheritance.
So the terminology between composition and inheritance is sort of convoluted.
In any case, this mixin pattern can be very powerful.
But in its current form, we lose all of the ergonomics of class based object oriented programming.
That might be a good or bad thing depending on who you ask, but TypeScript actually gives us the flexibility to use mixins in a class based format.
First, I'm going to pull in this really ugly function from the TypeScript docs, which we'll see in use here in just a minute.
From there, I'm going to create a couple of small behavior classes that define the individual behaviors instead of trying to encapsulate everything in a single class?
So these classes are more concerned with what something does instead of what something is.
Now in the superhero class, there's a very subtle difference from the previous example.
Instead of extending the class, we are going to implement multiple classes.
When you implement something, you're only concerned about its interface and not its underlying code.
It's the apply mixins function that we defined at the very beginning that will Actually, take these interfaces and apply their code to this class.
That does leave us with some extra boilerplate code where we have to actually type the return values on the methods for this class?
In this case, we have 2 methods, say hi and superpower, both of which return strings.
And the final step is the requirement to call that apply mixins function with the base class as the first argument and the mixed in classes as the second argument?
Hey.
Now, Now, we can finally answer the question, is a hot dog a sandwich?
If you use inheritance, then you're going to have to inherit from some base sandwich class, which means it is a sandwich.
But, if you use composition, then you can just pull in the hot dog and the bun, meaning that it is not a sandwich.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe.
And, I just wanna say thank you to everybody for an amazing 2018.
I'm super grateful for the community around this channel, and I look forward to pushing things even further in 2019.
I'm going to be taking a short break for the next couple weeks and then I have a video planned for January 1st.
So stay tuned for that.
I hope everybody has an awesome end of the year and you can still find me On Slack if you have any questions or need anything at all.
Thanks for watching and I'll talk to you soon.

Speaker 0: Which is better, object oriented or functional programming? How about composition or inheritance? Semicolons or no semicolons? Is it pronounced gif or gif? And is a hot dog a sandwich?

Today, you'll get all the answers and I encourage you to just accept these as the facts and not try out anything on your own. There's only one correct way to write code, and if there's one thing that employers hate, it's creative problem solving skills from their programmers. If you're new here, like and subscribe. Scribe and congrats to Alexander Torres. You're the random t shirt winner from last week.

And a huge thank you to Patrick Miu Lou. He contributed to the content of this video and has helped out 100 if not 1,000 of developers on our Slack channel? So make sure to spam him with a thank you message. Let's go ahead and take care of the easy is first. When writing your code, you should leave semicolons out and then have Prettier add them back when you save the file.

GIF stands for graphics interchange format, so it's obviously pronounced GIF following the first word in the acronym itself? Is a hot dog a sandwich? Well, that one's a little more complex, so let's wait till the end of the video. How about object oriented versus functional programming? If you guessed object oriented is better, you're completely wrong.

And if you guessed functional programming, you're way off base. Debating programming paradigms at this level is like debating art. There is always more than one way to solve a problem especially in JavaScript, and it's great to debate these things but there are no absolutes. There's going to be a trade off for every decision that you make. Let's start by taking a look at some functional TypeScript code.

The most important concept in functional programming is the Concept of Pure Functions. This means that the output of your function should only depend on its inputs. For example, here we have a function called ToString which takes a value as its argument and then returns that value formatted as a string. We can make this an impure function by mutating the number variable directly. Klee?

This would be considered a side effect and functional code should produce no side effects. In addition, they should not rely on any outside value to produce a return value. Pure functions are easier to test and also easier to reason about because you don't have to think about anything happening outside of the function itself. Another core principle of functional programming is immutable data. Functional code is stateless, meaning that when data is created, it is never mutated.

For example, we can simulate this in JavaScript by using object freeze on this array of numbers. We could hack around this, but it prevents us from doing things like array push, Which you wouldn't do in a functional program. So, obviously, our data has to change somehow if we have a dynamic software application. So you'll often be passing functions as arguments to other functions. So here we have a typical first order function, which takes a value and returns a different value.

In this case, just appending an emoji to a string. Now a higher order function is one that either takes a function as an argument or returns a function itself. JavaScript has some really nice built in higher order functions for arrays such as map. So instead of using a for loop, we can just pass in our function to map Which will run our add emoji function on every element in the array and transform the value. So that gives us a very concise and elegant way to transform the values in an array.

Another cool thing we can do is create functions that return functions. This is very useful when you wanna start with some base functionality and then extend it with some dynamic data. Let's imagine we're building a weather app, and we need to append strings with certain emojis. We'll start with a base function called append emoji and then use it to compose more complex functions? So in this case, the inner function takes both of the arguments and adds them together.

We can use this to create more specialized functions that point to to pick emoji? For example, we'll have a rain function and a sun function. Then we can call this function with the string that we want the emoji appended to. The end result is some concise and readable code that doesn't rely on any shared state that would make it difficult to test. That's about as basic as it gets for functional programming?

And things get a lot more interesting when you have asynchronous data and side effects and things like that. So now let's go ahead and compare this to object oriented programming. The best comparison I've seen is to a baking recipe. I'll have a link to that in the description. The object oriented or imperative approach on the top gives you a clear set of Statements to follow to get the cake to its final state.

The functional or declarative approach on the bottom describes the state and logic involved, but has no opinion on the actual control Well, now let's go ahead and look at some object oriented TypeScript code. The first thing we'll do is define a class, which itself doesn't really do anything, Rather, it serves as a blueprint for instantiating objects. So an instance of this emoji class will be an object with an icon property. Then the constructor method is special because it runs once when the object is instantiated. We'll pass an argument to the constructor with the actual emoji icon And then we'll set that equal to the property on this object.

And the emoji class works similar to a function, but we use the new keyword in front of it. And as you can see when we do that it creates an emoji object with an icon property of sun. In TypeScript, there's an easier way to do this because we have the concept of public and private members? So if we use the public keyword in front of the argument in the constructor, TypeScript will automatically know to set that as a public property on each object. When you declare a property or method public, it means it's available to the class itself and any instances of the class.

That can be both a good and a bad thing. For example, we can simply change the icon by just mutating the value on this object. On one hand, it's very convenient, but on the other hand, if you have a lot Code doing this, it can be hard to keep track of and hard to test effectively. I'd like to point out at this point that classes in JavaScript are actually just syntactic sugar for functions and prototypal inheritance? If we can pile our code to e s 3, you can see that it's just a function with a closure that prevents the local variables from bleeding out into the global scope?

That's just something to be aware of, but TypeScript also provides some tools for us To improve the tooling that we have when writing object oriented code. For example, we can mark members as private so that they can only be used inside of this class definition. This means that we can separate our public API from internal logic for this class. For example, if we wanna make this icon value immutable, we can make it private. Then we'll define a getter so the user can read the value but not change the value.

Another important thing to point out here is that class instances can have their own internal state. Let's imagine we have a button where the user can toggle the emoji and maybe go back and forth between different states. This is a really simple thing to implement in object oriented programming. We'll add another private property to this class called previous and then use a getter to retrieve that value. Then we'll define a change method which will mutate the actual icon value on this instance?

When that happens, we'll first change the previous value to the current icon and then update the current icon to the new value. On the first console log, we get the sun icon and undefined. And if we mutate the state a couple times, you can see that our internal values on this class instance have changed. So the end result is that we have a class that's encapsulated all the logic for how an emoji should work. And with TypeScript, we automatically have an interface and documentation for this class.

Another cool thing you can do with classes is define static methods. The unique thing about a static method is that it's on the class itself and not an instance of a class. So we'll just go ahead and define a static method here, which itself is actually a pure function, and its job is simply to add 1 to the input argument. The cool thing is that we can now use the emoji class as a namespace to run this function. Now we're going to switch gears and talk about composition versus inheritance for code reusability?

This is an area where people tend to get very strong opinions and the actual definition of composition tends to be a little convoluted. But the whole thing really just boils down to this. With inheritance, you start with a larger base class then have child classes inherit all of this functionality and override or Extend it with whatever custom behaviors that they need. Composition, on the other hand, breaks apart the interfaces and logic into a lot of small pieces, then builds up larger functions or objects by combining these pieces together? Let's go ahead and take a look at an example of inheritance.

We start with the class of human that has a public property of name and has the ability to say hi. But what if we have a lot of other objects in our program that Similar but implement slightly different features based on what they're designed to do? For example, in a video game, you might have a human character And then a superhuman character that has all of the human abilities but with a little something extra. In TypeScript, we can simply inherit All of the functionality from the human class by saying superhuman extends human. We do have an argument in the constructor, so we'll also need to add that to the constructor without private or public?

Then we call super, which will execute the code in the constructor of the parent class, which in our case is just initializing this name property. At this point, we'll go ahead and define an additional method called superpower. Then we'll create an instance of the superhuman class, and what you'll see here is that it Has the superpower method, whereas the regular human does not, but the superhuman can still call all the methods that were defined in the parent class. Inheritance can be great in the right situation, but you want to avoid creating really deeply nested classes because it becomes very hard to debug when things go wrong somewhere in the middle. As an alternative, we can use composition and there are actually multiple different ways we can apply this pattern.

In Angular, we can do it by injecting services into our components And also at the template level by creating directives. I'm not going to cover that here, but it's just one of the awesome things about Angular that I've covered in many other videos. Another alternative is to concatenate objects together which I've seen covered in several different articles on the web. The idea here is that you decouple your properties or behaviors into objects or functions that return objects? We can then merge all these objects together into a final function that does everything that we need it to.

This is usually referred to as a mixin pattern and it's just a certain type of multiple inheritance. So the terminology between composition and inheritance is sort of convoluted. In any case, this mixin pattern can be very powerful. But in its current form, we lose all of the ergonomics of class based object oriented programming. That might be a good or bad thing depending on who you ask, but TypeScript actually gives us the flexibility to use mixins in a class based format.

First, I'm going to pull in this really ugly function from the TypeScript docs, which we'll see in use here in just a minute. From there, I'm going to create a couple of small behavior classes that define the individual behaviors instead of trying to encapsulate everything in a single class? So these classes are more concerned with what something does instead of what something is. Now in the superhero class, there's a very subtle difference from the previous example. Instead of extending the class, we are going to implement multiple classes.

When you implement something, you're only concerned about its interface and not its underlying code. It's the apply mixins function that we defined at the very beginning that will Actually, take these interfaces and apply their code to this class. That does leave us with some extra boilerplate code where we have to actually type the return values on the methods for this class? In this case, we have 2 methods, say hi and superpower, both of which return strings. And the final step is the requirement to call that apply mixins function with the base class as the first argument and the mixed in classes as the second argument?

Hey. Now, Now, we can finally answer the question, is a hot dog a sandwich? If you use inheritance, then you're going to have to inherit from some base sandwich class, which means it is a sandwich. But, if you use composition, then you can just pull in the hot dog and the bun, meaning that it is not a sandwich. I'm gonna go ahead and wrap things up there.

If this video helped you, please like and subscribe. And, I just wanna say thank you to everybody for an amazing 2018. I'm super grateful for the community around this channel, and I look forward to pushing things even further in 2019. I'm going to be taking a short break for the next couple weeks and then I have a video planned for January 1st. So stay tuned for that.

I hope everybody has an awesome end of the year and you can still find me On Slack if you have any questions or need anything at all. Thanks for watching and I'll talk to you soon.
Which is better, object oriented or functional programming? How about composition or inheritance? Semicolons or no semicolons? Is it pronounced gif or gif? And is a hot dog a sandwich? Today, you'll get all the answers and I encourage you to just accept these as the facts and not try out anything on your own. There's only one correct way to write code, and if there's one thing that employers hate, it's creative problem solving skills from their programmers. If you're new here, like and subscribe. Scribe and congrats to Alexander Torres. You're the random t shirt winner from last week. And a huge thank you to Patrick Miu Lou.
writing
biology
He contributed to the content of this video and has helped out 100 if not 1,000 of developers on our Slack channel? So make sure to spam him with a thank you message. Let's go ahead and take care of the easy is first. When writing your code, you should leave semicolons out and then have Prettier add them back when you save the file. GIF stands for graphics interchange format, so it's obviously pronounced GIF following the first word in the acronym itself? Is a hot dog a sandwich?
Well, that one's a little more complex, so let's wait till the end of the video. How about object oriented versus functional programming? If you guessed object oriented is better, you're completely wrong. And if you guessed functional programming, you're way off base. Debating programming paradigms at this level is like debating art. There is always more than one way to solve a problem especially in JavaScript, and it's great to debate these things but there are no absolutes. There's going to be a trade off for every decision that you make. Let's start by taking a look at some functional TypeScript code. The most important concept in functional programming is the Concept of Pure Functions. This means that the output of your function should only depend on its inputs.
debate
programming
logic
For example, here we have a function called ToString which takes a value as its argument and then returns that value formatted as a string.
We can make this an impure function by mutating the number variable directly. Klee? This would be considered a side effect and functional code should produce no side effects. In addition, they should not rely on any outside value to produce a return value. Pure functions are easier to test and also easier to reason about because you don't have to think about anything happening outside of the function itself. Another core principle of functional programming is immutable data. Functional code is stateless, meaning that when data is created, it is never mutated. For example, we can simulate this in JavaScript by using object freeze on this array of numbers. We could hack around this, but it prevents us from doing things like array push, Which you wouldn't do in a functional program.
logic
logical reasoning
programming
So, obviously, our data has to change somehow if we have a dynamic software application. So you'll often be passing functions as arguments to other functions. So here we have a typical first order function, which takes a value and returns a different value. In this case, just appending an emoji to a string. Now a higher order function is one that either takes a function as an argument or returns a function itself. JavaScript has some really nice built in higher order functions for arrays such as map. So instead of using a for loop, we can just pass in our function to map Which will run our add emoji function on every element in the array and transform the value. So that gives us a very concise and elegant way to transform the values in an array. Another cool thing we can do is create functions that return functions. This is very useful when you wanna start with some base functionality and then extend it with some dynamic data. Let's imagine we're building a weather app, and we need to append strings with certain emojis. We'll start with a base function called append emoji and then use it to compose more complex functions? So in this case, the inner function takes both of the arguments and adds them together. We can use this to create more specialized functions that point to to pick emoji? For example, we'll have a rain function and a sun function.
Then we can call this function with the string that we want the emoji appended to. The end result is some concise and readable code that doesn't rely on any shared state that would make it difficult to test. That's about as basic as it gets for functional programming? And things get a lot more interesting when you have asynchronous data and side effects and things like that. So now let's go ahead and compare this to object oriented programming. The best comparison I've seen is to a baking recipe.
programming
I'll have a link to that in the description.
The object oriented or imperative approach on the top gives you a clear set of Statements to follow to get the cake to its final state. The functional or declarative approach on the bottom describes the state and logic involved, but has no opinion on the actual control Well, now let's go ahead and look at some object oriented TypeScript code. The first thing we'll do is define a class, which itself doesn't really do anything, Rather, it serves as a blueprint for instantiating objects. So an instance of this emoji class will be an object with an icon property. Then the constructor method is special because it runs once when the object is instantiated.
logic
systems
ideologies
logical reasoning
operations
We'll pass an argument to the constructor with the actual emoji icon And then we'll set that equal to the property on this object. And the emoji class works similar to a function, but we use the new keyword in front of it. And as you can see when we do that it creates an emoji object with an icon property of sun.
In TypeScript, there's an easier way to do this because we have the concept of public and private members? So if we use the public keyword in front of the argument in the constructor, TypeScript will automatically know to set that as a public property on each object. When you declare a property or method public, it means it's available to the class itself and any instances of the class. That can be both a good and a bad thing. For example, we can simply change the icon by just mutating the value on this object. On one hand, it's very convenient, but on the other hand, if you have a lot Code doing this, it can be hard to keep track of and hard to test effectively.
intellectual property
I'd like to point out at this point that classes in JavaScript are actually just syntactic sugar for functions and prototypal inheritance? If we can pile our code to e s 3, you can see that it's just a function with a closure that prevents the local variables from bleeding out into the global scope? That's just something to be aware of, but TypeScript also provides some tools for us To improve the tooling that we have when writing object oriented code. For example, we can mark members as private so that they can only be used inside of this class definition. This means that we can separate our public API from internal logic for this class. For example, if we wanna make this icon value immutable, we can make it private. Then we'll define a getter so the user can read the value but not change the value. Another important thing to point out here is that class instances can have their own internal state. Let's imagine we have a button where the user can toggle the emoji and maybe go back and forth between different states. This is a really simple thing to implement in object oriented programming. We'll add another private property to this class called previous and then use a getter to retrieve that value. Then we'll define a change method which will mutate the actual icon value on this instance? When that happens, we'll first change the previous value to the current icon and then update the current icon to the new value. On the first console log, we get the sun icon and undefined. And if we mutate the state a couple times, you can see that our internal values on this class instance have changed. So the end result is that we have a class that's encapsulated all the logic for how an emoji should work. And with TypeScript, we automatically have an interface and documentation for this class. Another cool thing you can do with classes is define static methods. The unique thing about a static method is that it's on the class itself and not an instance of a class. So we'll just go ahead and define a static method here, which itself is actually a pure function, and its job is simply to add 1 to the input argument.
The cool thing is that we can now use the emoji class as a namespace to run this function. Now we're going to switch gears and talk about composition versus inheritance for code reusability? This is an area where people tend to get very strong opinions and the actual definition of composition tends to be a little convoluted. But the whole thing really just boils down to this. With inheritance, you start with a larger base class then have child classes inherit all of this functionality and override or Extend it with whatever custom behaviors that they need. Composition, on the other hand, breaks apart the interfaces and logic into a lot of small pieces, then builds up larger functions or objects by combining these pieces together? Let's go ahead and take a look at an example of inheritance. We start with the class of human that has a public property of name and has the ability to say hi. But what if we have a lot of other objects in our program that Similar but implement slightly different features based on what they're designed to do? For example, in a video game, you might have a human character And then a superhuman character that has all of the human abilities but with a little something extra.
intellectual property
crafts
biology
ideologies
toys
evolution
logic
In TypeScript, we can simply inherit All of the functionality from the human class by saying superhuman extends human. We do have an argument in the constructor, so we'll also need to add that to the constructor without private or public? Then we call super, which will execute the code in the constructor of the parent class, which in our case is just initializing this name property. At this point, we'll go ahead and define an additional method called superpower. Then we'll create an instance of the superhuman class, and what you'll see here is that it Has the superpower method, whereas the regular human does not, but the superhuman can still call all the methods that were defined in the parent class. Inheritance can be great in the right situation, but you want to avoid creating really deeply nested classes because it becomes very hard to debug when things go wrong somewhere in the middle. As an alternative, we can use composition and there are actually multiple different ways we can apply this pattern. In Angular, we can do it by injecting services into our components And also at the template level by creating directives. I'm not going to cover that here, but it's just one of the awesome things about Angular that I've covered in many other videos. Another alternative is to concatenate objects together which I've seen covered in several different articles on the web. The idea here is that you decouple your properties or behaviors into objects or functions that return objects? We can then merge all these objects together into a final function that does everything that we need it to.
This is usually referred to as a mixin pattern and it's just a certain type of multiple inheritance. So the terminology between composition and inheritance is sort of convoluted. In any case, this mixin pattern can be very powerful. But in its current form, we lose all of the ergonomics of class based object oriented programming.
genetics
biology
evolution
That might be a good or bad thing depending on who you ask, but TypeScript actually gives us the flexibility to use mixins in a class based format.
First, I'm going to pull in this really ugly function from the TypeScript docs, which we'll see in use here in just a minute. From there, I'm going to create a couple of small behavior classes that define the individual behaviors instead of trying to encapsulate everything in a single class?
programming
So these classes are more concerned with what something does instead of what something is. Now in the superhero class, there's a very subtle difference from the previous example. Instead of extending the class, we are going to implement multiple classes. When you implement something, you're only concerned about its interface and not its underlying code.
It's the apply mixins function that we defined at the very beginning that will Actually, take these interfaces and apply their code to this class. That does leave us with some extra boilerplate code where we have to actually type the return values on the methods for this class? In this case, we have 2 methods, say hi and superpower, both of which return strings.
programming
And the final step is the requirement to call that apply mixins function with the base class as the first argument and the mixed in classes as the second argument? Hey. Now, Now, we can finally answer the question, is a hot dog a sandwich? If you use inheritance, then you're going to have to inherit from some base sandwich class, which means it is a sandwich.
But, if you use composition, then you can just pull in the hot dog and the bun, meaning that it is not a sandwich. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And, I just wanna say thank you to everybody for an amazing 2018. I'm super grateful for the community around this channel, and I look forward to pushing things even further in 2019. I'm going to be taking a short break for the next couple weeks and then I have a video planned for January 1st. So stay tuned for that. I hope everybody has an awesome end of the year and you can still find me On Slack if you have any questions or need anything at all. Thanks for watching and I'll talk to you soon.
food
seasons
holidays
television
diet
social media
youtube
Which is better, object oriented or functional programming? How about composition or inheritance? Semicolons or no semicolons? Is it pronounced gif or gif? And is a hot dog a sandwich? Today, you'll get all the answers and I encourage you to just accept these as the facts and not try out anything on your own. There's only one correct way to write code, and if there's one thing that employers hate, it's creative problem solving skills from their programmers. If you're new here, like and subscribe. Scribe and congrats to Alexander Torres. You're the random t shirt winner from last week. And a huge thank you to Patrick Miu Lou. He contributed to the content of this video and has helped out 100 if not 1,000 of developers on our Slack channel? So make sure to spam him with a thank you message. Let's go ahead and take care of the easy is first. When writing your code, you should leave semicolons out and then have Prettier add them back when you save the file. GIF stands for graphics interchange format, so it's obviously pronounced GIF following the first word in the acronym itself? Is a hot dog a sandwich? Well, that one's a little more complex, so let's wait till the end of the video. How about object oriented versus functional programming? If you guessed object oriented is better, you're completely wrong. And if you guessed functional programming, you're way off base. Debating programming paradigms at this level is like debating art. There is always more than one way to solve a problem especially in JavaScript, and it's great to debate these things but there are no absolutes. There's going to be a trade off for every decision that you make. Let's start by taking a look at some functional TypeScript code. The most important concept in functional programming is the Concept of Pure Functions. This means that the output of your function should only depend on its inputs. For example, here we have a function called ToString which takes a value as its argument and then returns that value formatted as a string. We can make this an impure function by mutating the number variable directly. Klee? This would be considered a side effect and functional code should produce no side effects. In addition, they should not rely on any outside value to produce a return value. Pure functions are easier to test and also easier to reason about because you don't have to think about anything happening outside of the function itself. Another core principle of functional programming is immutable data. Functional code is stateless, meaning that when data is created, it is never mutated. For example, we can simulate this in JavaScript by using object freeze on this array of numbers. We could hack around this, but it prevents us from doing things like array push, Which you wouldn't do in a functional program. So, obviously, our data has to change somehow if we have a dynamic software application. So you'll often be passing functions as arguments to other functions. So here we have a typical first order function, which takes a value and returns a different value. In this case, just appending an emoji to a string. Now a higher order function is one that either takes a function as an argument or returns a function itself. JavaScript has some really nice built in higher order functions for arrays such as map. So instead of using a for loop, we can just pass in our function to map Which will run our add emoji function on every element in the array and transform the value. So that gives us a very concise and elegant way to transform the values in an array. Another cool thing we can do is create functions that return functions. This is very useful when you wanna start with some base functionality and then extend it with some dynamic data. Let's imagine we're building a weather app, and we need to append strings with certain emojis. We'll start with a base function called append emoji and then use it to compose more complex functions? So in this case, the inner function takes both of the arguments and adds them together. We can use this to create more specialized functions that point to to pick emoji? For example, we'll have a rain function and a sun function. Then we can call this function with the string that we want the emoji appended to. The end result is some concise and readable code that doesn't rely on any shared state that would make it difficult to test. That's about as basic as it gets for functional programming? And things get a lot more interesting when you have asynchronous data and side effects and things like that. So now let's go ahead and compare this to object oriented programming. The best comparison I've seen is to a baking recipe. I'll have a link to that in the description. The object oriented or imperative approach on the top gives you a clear set of Statements to follow to get the cake to its final state. The functional or declarative approach on the bottom describes the state and logic involved, but has no opinion on the actual control Well, now let's go ahead and look at some object oriented TypeScript code. The first thing we'll do is define a class, which itself doesn't really do anything, Rather, it serves as a blueprint for instantiating objects. So an instance of this emoji class will be an object with an icon property. Then the constructor method is special because it runs once when the object is instantiated. We'll pass an argument to the constructor with the actual emoji icon And then we'll set that equal to the property on this object. And the emoji class works similar to a function, but we use the new keyword in front of it. And as you can see when we do that it creates an emoji object with an icon property of sun. In TypeScript, there's an easier way to do this because we have the concept of public and private members? So if we use the public keyword in front of the argument in the constructor, TypeScript will automatically know to set that as a public property on each object. When you declare a property or method public, it means it's available to the class itself and any instances of the class. That can be both a good and a bad thing. For example, we can simply change the icon by just mutating the value on this object. On one hand, it's very convenient, but on the other hand, if you have a lot Code doing this, it can be hard to keep track of and hard to test effectively. I'd like to point out at this point that classes in JavaScript are actually just syntactic sugar for functions and prototypal inheritance? If we can pile our code to e s 3, you can see that it's just a function with a closure that prevents the local variables from bleeding out into the global scope? That's just something to be aware of, but TypeScript also provides some tools for us To improve the tooling that we have when writing object oriented code. For example, we can mark members as private so that they can only be used inside of this class definition. This means that we can separate our public API from internal logic for this class. For example, if we wanna make this icon value immutable, we can make it private. Then we'll define a getter so the user can read the value but not change the value. Another important thing to point out here is that class instances can have their own internal state. Let's imagine we have a button where the user can toggle the emoji and maybe go back and forth between different states. This is a really simple thing to implement in object oriented programming. We'll add another private property to this class called previous and then use a getter to retrieve that value. Then we'll define a change method which will mutate the actual icon value on this instance? When that happens, we'll first change the previous value to the current icon and then update the current icon to the new value. On the first console log, we get the sun icon and undefined. And if we mutate the state a couple times, you can see that our internal values on this class instance have changed. So the end result is that we have a class that's encapsulated all the logic for how an emoji should work. And with TypeScript, we automatically have an interface and documentation for this class. Another cool thing you can do with classes is define static methods. The unique thing about a static method is that it's on the class itself and not an instance of a class. So we'll just go ahead and define a static method here, which itself is actually a pure function, and its job is simply to add 1 to the input argument. The cool thing is that we can now use the emoji class as a namespace to run this function. Now we're going to switch gears and talk about composition versus inheritance for code reusability? This is an area where people tend to get very strong opinions and the actual definition of composition tends to be a little convoluted. But the whole thing really just boils down to this. With inheritance, you start with a larger base class then have child classes inherit all of this functionality and override or Extend it with whatever custom behaviors that they need. Composition, on the other hand, breaks apart the interfaces and logic into a lot of small pieces, then builds up larger functions or objects by combining these pieces together? Let's go ahead and take a look at an example of inheritance. We start with the class of human that has a public property of name and has the ability to say hi. But what if we have a lot of other objects in our program that Similar but implement slightly different features based on what they're designed to do? For example, in a video game, you might have a human character And then a superhuman character that has all of the human abilities but with a little something extra. In TypeScript, we can simply inherit All of the functionality from the human class by saying superhuman extends human. We do have an argument in the constructor, so we'll also need to add that to the constructor without private or public? Then we call super, which will execute the code in the constructor of the parent class, which in our case is just initializing this name property. At this point, we'll go ahead and define an additional method called superpower. Then we'll create an instance of the superhuman class, and what you'll see here is that it Has the superpower method, whereas the regular human does not, but the superhuman can still call all the methods that were defined in the parent class. Inheritance can be great in the right situation, but you want to avoid creating really deeply nested classes because it becomes very hard to debug when things go wrong somewhere in the middle. As an alternative, we can use composition and there are actually multiple different ways we can apply this pattern. In Angular, we can do it by injecting services into our components And also at the template level by creating directives. I'm not going to cover that here, but it's just one of the awesome things about Angular that I've covered in many other videos. Another alternative is to concatenate objects together which I've seen covered in several different articles on the web. The idea here is that you decouple your properties or behaviors into objects or functions that return objects? We can then merge all these objects together into a final function that does everything that we need it to. This is usually referred to as a mixin pattern and it's just a certain type of multiple inheritance. So the terminology between composition and inheritance is sort of convoluted. In any case, this mixin pattern can be very powerful. But in its current form, we lose all of the ergonomics of class based object oriented programming. That might be a good or bad thing depending on who you ask, but TypeScript actually gives us the flexibility to use mixins in a class based format. First, I'm going to pull in this really ugly function from the TypeScript docs, which we'll see in use here in just a minute. From there, I'm going to create a couple of small behavior classes that define the individual behaviors instead of trying to encapsulate everything in a single class? So these classes are more concerned with what something does instead of what something is. Now in the superhero class, there's a very subtle difference from the previous example. Instead of extending the class, we are going to implement multiple classes. When you implement something, you're only concerned about its interface and not its underlying code. It's the apply mixins function that we defined at the very beginning that will Actually, take these interfaces and apply their code to this class. That does leave us with some extra boilerplate code where we have to actually type the return values on the methods for this class? In this case, we have 2 methods, say hi and superpower, both of which return strings. And the final step is the requirement to call that apply mixins function with the base class as the first argument and the mixed in classes as the second argument? Hey. Now, Now, we can finally answer the question, is a hot dog a sandwich? If you use inheritance, then you're going to have to inherit from some base sandwich class, which means it is a sandwich. But, if you use composition, then you can just pull in the hot dog and the bun, meaning that it is not a sandwich. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And, I just wanna say thank you to everybody for an amazing 2018. I'm super grateful for the community around this channel, and I look forward to pushing things even further in 2019. I'm going to be taking a short break for the next couple weeks and then I have a video planned for January 1st. So stay tuned for that. I hope everybody has an awesome end of the year and you can still find me On Slack if you have any questions or need anything at all. Thanks for watching and I'll talk to you soon.
Which
which
is
is
better,
better
object
object
oriented
oriented
or
or
functional
functional
programming?
programming
How
how
about
about
composition
composition
or
or
inheritance?
inheritance
Semicolons
semicolons
or
or
no
no
semicolons?
semicolons
Is
is
it
it
pronounced
pronounced
gif
gif
or
or
gif?
gif
And
and
is
is
a
a
hot
hot
dog
dog
a
a
sandwich?
sandwich
Today,
today
you'll
you'll
get
get
all
all
the
the
answers
answers
and
and
I
i
encourage
encourage
you
you
to
to
just
just
accept
accept
these
these
as
as
the
the
facts
facts
and
and
not
not
try
try
out
out
anything
anything
on
on
your
your
own.
own
There's
there's
only
only
one
one
correct
correct
way
way
to
to
write
write
code,
code
and
and
if
if
there's
there's
one
one
thing
thing
that
that
employers
employers
hate,
hate
it's
it's
creative
creative
problem
problem
solving
solving
skills
skills
from
from
their
their
programmers.
programmers
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe.
subscribe
Scribe
scribe
and
and
congrats
congrats
to
to
Alexander
alexander
Torres.
torres
You're
you're
the
the
random
random
t
t
shirt
shirt
winner
winner
from
from
last
last
week.
week
And
and
a
a
huge
huge
thank
thank
you
you
to
to
Patrick
patrick
Miu
miu
Lou.
lou
He
he
contributed
contributed
to
to
the
the
content
content
of
of
this
this
video
video
and
and
has
has
helped
helped
out
out
100
100
if
if
not
not
1,000
1,000
of
of
developers
developers
on
on
our
our
Slack
slack
channel?
channel
So
so
make
make
sure
sure
to
to
spam
spam
him
him
with
with
a
a
thank
thank
you
you
message.
message
Let's
let's
go
go
ahead
ahead
and
and
take
take
care
care
of
of
the
the
easy
easy
is
is
first.
first
When
when
writing
writing
your
your
code,
code
you
you
should
should
leave
leave
semicolons
semicolons
out
out
and
and
then
then
have
have
Prettier
prettier
add
add
them
them
back
back
when
when
you
you
save
save
the
the
file.
file
GIF
gif
stands
stands
for
for
graphics
graphics
interchange
interchange
format,
format
so
so
it's
it's
obviously
obviously
pronounced
pronounced
GIF
gif
following
following
the
the
first
first
word
word
in
in
the
the
acronym
acronym
itself?
itself
Is
is
a
a
hot
hot
dog
dog
a
a
sandwich?
sandwich
Well,
well
that
that
one's
one's
a
a
little
little
more
more
complex,
complex
so
so
let's
let's
wait
wait
till
till
the
the
end
end
of
of
the
the
video.
video
How
how
about
about
object
object
oriented
oriented
versus
versus
functional
functional
programming?
programming
If
if
you
you
guessed
guessed
object
object
oriented
oriented
is
is
better,
better
you're
you're
completely
completely
wrong.
wrong
And
and
if
if
you
you
guessed
guessed
functional
functional
programming,
programming
you're
you're
way
way
off
off
base.
base
Debating
debating
programming
programming
paradigms
paradigms
at
at
this
this
level
level
is
is
like
like
debating
debating
art.
art
There
there
is
is
always
always
more
more
than
than
one
one
way
way
to
to
solve
solve
a
a
problem
problem
especially
especially
in
in
JavaScript,
javascript
and
and
it's
it's
great
great
to
to
debate
debate
these
these
things
things
but
but
there
there
are
are
no
no
absolutes.
absolutes
There's
there's
going
going
to
to
be
be
a
a
trade
trade
off
off
for
for
every
every
decision
decision
that
that
you
you
make.
make
Let's
let's
start
start
by
by
taking
taking
a
a
look
look
at
at
some
some
functional
functional
TypeScript
typescript
code.
code
The
the
most
most
important
important
concept
concept
in
in
functional
functional
programming
programming
is
is
the
the
Concept
concept
of
of
Pure
pure
Functions.
functions
This
this
means
means
that
that
the
the
output
output
of
of
your
your
function
function
should
should
only
only
depend
depend
on
on
its
its
inputs.
inputs
For
for
example,
example
here
here
we
we
have
have
a
a
function
function
called
called
ToString
tostring
which
which
takes
takes
a
a
value
value
as
as
its
its
argument
argument
and
and
then
then
returns
returns
that
that
value
value
formatted
formatted
as
as
a
a
string.
string
We
we
can
can
make
make
this
this
an
an
impure
impure
function
function
by
by
mutating
mutating
the
the
number
number
variable
variable
directly.
directly
Klee?
klee
This
this
would
would
be
be
considered
considered
a
a
side
side
effect
effect
and
and
functional
functional
code
code
should
should
produce
produce
no
no
side
side
effects.
effects
In
in
addition,
addition
they
they
should
should
not
not
rely
rely
on
on
any
any
outside
outside
value
value
to
to
produce
produce
a
a
return
return
value.
value
Pure
pure
functions
functions
are
are
easier
easier
to
to
test
test
and
and
also
also
easier
easier
to
to
reason
reason
about
about
because
because
you
you
don't
don't
have
have
to
to
think
think
about
about
anything
anything
happening
happening
outside
outside
of
of
the
the
function
function
itself.
itself
Another
another
core
core
principle
principle
of
of
functional
functional
programming
programming
is
is
immutable
immutable
data.
data
Functional
functional
code
code
is
is
stateless,
stateless
meaning
meaning
that
that
when
when
data
data
is
is
created,
created
it
it
is
is
never
never
mutated.
mutated
For
for
example,
example
we
we
can
can
simulate
simulate
this
this
in
in
JavaScript
javascript
by
by
using
using
object
object
freeze
freeze
on
on
this
this
array
array
of
of
numbers.
numbers
We
we
could
could
hack
hack
around
around
this,
this
but
but
it
it
prevents
prevents
us
us
from
from
doing
doing
things
things
like
like
array
array
push,
push
Which
which
you
you
wouldn't
wouldn't
do
do
in
in
a
a
functional
functional
program.
program
So,
so
obviously,
obviously
our
our
data
data
has
has
to
to
change
change
somehow
somehow
if
if
we
we
have
have
a
a
dynamic
dynamic
software
software
application.
application
So
so
you'll
you'll
often
often
be
be
passing
passing
functions
functions
as
as
arguments
arguments
to
to
other
other
functions.
functions
So
so
here
here
we
we
have
have
a
a
typical
typical
first
first
order
order
function,
function
which
which
takes
takes
a
a
value
value
and
and
returns
returns
a
a
different
different
value.
value
In
in
this
this
case,
case
just
just
appending
appending
an
an
emoji
emoji
to
to
a
a
string.
string
Now
now
a
a
higher
higher
order
order
function
function
is
is
one
one
that
that
either
either
takes
takes
a
a
function
function
as
as
an
an
argument
argument
or
or
returns
returns
a
a
function
function
itself.
itself
JavaScript
javascript
has
has
some
some
really
really
nice
nice
built
built
in
in
higher
higher
order
order
functions
functions
for
for
arrays
arrays
such
such
as
as
map.
map
So
so
instead
instead
of
of
using
using
a
a
for
for
loop,
loop
we
we
can
can
just
just
pass
pass
in
in
our
our
function
function
to
to
map
map
Which
which
will
will
run
run
our
our
add
add
emoji
emoji
function
function
on
on
every
every
element
element
in
in
the
the
array
array
and
and
transform
transform
the
the
value.
value
So
so
that
that
gives
gives
us
us
a
a
very
very
concise
concise
and
and
elegant
elegant
way
way
to
to
transform
transform
the
the
values
values
in
in
an
an
array.
array
Another
another
cool
cool
thing
thing
we
we
can
can
do
do
is
is
create
create
functions
functions
that
that
return
return
functions.
functions
This
this
is
is
very
very
useful
useful
when
when
you
you
wanna
wanna
start
start
with
with
some
some
base
base
functionality
functionality
and
and
then
then
extend
extend
it
it
with
with
some
some
dynamic
dynamic
data.
data
Let's
let's
imagine
imagine
we're
we're
building
building
a
a
weather
weather
app,
app
and
and
we
we
need
need
to
to
append
append
strings
strings
with
with
certain
certain
emojis.
emojis
We'll
we'll
start
start
with
with
a
a
base
base
function
function
called
called
append
append
emoji
emoji
and
and
then
then
use
use
it
it
to
to
compose
compose
more
more
complex
complex
functions?
functions
So
so
in
in
this
this
case,
case
the
the
inner
inner
function
function
takes
takes
both
both
of
of
the
the
arguments
arguments
and
and
adds
adds
them
them
together.
together
We
we
can
can
use
use
this
this
to
to
create
create
more
more
specialized
specialized
functions
functions
that
that
point
point
to
to
to
to
pick
pick
emoji?
emoji
For
for
example,
example
we'll
we'll
have
have
a
a
rain
rain
function
function
and
and
a
a
sun
sun
function.
function
Then
then
we
we
can
can
call
call
this
this
function
function
with
with
the
the
string
string
that
that
we
we
want
want
the
the
emoji
emoji
appended
appended
to.
to
The
the
end
end
result
result
is
is
some
some
concise
concise
and
and
readable
readable
code
code
that
that
doesn't
doesn't
rely
rely
on
on
any
any
shared
shared
state
state
that
that
would
would
make
make
it
it
difficult
difficult
to
to
test.
test
That's
that's
about
about
as
as
basic
basic
as
as
it
it
gets
gets
for
for
functional
functional
programming?
programming
And
and
things
things
get
get
a
a
lot
lot
more
more
interesting
interesting
when
when
you
you
have
have
asynchronous
asynchronous
data
data
and
and
side
side
effects
effects
and
and
things
things
like
like
that.
that
So
so
now
now
let's
let's
go
go
ahead
ahead
and
and
compare
compare
this
this
to
to
object
object
oriented
oriented
programming.
programming
The
the
best
best
comparison
comparison
I've
i've
seen
seen
is
is
to
to
a
a
baking
baking
recipe.
recipe
I'll
i'll
have
have
a
a
link
link
to
to
that
that
in
in
the
the
description.
description
The
the
object
object
oriented
oriented
or
or
imperative
imperative
approach
approach
on
on
the
the
top
top
gives
gives
you
you
a
a
clear
clear
set
set
of
of
Statements
statements
to
to
follow
follow
to
to
get
get
the
the
cake
cake
to
to
its
its
final
final
state.
state
The
the
functional
functional
or
or
declarative
declarative
approach
approach
on
on
the
the
bottom
bottom
describes
describes
the
the
state
state
and
and
logic
logic
involved,
involved
but
but
has
has
no
no
opinion
opinion
on
on
the
the
actual
actual
control
control
Well,
well
now
now
let's
let's
go
go
ahead
ahead
and
and
look
look
at
at
some
some
object
object
oriented
oriented
TypeScript
typescript
code.
code
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
define
define
a
a
class,
class
which
which
itself
itself
doesn't
doesn't
really
really
do
do
anything,
anything
Rather,
rather
it
it
serves
serves
as
as
a
a
blueprint
blueprint
for
for
instantiating
instantiating
objects.
objects
So
so
an
an
instance
instance
of
of
this
this
emoji
emoji
class
class
will
will
be
be
an
an
object
object
with
with
an
an
icon
icon
property.
property
Then
then
the
the
constructor
constructor
method
method
is
is
special
special
because
because
it
it
runs
runs
once
once
when
when
the
the
object
object
is
is
instantiated.
instantiated
We'll
we'll
pass
pass
an
an
argument
argument
to
to
the
the
constructor
constructor
with
with
the
the
actual
actual
emoji
emoji
icon
icon
And
and
then
then
we'll
we'll
set
set
that
that
equal
equal
to
to
the
the
property
property
on
on
this
this
object.
object
And
and
the
the
emoji
emoji
class
class
works
works
similar
similar
to
to
a
a
function,
function
but
but
we
we
use
use
the
the
new
new
keyword
keyword
in
in
front
front
of
of
it.
it
And
and
as
as
you
you
can
can
see
see
when
when
we
we
do
do
that
that
it
it
creates
creates
an
an
emoji
emoji
object
object
with
with
an
an
icon
icon
property
property
of
of
sun.
sun
In
in
TypeScript,
typescript
there's
there's
an
an
easier
easier
way
way
to
to
do
do
this
this
because
because
we
we
have
have
the
the
concept
concept
of
of
public
public
and
and
private
private
members?
members
So
so
if
if
we
we
use
use
the
the
public
public
keyword
keyword
in
in
front
front
of
of
the
the
argument
argument
in
in
the
the
constructor,
constructor
TypeScript
typescript
will
will
automatically
automatically
know
know
to
to
set
set
that
that
as
as
a
a
public
public
property
property
on
on
each
each
object.
object
When
when
you
you
declare
declare
a
a
property
property
or
or
method
method
public,
public
it
it
means
means
it's
it's
available
available
to
to
the
the
class
class
itself
itself
and
and
any
any
instances
instances
of
of
the
the
class.
class
That
that
can
can
be
be
both
both
a
a
good
good
and
and
a
a
bad
bad
thing.
thing
For
for
example,
example
we
we
can
can
simply
simply
change
change
the
the
icon
icon
by
by
just
just
mutating
mutating
the
the
value
value
on
on
this
this
object.
object
On
on
one
one
hand,
hand
it's
it's
very
very
convenient,
convenient
but
but
on
on
the
the
other
other
hand,
hand
if
if
you
you
have
have
a
a
lot
lot
Code
code
doing
doing
this,
this
it
it
can
can
be
be
hard
hard
to
to
keep
keep
track
track
of
of
and
and
hard
hard
to
to
test
test
effectively.
effectively
I'd
i'd
like
like
to
to
point
point
out
out
at
at
this
this
point
point
that
that
classes
classes
in
in
JavaScript
javascript
are
are
actually
actually
just
just
syntactic
syntactic
sugar
sugar
for
for
functions
functions
and
and
prototypal
prototypal
inheritance?
inheritance
If
if
we
we
can
can
pile
pile
our
our
code
code
to
to
e
e
s
s
3,
3
you
you
can
can
see
see
that
that
it's
it's
just
just
a
a
function
function
with
with
a
a
closure
closure
that
that
prevents
prevents
the
the
local
local
variables
variables
from
from
bleeding
bleeding
out
out
into
into
the
the
global
global
scope?
scope
That's
that's
just
just
something
something
to
to
be
be
aware
aware
of,
of
but
but
TypeScript
typescript
also
also
provides
provides
some
some
tools
tools
for
for
us
us
To
to
improve
improve
the
the
tooling
tooling
that
that
we
we
have
have
when
when
writing
writing
object
object
oriented
oriented
code.
code
For
for
example,
example
we
we
can
can
mark
mark
members
members
as
as
private
private
so
so
that
that
they
they
can
can
only
only
be
be
used
used
inside
inside
of
of
this
this
class
class
definition.
definition
This
this
means
means
that
that
we
we
can
can
separate
separate
our
our
public
public
API
api
from
from
internal
internal
logic
logic
for
for
this
this
class.
class
For
for
example,
example
if
if
we
we
wanna
wanna
make
make
this
this
icon
icon
value
value
immutable,
immutable
we
we
can
can
make
make
it
it
private.
private
Then
then
we'll
we'll
define
define
a
a
getter
getter
so
so
the
the
user
user
can
can
read
read
the
the
value
value
but
but
not
not
change
change
the
the
value.
value
Another
another
important
important
thing
thing
to
to
point
point
out
out
here
here
is
is
that
that
class
class
instances
instances
can
can
have
have
their
their
own
own
internal
internal
state.
state
Let's
let's
imagine
imagine
we
we
have
have
a
a
button
button
where
where
the
the
user
user
can
can
toggle
toggle
the
the
emoji
emoji
and
and
maybe
maybe
go
go
back
back
and
and
forth
forth
between
between
different
different
states.
states
This
this
is
is
a
a
really
really
simple
simple
thing
thing
to
to
implement
implement
in
in
object
object
oriented
oriented
programming.
programming
We'll
we'll
add
add
another
another
private
private
property
property
to
to
this
this
class
class
called
called
previous
previous
and
and
then
then
use
use
a
a
getter
getter
to
to
retrieve
retrieve
that
that
value.
value
Then
then
we'll
we'll
define
define
a
a
change
change
method
method
which
which
will
will
mutate
mutate
the
the
actual
actual
icon
icon
value
value
on
on
this
this
instance?
instance
When
when
that
that
happens,
happens
we'll
we'll
first
first
change
change
the
the
previous
previous
value
value
to
to
the
the
current
current
icon
icon
and
and
then
then
update
update
the
the
current
current
icon
icon
to
to
the
the
new
new
value.
value
On
on
the
the
first
first
console
console
log,
log
we
we
get
get
the
the
sun
sun
icon
icon
and
and
undefined.
undefined
And
and
if
if
we
we
mutate
mutate
the
the
state
state
a
a
couple
couple
times,
times
you
you
can
can
see
see
that
that
our
our
internal
internal
values
values
on
on
this
this
class
class
instance
instance
have
have
changed.
changed
So
so
the
the
end
end
result
result
is
is
that
that
we
we
have
have
a
a
class
class
that's
that's
encapsulated
encapsulated
all
all
the
the
logic
logic
for
for
how
how
an
an
emoji
emoji
should
should
work.
work
And
and
with
with
TypeScript,
typescript
we
we
automatically
automatically
have
have
an
an
interface
interface
and
and
documentation
documentation
for
for
this
this
class.
class
Another
another
cool
cool
thing
thing
you
you
can
can
do
do
with
with
classes
classes
is
is
define
define
static
static
methods.
methods
The
the
unique
unique
thing
thing
about
about
a
a
static
static
method
method
is
is
that
that
it's
it's
on
on
the
the
class
class
itself
itself
and
and
not
not
an
an
instance
instance
of
of
a
a
class.
class
So
so
we'll
we'll
just
just
go
go
ahead
ahead
and
and
define
define
a
a
static
static
method
method
here,
here
which
which
itself
itself
is
is
actually
actually
a
a
pure
pure
function,
function
and
and
its
its
job
job
is
is
simply
simply
to
to
add
add
1
1
to
to
the
the
input
input
argument.
argument
The
the
cool
cool
thing
thing
is
is
that
that
we
we
can
can
now
now
use
use
the
the
emoji
emoji
class
class
as
as
a
a
namespace
namespace
to
to
run
run
this
this
function.
function
Now
now
we're
we're
going
going
to
to
switch
switch
gears
gears
and
and
talk
talk
about
about
composition
composition
versus
versus
inheritance
inheritance
for
for
code
code
reusability?
reusability
This
this
is
is
an
an
area
area
where
where
people
people
tend
tend
to
to
get
get
very
very
strong
strong
opinions
opinions
and
and
the
the
actual
actual
definition
definition
of
of
composition
composition
tends
tends
to
to
be
be
a
a
little
little
convoluted.
convoluted
But
but
the
the
whole
whole
thing
thing
really
really
just
just
boils
boils
down
down
to
to
this.
this
With
with
inheritance,
inheritance
you
you
start
start
with
with
a
a
larger
larger
base
base
class
class
then
then
have
have
child
child
classes
classes
inherit
inherit
all
all
of
of
this
this
functionality
functionality
and
and
override
override
or
or
Extend
extend
it
it
with
with
whatever
whatever
custom
custom
behaviors
behaviors
that
that
they
they
need.
need
Composition,
composition
on
on
the
the
other
other
hand,
hand
breaks
breaks
apart
apart
the
the
interfaces
interfaces
and
and
logic
logic
into
into
a
a
lot
lot
of
of
small
small
pieces,
pieces
then
then
builds
builds
up
up
larger
larger
functions
functions
or
or
objects
objects
by
by
combining
combining
these
these
pieces
pieces
together?
together
Let's
let's
go
go
ahead
ahead
and
and
take
take
a
a
look
look
at
at
an
an
example
example
of
of
inheritance.
inheritance
We
we
start
start
with
with
the
the
class
class
of
of
human
human
that
that
has
has
a
a
public
public
property
property
of
of
name
name
and
and
has
has
the
the
ability
ability
to
to
say
say
hi.
hi
But
but
what
what
if
if
we
we
have
have
a
a
lot
lot
of
of
other
other
objects
objects
in
in
our
our
program
program
that
that
Similar
similar
but
but
implement
implement
slightly
slightly
different
different
features
features
based
based
on
on
what
what
they're
they're
designed
designed
to
to
do?
do
For
for
example,
example
in
in
a
a
video
video
game,
game
you
you
might
might
have
have
a
a
human
human
character
character
And
and
then
then
a
a
superhuman
superhuman
character
character
that
that
has
has
all
all
of
of
the
the
human
human
abilities
abilities
but
but
with
with
a
a
little
little
something
something
extra.
extra
In
in
TypeScript,
typescript
we
we
can
can
simply
simply
inherit
inherit
All
all
of
of
the
the
functionality
functionality
from
from
the
the
human
human
class
class
by
by
saying
saying
superhuman
superhuman
extends
extends
human.
human
We
we
do
do
have
have
an
an
argument
argument
in
in
the
the
constructor,
constructor
so
so
we'll
we'll
also
also
need
need
to
to
add
add
that
that
to
to
the
the
constructor
constructor
without
without
private
private
or
or
public?
public
Then
then
we
we
call
call
super,
super
which
which
will
will
execute
execute
the
the
code
code
in
in
the
the
constructor
constructor
of
of
the
the
parent
parent
class,
class
which
which
in
in
our
our
case
case
is
is
just
just
initializing
initializing
this
this
name
name
property.
property
At
at
this
this
point,
point
we'll
we'll
go
go
ahead
ahead
and
and
define
define
an
an
additional
additional
method
method
called
called
superpower.
superpower
Then
then
we'll
we'll
create
create
an
an
instance
instance
of
of
the
the
superhuman
superhuman
class,
class
and
and
what
what
you'll
you'll
see
see
here
here
is
is
that
that
it
it
Has
has
the
the
superpower
superpower
method,
method
whereas
whereas
the
the
regular
regular
human
human
does
does
not,
not
but
but
the
the
superhuman
superhuman
can
can
still
still
call
call
all
all
the
the
methods
methods
that
that
were
were
defined
defined
in
in
the
the
parent
parent
class.
class
Inheritance
inheritance
can
can
be
be
great
great
in
in
the
the
right
right
situation,
situation
but
but
you
you
want
want
to
to
avoid
avoid
creating
creating
really
really
deeply
deeply
nested
nested
classes
classes
because
because
it
it
becomes
becomes
very
very
hard
hard
to
to
debug
debug
when
when
things
things
go
go
wrong
wrong
somewhere
somewhere
in
in
the
the
middle.
middle
As
as
an
an
alternative,
alternative
we
we
can
can
use
use
composition
composition
and
and
there
there
are
are
actually
actually
multiple
multiple
different
different
ways
ways
we
we
can
can
apply
apply
this
this
pattern.
pattern
In
in
Angular,
angular
we
we
can
can
do
do
it
it
by
by
injecting
injecting
services
services
into
into
our
our
components
components
And
and
also
also
at
at
the
the
template
template
level
level
by
by
creating
creating
directives.
directives
I'm
i'm
not
not
going
going
to
to
cover
cover
that
that
here,
here
but
but
it's
it's
just
just
one
one
of
of
the
the
awesome
awesome
things
things
about
about
Angular
angular
that
that
I've
i've
covered
covered
in
in
many
many
other
other
videos.
videos
Another
another
alternative
alternative
is
is
to
to
concatenate
concatenate
objects
objects
together
together
which
which
I've
i've
seen
seen
covered
covered
in
in
several
several
different
different
articles
articles
on
on
the
the
web.
web
The
the
idea
idea
here
here
is
is
that
that
you
you
decouple
decouple
your
your
properties
properties
or
or
behaviors
behaviors
into
into
objects
objects
or
or
functions
functions
that
that
return
return
objects?
objects
We
we
can
can
then
then
merge
merge
all
all
these
these
objects
objects
together
together
into
into
a
a
final
final
function
function
that
that
does
does
everything
everything
that
that
we
we
need
need
it
it
to.
to
This
this
is
is
usually
usually
referred
referred
to
to
as
as
a
a
mixin
mixin
pattern
pattern
and
and
it's
it's
just
just
a
a
certain
certain
type
type
of
of
multiple
multiple
inheritance.
inheritance
So
so
the
the
terminology
terminology
between
between
composition
composition
and
and
inheritance
inheritance
is
is
sort
sort
of
of
convoluted.
convoluted
In
in
any
any
case,
case
this
this
mixin
mixin
pattern
pattern
can
can
be
be
very
very
powerful.
powerful
But
but
in
in
its
its
current
current
form,
form
we
we
lose
lose
all
all
of
of
the
the
ergonomics
ergonomics
of
of
class
class
based
based
object
object
oriented
oriented
programming.
programming
That
that
might
might
be
be
a
a
good
good
or
or
bad
bad
thing
thing
depending
depending
on
on
who
who
you
you
ask,
ask
but
but
TypeScript
typescript
actually
actually
gives
gives
us
us
the
the
flexibility
flexibility
to
to
use
use
mixins
mixins
in
in
a
a
class
class
based
based
format.
format
First,
first
I'm
i'm
going
going
to
to
pull
pull
in
in
this
this
really
really
ugly
ugly
function
function
from
from
the
the
TypeScript
typescript
docs,
docs
which
which
we'll
we'll
see
see
in
in
use
use
here
here
in
in
just
just
a
a
minute.
minute
From
from
there,
there
I'm
i'm
going
going
to
to
create
create
a
a
couple
couple
of
of
small
small
behavior
behavior
classes
classes
that
that
define
define
the
the
individual
individual
behaviors
behaviors
instead
instead
of
of
trying
trying
to
to
encapsulate
encapsulate
everything
everything
in
in
a
a
single
single
class?
class
So
so
these
these
classes
classes
are
are
more
more
concerned
concerned
with
with
what
what
something
something
does
does
instead
instead
of
of
what
what
something
something
is.
is
Now
now
in
in
the
the
superhero
superhero
class,
class
there's
there's
a
a
very
very
subtle
subtle
difference
difference
from
from
the
the
previous
previous
example.
example
Instead
instead
of
of
extending
extending
the
the
class,
class
we
we
are
are
going
going
to
to
implement
implement
multiple
multiple
classes.
classes
When
when
you
you
implement
implement
something,
something
you're
you're
only
only
concerned
concerned
about
about
its
its
interface
interface
and
and
not
not
its
its
underlying
underlying
code.
code
It's
it's
the
the
apply
apply
mixins
mixins
function
function
that
that
we
we
defined
defined
at
at
the
the
very
very
beginning
beginning
that
that
will
will
Actually,
actually
take
take
these
these
interfaces
interfaces
and
and
apply
apply
their
their
code
code
to
to
this
this
class.
class
That
that
does
does
leave
leave
us
us
with
with
some
some
extra
extra
boilerplate
boilerplate
code
code
where
where
we
we
have
have
to
to
actually
actually
type
type
the
the
return
return
values
values
on
on
the
the
methods
methods
for
for
this
this
class?
class
In
in
this
this
case,
case
we
we
have
have
2
2
methods,
methods
say
say
hi
hi
and
and
superpower,
superpower
both
both
of
of
which
which
return
return
strings.
strings
And
and
the
the
final
final
step
step
is
is
the
the
requirement
requirement
to
to
call
call
that
that
apply
apply
mixins
mixins
function
function
with
with
the
the
base
base
class
class
as
as
the
the
first
first
argument
argument
and
and
the
the
mixed
mixed
in
in
classes
classes
as
as
the
the
second
second
argument?
argument
Hey.
hey
Now,
now
Now,
now
we
we
can
can
finally
finally
answer
answer
the
the
question,
question
is
is
a
a
hot
hot
dog
dog
a
a
sandwich?
sandwich
If
if
you
you
use
use
inheritance,
inheritance
then
then
you're
you're
going
going
to
to
have
have
to
to
inherit
inherit
from
from
some
some
base
base
sandwich
sandwich
class,
class
which
which
means
means
it
it
is
is
a
a
sandwich.
sandwich
But,
but
if
if
you
you
use
use
composition,
composition
then
then
you
you
can
can
just
just
pull
pull
in
in
the
the
hot
hot
dog
dog
and
and
the
the
bun,
bun
meaning
meaning
that
that
it
it
is
is
not
not
a
a
sandwich.
sandwich
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And,
and
I
i
just
just
wanna
wanna
say
say
thank
thank
you
you
to
to
everybody
everybody
for
for
an
an
amazing
amazing
2018.
2018
I'm
i'm
super
super
grateful
grateful
for
for
the
the
community
community
around
around
this
this
channel,
channel
and
and
I
i
look
look
forward
forward
to
to
pushing
pushing
things
things
even
even
further
further
in
in
2019.
2019
I'm
i'm
going
going
to
to
be
be
taking
taking
a
a
short
short
break
break
for
for
the
the
next
next
couple
couple
weeks
weeks
and
and
then
then
I
i
have
have
a
a
video
video
planned
planned
for
for
January
january
1st.
1st
So
so
stay
stay
tuned
tuned
for
for
that.
that
I
i
hope
hope
everybody
everybody
has
has
an
an
awesome
awesome
end
end
of
of
the
the
year
year
and
and
you
you
can
can
still
still
find
find
me
me
On
on
Slack
slack
if
if
you
you
have
have
any
any
questions
questions
or
or
need
need
anything
anything
at
at
all.
all
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The speakers discuss the differences between object oriented and functional programming, including sem polished code and peppery add ons. They also explain the concept of "character of programming" and the use of object oriented or framesqueued classes in JavaScript. They provide examples of how to create functions and create dynamic data, and suggest using the public key to prevent bleeding out of the class. They also discuss the benefits of transforming array values in an array and creating functions, and compare objects oriented programming to object oriented programming, highlighting the benefits of the latter approach. They recommend using mixins in a class-based format and discuss the use of a mixin pattern in inheritance and merging objects together. They also mention a class for eating a sandwich and a planned video for January 1st.
Object Oriented vs Functional Programming with TypeScript
Which is better, object oriented or functional programming? How about composition or inheritance? Semicolons or no semicolons? Is it pronounced gif or gif? And is a hot dog a sandwich? Today, you'll get all the answers and I encourage you to just accept these as the facts and not try out anything on your own. There's only one correct way to write code, and if there's one thing that employers hate, it's creative problem solving skills from their programmers. If you're new here, like and subscribe. Scribe and congrats to Alexander Torres. You're the random t shirt winner from last week. And a huge thank you to Patrick Miu Lou. He contributed to the content of this video and has helped out 100 if not 1,000 of developers on our Slack channel? So make sure to spam him with a thank you message. Let's go ahead and take care of the easy is first. When writing your code, you should leave semicolons out and then have Prettier add them back when you save the file. GIF stands for graphics interchange format, so it's obviously pronounced GIF following the first word in the acronym itself? Is a hot dog a sandwich? Well, that one's a little more complex, so let's wait till the end of the video. How about object oriented versus functional programming? If you guessed object oriented is better, you're completely wrong. And if you guessed functional programming, you're way off base. Debating programming paradigms at this level is like debating art. There is always more than one way to solve a problem especially in JavaScript, and it's great to debate these things but there are no absolutes. There's going to be a trade off for every decision that you make. Let's start by taking a look at some functional TypeScript code. The most important concept in functional programming is the Concept of Pure Functions. This means that the output of your function should only depend on its inputs. For example, here we have a function called ToString which takes a value as its argument and then returns that value formatted as a string. We can make this an impure function by mutating the number variable directly. Klee? This would be considered a side effect and functional code should produce no side effects. In addition, they should not rely on any outside value to produce a return value. Pure functions are easier to test and also easier to reason about because you don't have to think about anything happening outside of the function itself. Another core principle of functional programming is immutable data. Functional code is stateless, meaning that when data is created, it is never mutated. For example, we can simulate this in JavaScript by using object freeze on this array of numbers. We could hack around this, but it prevents us from doing things like array push, Which you wouldn't do in a functional program. So, obviously, our data has to change somehow if we have a dynamic software application. So you'll often be passing functions as arguments to other functions. So here we have a typical first order function, which takes a value and returns a different value. In this case, just appending an emoji to a string. Now a higher order function is one that either takes a function as an argument or returns a function itself. JavaScript has some really nice built in higher order functions for arrays such as map. So instead of using a for loop, we can just pass in our function to map Which will run our add emoji function on every element in the array and transform the value. So that gives us a very concise and elegant way to transform the values in an array. Another cool thing we can do is create functions that return functions. This is very useful when you wanna start with some base functionality and then extend it with some dynamic data. Let's imagine we're building a weather app, and we need to append strings with certain emojis. We'll start with a base function called append emoji and then use it to compose more complex functions? So in this case, the inner function takes both of the arguments and adds them together. We can use this to create more specialized functions that point to to pick emoji? For example, we'll have a rain function and a sun function. Then we can call this function with the string that we want the emoji appended to. The end result is some concise and readable code that doesn't rely on any shared state that would make it difficult to test. That's about as basic as it gets for functional programming? And things get a lot more interesting when you have asynchronous data and side effects and things like that. So now let's go ahead and compare this to object oriented programming. The best comparison I've seen is to a baking recipe. I'll have a link to that in the description. The object oriented or imperative approach on the top gives you a clear set of Statements to follow to get the cake to its final state. The functional or declarative approach on the bottom describes the state and logic involved, but has no opinion on the actual control Well, now let's go ahead and look at some object oriented TypeScript code. The first thing we'll do is define a class, which itself doesn't really do anything, Rather, it serves as a blueprint for instantiating objects. So an instance of this emoji class will be an object with an icon property. Then the constructor method is special because it runs once when the object is instantiated. We'll pass an argument to the constructor with the actual emoji icon And then we'll set that equal to the property on this object. And the emoji class works similar to a function, but we use the new keyword in front of it. And as you can see when we do that it creates an emoji object with an icon property of sun. In TypeScript, there's an easier way to do this because we have the concept of public and private members? So if we use the public keyword in front of the argument in the constructor, TypeScript will automatically know to set that as a public property on each object. When you declare a property or method public, it means it's available to the class itself and any instances of the class. That can be both a good and a bad thing. For example, we can simply change the icon by just mutating the value on this object. On one hand, it's very convenient, but on the other hand, if you have a lot Code doing this, it can be hard to keep track of and hard to test effectively. I'd like to point out at this point that classes in JavaScript are actually just syntactic sugar for functions and prototypal inheritance? If we can pile our code to e s 3, you can see that it's just a function with a closure that prevents the local variables from bleeding out into the global scope? That's just something to be aware of, but TypeScript also provides some tools for us To improve the tooling that we have when writing object oriented code. For example, we can mark members as private so that they can only be used inside of this class definition. This means that we can separate our public API from internal logic for this class. For example, if we wanna make this icon value immutable, we can make it private. Then we'll define a getter so the user can read the value but not change the value. Another important thing to point out here is that class instances can have their own internal state. Let's imagine we have a button where the user can toggle the emoji and maybe go back and forth between different states. This is a really simple thing to implement in object oriented programming. We'll add another private property to this class called previous and then use a getter to retrieve that value. Then we'll define a change method which will mutate the actual icon value on this instance? When that happens, we'll first change the previous value to the current icon and then update the current icon to the new value. On the first console log, we get the sun icon and undefined. And if we mutate the state a couple times, you can see that our internal values on this class instance have changed. So the end result is that we have a class that's encapsulated all the logic for how an emoji should work. And with TypeScript, we automatically have an interface and documentation for this class. Another cool thing you can do with classes is define static methods. The unique thing about a static method is that it's on the class itself and not an instance of a class. So we'll just go ahead and define a static method here, which itself is actually a pure function, and its job is simply to add 1 to the input argument. The cool thing is that we can now use the emoji class as a namespace to run this function. Now we're going to switch gears and talk about composition versus inheritance for code reusability? This is an area where people tend to get very strong opinions and the actual definition of composition tends to be a little convoluted. But the whole thing really just boils down to this. With inheritance, you start with a larger base class then have child classes inherit all of this functionality and override or Extend it with whatever custom behaviors that they need. Composition, on the other hand, breaks apart the interfaces and logic into a lot of small pieces, then builds up larger functions or objects by combining these pieces together? Let's go ahead and take a look at an example of inheritance. We start with the class of human that has a public property of name and has the ability to say hi. But what if we have a lot of other objects in our program that Similar but implement slightly different features based on what they're designed to do? For example, in a video game, you might have a human character And then a superhuman character that has all of the human abilities but with a little something extra. In TypeScript, we can simply inherit All of the functionality from the human class by saying superhuman extends human. We do have an argument in the constructor, so we'll also need to add that to the constructor without private or public? Then we call super, which will execute the code in the constructor of the parent class, which in our case is just initializing this name property. At this point, we'll go ahead and define an additional method called superpower. Then we'll create an instance of the superhuman class, and what you'll see here is that it Has the superpower method, whereas the regular human does not, but the superhuman can still call all the methods that were defined in the parent class. Inheritance can be great in the right situation, but you want to avoid creating really deeply nested classes because it becomes very hard to debug when things go wrong somewhere in the middle. As an alternative, we can use composition and there are actually multiple different ways we can apply this pattern. In Angular, we can do it by injecting services into our components And also at the template level by creating directives. I'm not going to cover that here, but it's just one of the awesome things about Angular that I've covered in many other videos. Another alternative is to concatenate objects together which I've seen covered in several different articles on the web. The idea here is that you decouple your properties or behaviors into objects or functions that return objects? We can then merge all these objects together into a final function that does everything that we need it to. This is usually referred to as a mixin pattern and it's just a certain type of multiple inheritance. So the terminology between composition and inheritance is sort of convoluted. In any case, this mixin pattern can be very powerful. But in its current form, we lose all of the ergonomics of class based object oriented programming. That might be a good or bad thing depending on who you ask, but TypeScript actually gives us the flexibility to use mixins in a class based format. First, I'm going to pull in this really ugly function from the TypeScript docs, which we'll see in use here in just a minute. From there, I'm going to create a couple of small behavior classes that define the individual behaviors instead of trying to encapsulate everything in a single class? So these classes are more concerned with what something does instead of what something is. Now in the superhero class, there's a very subtle difference from the previous example. Instead of extending the class, we are going to implement multiple classes. When you implement something, you're only concerned about its interface and not its underlying code. It's the apply mixins function that we defined at the very beginning that will Actually, take these interfaces and apply their code to this class. That does leave us with some extra boilerplate code where we have to actually type the return values on the methods for this class? In this case, we have 2 methods, say hi and superpower, both of which return strings. And the final step is the requirement to call that apply mixins function with the base class as the first argument and the mixed in classes as the second argument? Hey. Now, Now, we can finally answer the question, is a hot dog a sandwich? If you use inheritance, then you're going to have to inherit from some base sandwich class, which means it is a sandwich. But, if you use composition, then you can just pull in the hot dog and the bun, meaning that it is not a sandwich. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And, I just wanna say thank you to everybody for an amazing 2018. I'm super grateful for the community around this channel, and I look forward to pushing things even further in 2019. I'm going to be taking a short break for the next couple weeks and then I have a video planned for January 1st. So stay tuned for that. I hope everybody has an awesome end of the year and you can still find me On Slack if you have any questions or need anything at all. Thanks for watching and I'll talk to you soon.
The speakers discuss the differences between object oriented and functional programming, including sem polished code and peppery add ons. They also explain the concept of "character of programming" and the use of object oriented or framesqueued classes in JavaScript. They provide examples of how to create functions and create dynamic data, and suggest using the public key to prevent bleeding out of the class. They also discuss the benefits of transforming array values in an array and creating functions, and compare objects oriented programming to object oriented programming, highlighting the benefits of the latter approach. They recommend using mixins in a class-based format and discuss the use of a mixin pattern in inheritance and merging objects together. They also mention a class for eating a sandwich and a planned video for January 1st.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Object Oriented vs Functional Programming with TypeScript 
        and a small summary : The speakers discuss the differences between object oriented and functional programming, including sem polished code and peppery add ons. They also explain the concept of "character of programming" and the use of object oriented or framesqueued classes in JavaScript. They provide examples of how to create functions and create dynamic data, and suggest using the public key to prevent bleeding out of the class. They also discuss the benefits of transforming array values in an array and creating functions, and compare objects oriented programming to object oriented programming, highlighting the benefits of the latter approach. They recommend using mixins in a class-based format and discuss the use of a mixin pattern in inheritance and merging objects together. They also mention a class for eating a sandwich and a planned video for January 1st.
        [/INST]
        
        Generate the video : Which is better, object oriented or functional programming? How about composition or inheritance? Semicolons or no semicolons? Is it pronounced gif or gif? And is a hot dog a sandwich? Today, you'll get all the answers and I encourage you to just accept these as the facts and not try out anything on your own. There's only one correct way to write code, and if there's one thing that employers hate, it's creative problem solving skills from their programmers. If you're new here, like and subscribe. Scribe and congrats to Alexander Torres. You're the random t shirt winner from last week. And a huge thank you to Patrick Miu Lou. He contributed to the content of this video and has helped out 100 if not 1,000 of developers on our Slack channel? So make sure to spam him with a thank you message. Let's go ahead and take care of the easy is first. When writing your code, you should leave semicolons out and then have Prettier add them back when you save the file. GIF stands for graphics interchange format, so it's obviously pronounced GIF following the first word in the acronym itself? Is a hot dog a sandwich? Well, that one's a little more complex, so let's wait till the end of the video. How about object oriented versus functional programming? If you guessed object oriented is better, you're completely wrong. And if you guessed functional programming, you're way off base. Debating programming paradigms at this level is like debating art. There is always more than one way to solve a problem especially in JavaScript, and it's great to debate these things but there are no absolutes. There's going to be a trade off for every decision that you make. Let's start by taking a look at some functional TypeScript code. The most important concept in functional programming is the Concept of Pure Functions. This means that the output of your function should only depend on its inputs. For example, here we have a function called ToString which takes a value as its argument and then returns that value formatted as a string. We can make this an impure function by mutating the number variable directly. Klee? This would be considered a side effect and functional code should produce no side effects. In addition, they should not rely on any outside value to produce a return value. Pure functions are easier to test and also easier to reason about because you don't have to think about anything happening outside of the function itself. Another core principle of functional programming is immutable data. Functional code is stateless, meaning that when data is created, it is never mutated. For example, we can simulate this in JavaScript by using object freeze on this array of numbers. We could hack around this, but it prevents us from doing things like array push, Which you wouldn't do in a functional program. So, obviously, our data has to change somehow if we have a dynamic software application. So you'll often be passing functions as arguments to other functions. So here we have a typical first order function, which takes a value and returns a different value. In this case, just appending an emoji to a string. Now a higher order function is one that either takes a function as an argument or returns a function itself. JavaScript has some really nice built in higher order functions for arrays such as map. So instead of using a for loop, we can just pass in our function to map Which will run our add emoji function on every element in the array and transform the value. So that gives us a very concise and elegant way to transform the values in an array. Another cool thing we can do is create functions that return functions. This is very useful when you wanna start with some base functionality and then extend it with some dynamic data. Let's imagine we're building a weather app, and we need to append strings with certain emojis. We'll start with a base function called append emoji and then use it to compose more complex functions? So in this case, the inner function takes both of the arguments and adds them together. We can use this to create more specialized functions that point to to pick emoji? For example, we'll have a rain function and a sun function. Then we can call this function with the string that we want the emoji appended to. The end result is some concise and readable code that doesn't rely on any shared state that would make it difficult to test. That's about as basic as it gets for functional programming? And things get a lot more interesting when you have asynchronous data and side effects and things like that. So now let's go ahead and compare this to object oriented programming. The best comparison I've seen is to a baking recipe. I'll have a link to that in the description. The object oriented or imperative approach on the top gives you a clear set of Statements to follow to get the cake to its final state. The functional or declarative approach on the bottom describes the state and logic involved, but has no opinion on the actual control Well, now let's go ahead and look at some object oriented TypeScript code. The first thing we'll do is define a class, which itself doesn't really do anything, Rather, it serves as a blueprint for instantiating objects. So an instance of this emoji class will be an object with an icon property. Then the constructor method is special because it runs once when the object is instantiated. We'll pass an argument to the constructor with the actual emoji icon And then we'll set that equal to the property on this object. And the emoji class works similar to a function, but we use the new keyword in front of it. And as you can see when we do that it creates an emoji object with an icon property of sun. In TypeScript, there's an easier way to do this because we have the concept of public and private members? So if we use the public keyword in front of the argument in the constructor, TypeScript will automatically know to set that as a public property on each object. When you declare a property or method public, it means it's available to the class itself and any instances of the class. That can be both a good and a bad thing. For example, we can simply change the icon by just mutating the value on this object. On one hand, it's very convenient, but on the other hand, if you have a lot Code doing this, it can be hard to keep track of and hard to test effectively. I'd like to point out at this point that classes in JavaScript are actually just syntactic sugar for functions and prototypal inheritance? If we can pile our code to e s 3, you can see that it's just a function with a closure that prevents the local variables from bleeding out into the global scope? That's just something to be aware of, but TypeScript also provides some tools for us To improve the tooling that we have when writing object oriented code. For example, we can mark members as private so that they can only be used inside of this class definition. This means that we can separate our public API from internal logic for this class. For example, if we wanna make this icon value immutable, we can make it private. Then we'll define a getter so the user can read the value but not change the value. Another important thing to point out here is that class instances can have their own internal state. Let's imagine we have a button where the user can toggle the emoji and maybe go back and forth between different states. This is a really simple thing to implement in object oriented programming. We'll add another private property to this class called previous and then use a getter to retrieve that value. Then we'll define a change method which will mutate the actual icon value on this instance? When that happens, we'll first change the previous value to the current icon and then update the current icon to the new value. On the first console log, we get the sun icon and undefined. And if we mutate the state a couple times, you can see that our internal values on this class instance have changed. So the end result is that we have a class that's encapsulated all the logic for how an emoji should work. And with TypeScript, we automatically have an interface and documentation for this class. Another cool thing you can do with classes is define static methods. The unique thing about a static method is that it's on the class itself and not an instance of a class. So we'll just go ahead and define a static method here, which itself is actually a pure function, and its job is simply to add 1 to the input argument. The cool thing is that we can now use the emoji class as a namespace to run this function. Now we're going to switch gears and talk about composition versus inheritance for code reusability? This is an area where people tend to get very strong opinions and the actual definition of composition tends to be a little convoluted. But the whole thing really just boils down to this. With inheritance, you start with a larger base class then have child classes inherit all of this functionality and override or Extend it with whatever custom behaviors that they need. Composition, on the other hand, breaks apart the interfaces and logic into a lot of small pieces, then builds up larger functions or objects by combining these pieces together? Let's go ahead and take a look at an example of inheritance. We start with the class of human that has a public property of name and has the ability to say hi. But what if we have a lot of other objects in our program that Similar but implement slightly different features based on what they're designed to do? For example, in a video game, you might have a human character And then a superhuman character that has all of the human abilities but with a little something extra. In TypeScript, we can simply inherit All of the functionality from the human class by saying superhuman extends human. We do have an argument in the constructor, so we'll also need to add that to the constructor without private or public? Then we call super, which will execute the code in the constructor of the parent class, which in our case is just initializing this name property. At this point, we'll go ahead and define an additional method called superpower. Then we'll create an instance of the superhuman class, and what you'll see here is that it Has the superpower method, whereas the regular human does not, but the superhuman can still call all the methods that were defined in the parent class. Inheritance can be great in the right situation, but you want to avoid creating really deeply nested classes because it becomes very hard to debug when things go wrong somewhere in the middle. As an alternative, we can use composition and there are actually multiple different ways we can apply this pattern. In Angular, we can do it by injecting services into our components And also at the template level by creating directives. I'm not going to cover that here, but it's just one of the awesome things about Angular that I've covered in many other videos. Another alternative is to concatenate objects together which I've seen covered in several different articles on the web. The idea here is that you decouple your properties or behaviors into objects or functions that return objects? We can then merge all these objects together into a final function that does everything that we need it to. This is usually referred to as a mixin pattern and it's just a certain type of multiple inheritance. So the terminology between composition and inheritance is sort of convoluted. In any case, this mixin pattern can be very powerful. But in its current form, we lose all of the ergonomics of class based object oriented programming. That might be a good or bad thing depending on who you ask, but TypeScript actually gives us the flexibility to use mixins in a class based format. First, I'm going to pull in this really ugly function from the TypeScript docs, which we'll see in use here in just a minute. From there, I'm going to create a couple of small behavior classes that define the individual behaviors instead of trying to encapsulate everything in a single class? So these classes are more concerned with what something does instead of what something is. Now in the superhero class, there's a very subtle difference from the previous example. Instead of extending the class, we are going to implement multiple classes. When you implement something, you're only concerned about its interface and not its underlying code. It's the apply mixins function that we defined at the very beginning that will Actually, take these interfaces and apply their code to this class. That does leave us with some extra boilerplate code where we have to actually type the return values on the methods for this class? In this case, we have 2 methods, say hi and superpower, both of which return strings. And the final step is the requirement to call that apply mixins function with the base class as the first argument and the mixed in classes as the second argument? Hey. Now, Now, we can finally answer the question, is a hot dog a sandwich? If you use inheritance, then you're going to have to inherit from some base sandwich class, which means it is a sandwich. But, if you use composition, then you can just pull in the hot dog and the bun, meaning that it is not a sandwich. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And, I just wanna say thank you to everybody for an amazing 2018. I'm super grateful for the community around this channel, and I look forward to pushing things even further in 2019. I'm going to be taking a short break for the next couple weeks and then I have a video planned for January 1st. So stay tuned for that. I hope everybody has an awesome end of the year and you can still find me On Slack if you have any questions or need anything at all. Thanks for watching and I'll talk to you soon.
        