Arrow Functions

[00:00:00]
>> Maximiliano Firtman: Arrow functions, there are people that right now are actually really fans of arrow functions and they're using arrow functions as much as they can because they feel like, they're cool guys, okay, if they're using arrow functions. But you shouldn't be using arrow functions always because arrow functions works differently.

[00:00:21]
So you should understand the difference between a normal function and an error function, and use it whenever you feel it should work. So the idea is that here you have a couple of examples just to render quickly. So let's analyze first the first one, it's multiply variable. Yeah, that's fine, you can do that with a function A and B.

[00:00:41]
So instead of using the function I can get out of the function keyword and replace that with this with the arrow, the fat arrow. That's the name of this operator, the fat arrow, because this is the thin arrow and this is the fat arrow, and then we pass a block which is okay.

[00:01:03]
But there are other advantages of using arrow functions. For example, one advantage is that if you have only one line, you don't need the code block. Okay, you don't need it. And also, when you don't have a code block, when you don't have curly braces, you have an implicit return.

[00:01:22]
So I don't need the return keyword. I can write this like this. Which for this particular example, it's pretty cool. I'm still seeing the 12 here. So we can see here this is multiply output so we can see that, okay, this one. And it works, okay, nothing fancy.

[00:01:44]
I'm pretty sure that you have seen this. I have a same example here with dividing, okay? So that's the first part of the arrow functions. If you don't have any arguments, which is not the case here, but if I have here. So another function without arguments, you just use empty parentheses.

[00:02:06]
And if you have only one argument, for example, I will say, I will add 1 to x. If you have only one arguments, you don't need the parentheses, only with one argument, okay? It's just the only syntax issue here. And something that is typically important when talking about arrow functions, there are many differences.

[00:02:31]
As I mentioned before, the arguments object is different. In a traditional function, you have an argument that is actually this one. Okay, so show arguments is tri define the arguments output that we have here. And when you have arrow functions, the arguments, objects it's not actually there, okay?

[00:02:54]
So it's not working, but that this is kind of an advanced situation. I'm not sure if you have used it before. So without getting into that, let's talk about something that is really important, that is the this. The this object. Okay, and probably you have seen this before.

[00:03:11]
The this in JavaScript is not always what you think it is, okay? So actually, when we are executing this, okay? Who is this dot count, by the way, you're expecting to be this code. By the way, is ECMAScript compatible? What do you think? This is a function. So it's not a class, so it is ECMAScript compatible.

[00:03:37]
So some of you are reading this as a class for some reason, but that's not the case, okay? But I know that it happens, so that's what I'm saying. So it's a function, so yeah, it starts at count 0, but who is this?
>> Student: It's the function definition.

[00:03:53]
>> Maximiliano Firtman: It's the function, does the function have its own this object? So that's an even further class declaration. Actually, the real answer, who is this right now? Is that we don't know because it depends on who is executing and how is executing this function. As we are executing like this, I also I'm creating a new counter here.

[00:04:23]
And what is this? I'm creating a new counter, but counter is a function.
>> Student: The new keyword returns the instance when it's a class, I don't know about when it's a.
>> Maximiliano Firtman: Well, this is ECMAScript compatible. This is perfect ES5. Before ES6, we didn't have the class syntax.

[00:04:44]
We didn't have it. The way to create classes, as we know it today, was with the function keyword. So if I execute the function like this, this is gonna be window, the global option. If I execute the function like this, I'm creating a new instance of counter. And then this is that object that I'm creating.

[00:05:10]
Okay, but when we are in a set interval, that might not be the case. It depends if you have a function here or an arrow function. So it gets complicated, and there are plenty of other courses at frontier masters you get more insight on this okay, to spend more time playing with this object with JavaScript foundations.

[00:05:36]
But let's say for now that If you wanna make sure that we can change this to a cast if you feel like it's better, okay? For now, because we haven't seen modern syntax, let's create the constructor that set the count to zero. So I think that you will be happier with this version.

[00:05:57]
So we have a constructor that says the count of zero. And then we should create a method, or we can do this in the constructor as well,
>> Maximiliano Firtman: That every one second should be,
>> Maximiliano Firtman: Adding one to the counter, okay? So If you wanna make sure that this is this variable.

[00:06:21]
If you wanna make sure, you need to use arrow functions. If you don't use arrow functions, the this object can change. Also, again, I don't wanna get into too much detail here on this because we have. We need time for a lot of other stuff, I'm not sure if you have seen that when you have a function, you combine that function to something else with the bind method.

[00:06:52]
Have you seen that? With bind, you can change the this. You can change who is this for that execution. But anyway, I don't wanna spend too much time on the this object here, but have in mind that our functions are changing the nature of the this object when you are using JavaScript.