Before we actually represent different behavior of aero functions than it's in case of standard functions,
I want to give you a little example and show how convenient is to use aero functions with our helpers.
I'm not going to write the code in S5.
Let's use directly.
It's six here, so create numbers right away and place some numbers.
Then assume that we want to create a new era for that, I will use one of the era helper methods, which
is map, so create variable and call it double assign to it numbers dot map.
So here we don't need to use parentheses because we are going to use only one parameter, which will
be the current item, so.
Right, no, then use error function and then number multiplied two to.
Let's run in council the variable double.
Then reload and we have new right, which consists of double numbers.
All right, just for information, I would like to recommend that when you are going to be using a helper's
would be more convenient to use aero functions with them because those helpers actually have one statement.
Therefore, it will allow you to write code in more concise form.
OK, actually, we have seen mostly the syntactic changes in aero function so far, which are made in
S6 version.
But there is also one big difference between standard and aero functions, which you should definitely
take into account.
I'm going to talk about lexical this.
In order to understand what it means, I don't want to talk a lot about theory, let's just write an
example and see what it means at first.
Let's write is five could create object and call it person yes.
Five.
Then in 30 years, some properties, first name as Niek and last name as DOP, then create method inside
objects and call it.
Say full name and assign to it anonymous function.
Just for demonstration purposes, I'm going to return function in which we will get full name of the
person.
So right here at Castle, that lock and we're going to use this, which, as you remember, is special
variable and it points to an object and actually depends on where it exists, lexically.
So.
Right.
This dot first name.
Plus space here, then, plus these last name.
Let's invoke, say, fullname method, right person is five that say full name in order to invoke return
function, we just need to place you another parentheses.
Before I reload, I want you to think about what will be the result, I'm sure you guessed that result
is undefined values.
It's because this function is not bound to any specific object, and in that case, this variable points
the global window object.
In order to prove that, let's run it in council, right, a lot like this.
You see that we got window object, as you remember, we used a little trick here, we have to create
variable outside of this function and generally this variable is called us self or sometimes that let's
call it that.
And we have to assign to this variable this.
Which in this case points to person is five object, then instead of this variable insert here that
if we reload, we will get Negrito.
And also you see that that variable points to person object.
All right, there is another way to do that, which allows us to avoid creating new variable, we can
use your BINDE method.
And indicating it this variable as an argument which actually points to person object also, let's change
back of that into this.
And delete that variable.
Reload.
And we have the same output.
Obviously, instead of this, we can insert your personal object.
Person is five.
And the result will be the same.
All right, so we need all of this stuff in is five, but in Essex, everything is much more simpler.
We just need to create variables.
Also, we don't need to use Binta method.
We can just use our function.
And I think that it's one of the best use case of arole functions.
OK, let's copy this function and transform it as ESX version right here const.
Person, yes, six.
Then.
Change function into a role function.
I'm going to transform also this string value into template string.
Then delete, find method and also write here below person S6.
Let's reload and we have the same needed result.
It happens because in case of error functions, this variable points to functions surrounding scope.
So in this case, this variable in Saiful named Method points to person object.
And because of that, Saiful name function scope is surrounding scope of our written function.
Therefore, this variable in return function points to person object.
Makes sense.
OK, so this is very helpful and important feature of arrow functions because it allows us to avoid
using the tricks which we had to use in case of S5 code.
This stuff may be a bit confusing for you.
So I'm going to use another example.
As you see, we have here having elements and I'm going to attach that listener to this element.
So write documents and use your selector method.
Place your H1 hiding element, then attach event listener with click event and also write your anonymous
function.
OK, let's check what this variable points here, right?
Consider this.
Reload, then click on Harring, and it said that it points to collect Element itself, let's create
function expression inside anonymous function, right variable A equals to function.
And let's say we want to change the color of having elements into Red Unclick, so write this thought.
Style, that color.
Equals to read and then invoke this function.
Reload, then click.
And we have an error, that's because in this case, as you order to get this variable inside function
eight points to global window object, if we transform function into arole function, then it's this
variable will act like outer functions.
This.
So remote, Callick and the Hadrien became red.
All right, I'm sure that now it makes sense to you.
Before we finish, I am going to show you one thing.
When we deal with objects with S6 and also objects contain methods, for example, in this case, person
ethics.
Here we have a method Saiful name.
We're able to get rid of function keyword and place parentheses with Machel's name, that it will work
in the same way, but as a regular function and not as Arul function.
Otherwise we wouldn't get your Nito in council.
OK, so we have learned how error functions.
Work in Essex and I recommend you to take into account the issue regarding this variable in order to
avoid weight box errors.
All right, let's move on.