hey guys this is Alex I’m glad to have
you back so in this video we’re gonna
take a look at arrow functions and error
functions are basically and used index
in es6 that allows you to work with
functions in JavaScript in a more
concise and clear way so in order to
illustrate the concept let’s say we have
an array of languages like programming
languages so we might have like
JavaScript let’s say Python and maybe
Swift so what you want to do is we want
to loop through all the languages and
one just return a simple message for
each one of them so what we might want
to do is you might have read reassign
languages to the result of the call to
the map function so the map function is
basically a function on the array object
that allows you to loop through all the
elements array and apply some kind of a
logic onto them so in this case the map
function is gonna expect a callback in
this case we can just pass an anonymous
function and the first argument to that
function would be the language so in
this case is just gonna loop through all
the elements in the array JavaScript
Python and Swift and each string is
basically going to be available through
that parameter of Lang or language so in
this case we want to do is let’s say
just we just want to return the language
as well as a simple string rocks and
once that’s done we just want to console
log all the languages so in this case we
get three results and looks like I
forgot the space if okay so we got Jose
for procs Python rocks with drunks so
that’s simple now what’s the idea with
arrow functions now where are functions
is basically nothing new it’s still the
same functions but basically they allow
you to have a clearer syntax so in this
case if we want to use error functions
what I didn’t do is we might just remove
the function keyword and instead add
this throw can arrow which is basically
an equal sign and that greater than sign
so as you can see it doesn’t actually
change any of the output so it’s the
same result it’s just a different syntax
for doing the same
and furthermore because in this case we
just have one argument a language or leg
we don’t actually need any parentheses
around it so we can just remove them
completely and this is what it looks
like so now every function is actually
to reduce these the simple example even
further so you can see that as a
function every function beta has a body
right and the body of a function is
constrained to the curly braces now this
is fine with traditional functions when
you use a function key word but with
arrow functions you can actually
simplify this instead of having the
curly braces you can simply just remove
them and in this case we don’t actually
need any return keyboards to remove that
and what we end up with it’s basically
the parameter the arrow and then the
block of code that’s gonna execute and
then we can just bring this closing
bracket on the same line so this
simplifies the previous example a lot so
we got rid of the function key word we
got rid of the extra parentheses the
curly braces and a return keyword so
this is very clean nice and six nth now
in this example we’re using the map
function now actually the map function
allows you to have the second argument
which is the index of the elements so
the index of a element would just be 0 1
or 2 depending on what the element that
you’re looking through is so in this
case it’s not gonna work
because we don’t have the parentheses
now if you just have the one argument
like web like we have before the
language that’s fine but if you have
more than one argument you’re gonna need
to have the parentheses so that’s why
you have to put back the parentheses
right like that so we have the two
arguments we have an error function and
we have the logic basically on the same
line now if you had more logic or
processing to do then you go so default
back to the curly braces in this case
make sure that you don’t forget the
return keyword so we just want to return
the tail language and like we have
before rocks so this is it but in this
case it’s a very simple operation we’re
just taking the language and we’re just
adding a simple shrink to it if it was
something more
let’s say you had some kind of variables
inside or you’ve had other functions
where you want to do some kind of logic
then yeah it makes sense to use the
curly braces in order to have all that
code incorporated within the function
that within the body of the function now
in this case it’s fine so we can just
remove the curly braces we can move the
return to the top also remove this
bracket to the top now in this case
don’t forget that the return keyword is
actually it’s not needed here it’s
implicit so it’s me that we actually
need to remove it like that so in this
case the return keyword is implicit now
the interesting thing is you don’t need
to put the return keyword like I said so
let’s say if you had something like
console.log language well we’re gonna
get undefined the reason we get that is
because there’s actually return keyword
that returns the result of console.log
now console.log even if you try it in
the browser so I have the chrome console
log open right there so if I do console
log I don’t know if just fool you see
the full right there because that’s the
output of a function but you also see
undefined and undefined is basically
what the function returns
so the log method on the console returns
nothing it basically returns undefined
so it just prints the value to the
console but it doesn’t return any value
so in this case we do have the
implicitly return but it doesn’t return
anything and that’s why we’re getting
undefined now the other thing is let’s
say you had to return some kind of an
object instead of console logging it or
returning it the language with the with
a string concatenated to it so let’s say
you wanted to return some kind of an
object hmm maybe you want to say the
name of the language would be this
string that we provide in the function
so you can see that it’s not gonna work
that actually returns undefined and the
way to basically fix it is to just add
the extra parentheses right there like
so so as you can see right there we get
three objects one basically has a
nine-minute name of JavaScript the other
one Python and the last one is Swift so
that’s how you deal with objects if you
need to return an object from a
Eero function just make sure that you
wrap it with the brackets now in this
case if you had a body of a function if
you wanted to do some kind of an extra
logic within then what you might do is
well you’re definitely gonna need the
return keyword right so you might just
want the the curly braces right there so
that’s gonna make an object for you and
you put name language right and that’s
gonna return the same output as before
right there
so that’s basically it for arrow
functions now the only one last thing
that you need to keep in mind that you
need to be aware is basically the way
that arrow functions treat this keyword
now this keyword Angelus would basically
refers to the underlying object that
you’re working with so in order to
clarify this example it’d be useful to
use JavaScript or es6 classes now we’re
gonna take a look at classes in the very
next video but I just want to introduce
the concept just yet so let’s just use
the traditional way of defining classes
in JavaScript which is basically using
the function keyword now let’s say we
have some kind of a class with a person
now a person might have a first name
and let’s say they also have hobbies so
nothing fancy here just a simple
function now instead of doing any
processing or logic within that we’re
gonna define a this keyword dot
first-name that’s basically gonna create
a property on that function on that
object that’s gonna be instantiated with
that function so that’s just gonna be
equal to the first name and then we
might have those hobbies equals hobbies
those are just the two parameters where
arguments that we passed and let’s say
this this class will have some kind of a
behavior let’s say list hobbies which is
basically just going to list all the
hobbies that this person has so this
would be a function right so we just
assign a function to a property and well
what do we want to do it say we want to
return to this dot hobbies so this would
be a reference to
the person object now it’s gonna make
more sense once we actually instantiate
it which we were going to do in a second
but for now let’s just do this this
hobbies and in this case let’s say we
just want to map through them and like
before we’re gonna pass a callback
function with the argument that’s
basically going to be the hobby of that
person now the only thing we want to do
is let’s say we just want to do a simple
console.log and say that this dot first
name referring to the first name of the
person object plus loves and then the
name of the hobby now so far so good
no errors in the console so let’s say we
want to create an instance of this class
right so let’s say we have left person
equals new person we’re basically
initializing this glass right there and
the first thing would be with the Alex
and for hobbies well let’s say working
out
it’s a coding and lastly meditation is
it like to meditate now this would be it
and so we just want to go ahead and call
the list hobbies method on that object
now in this case we have an interesting
behavior here so we’re actually getting
undefined three times now this undefined
actually comes from here so we’re trying
to call first name on the best keyword
and it’s not really clear as to what’s
going on so let’s see what we’re doing
this code let’s say we didn’t know what
was going on and we’ll try to console
log in to this keyword now in this case
we don’t we can’t see it in the console
log and cold pen but we can actually see
it in the browser so let’s just take a
look there and you can see that the
output of the list keyword gives us the
window object now this is a standard
behavior in JavaScript it’s a little bit
tricky and you just got to keep it in
mind but basically the best keywords
inside a function because like we talked
in the previous video a function has its
own scope right
so this keyword actually doesn’t make
sense within that function is that’s
just how traditional functions in
JavaScript work so this returns the
window object now actually the trick is
if we use the babel preprocessor like I
showed you in a previous video that’s
gonna change the behavior so if we tried
that and we actually get an error here
because it says cannot read properly
first name of undefined and we also get
the undefined keyword right there so the
this keyword within this function then
this anonymous function is gonna be
undefined if we turn on the babble of
preprocessor right but if I turn it off
like before we’re gonna get the window
object the reason we get undefined for
the first name well that’s just simply
because the window object doesn’t have
any first name property defined on it
now let’s say if we used instead of
having the first name as a property in
the class let’s say instead we created a
property called name and we tried to
console.log that name now in this case
it’s gonna give us an interesting result
it says quote pen loves working out the
reason is somehow quote pen basically
creates a property on the window object
that refers to the name of the website
that we’re on then in this case we’re
gonna get anything but if you try that
within the Copan console as you might
expect you’re gonna get cold pen so
that’s the reason why that’s happening
so this might be a little bit confusing
now like I said this behavior is really
tricky and if you don’t know about it
it’s really it can really mess you up in
this case the error functions will come
to the rescue so instead of using the
traditional function keyword and let’s
just put back the first name just for
more clarity so instead of using the
function keyword let’s just use arrow
functions and let’s see what happens
with that now this gives us the proper
output so we get all of the three
statements with the proper first name of
the object in this case it’s Alex
because we passed Alex is the first
argument so this is how error functions
work so basically they allow you to
have access to the list keyword that in
this case refers to the person object
from within the function so the function
right here the anonymous function that
we passed it keeps the same reference to
the list keyword so we don’t have to do
anything extra in order to get to get
access to it so but let’s say you wanted
to use the old approach with the
functions well it’s so possible to have
this to get this working without using
error functions so one approach one
typical approach would be to have a
separate variable so you could either
use var or you can use let and a typical
name will be self so you assign this
object to the self variable and instead
of using this you basically just use
self so as you can see it’s gonna work
perfectly did you get all the three
statements with the first name the other
approach is instead of doing that you
can still keep it this keyword but you
can also use a divine method on the
function so basically every function and
that’s the other thing about functions
functions are actually object so every
object has a method on it that you can
basically call like era like arrays have
methods strings have methods well
functions are also objects just like
arrays and shrinks so you can call
methods on them so in this case you can
call a special method that’s called bind
and it basically allows you to bind in
this case it allows you to bind the list
keyword to the context or the scope of
the function so the list keyword that
we’re passing into buying well this is
the same this keyword that exists within
this function right so you’re passing it
there it’s gonna be the reference to the
person object and in this case we get
the proper output in the console and the
very last approach because we’re using
map map actually allows you to pass a
second argument to it so if you pass
this to it it allows you to basically
get this working within the context of
the function to make it clear let’s just
look at the documentation of map and
now if you go to Mozilla Docs you’re
really gonna see this this box where
there tells you all about the syntax and
you can see that the second argument is
actually the this keyword so this
argument that this arc parameter allows
you to pass the best keyword so that you
can get the access to the underlying
object within the callback function
right so going back to our example we
have this function right here so when we
passed this to it it allows you to have
access to the this keyword that exists
within this function which is basically
the person object so all this is kind of
tricky and requires extra logic to do in
this case the simplest solution is to
just use error functions so in this case
we can just refactor your code in the
following way and just remove the
function keyword in this case it works
but you can simplify it even further
because we just have one argument which
can we move the of the brackets right so
we get the the same proper output now if
you had more arguments like I said if
you wanted to have access to the index
that the map function provides you
you’re gonna have to add the brackets
back so this is basically it for arrow
functions I hope you liked the video and I hope to see you next time
you back so in this video we’re gonna
take a look at arrow functions and error
functions are basically and used index
in es6 that allows you to work with
functions in JavaScript in a more
concise and clear way so in order to
illustrate the concept let’s say we have
an array of languages like programming
languages so we might have like
JavaScript let’s say Python and maybe
Swift so what you want to do is we want
to loop through all the languages and
one just return a simple message for
each one of them so what we might want
to do is you might have read reassign
languages to the result of the call to
the map function so the map function is
basically a function on the array object
that allows you to loop through all the
elements array and apply some kind of a
logic onto them so in this case the map
function is gonna expect a callback in
this case we can just pass an anonymous
function and the first argument to that
function would be the language so in
this case is just gonna loop through all
the elements in the array JavaScript
Python and Swift and each string is
basically going to be available through
that parameter of Lang or language so in
this case we want to do is let’s say
just we just want to return the language
as well as a simple string rocks and
once that’s done we just want to console
log all the languages so in this case we
get three results and looks like I
forgot the space if okay so we got Jose
for procs Python rocks with drunks so
that’s simple now what’s the idea with
arrow functions now where are functions
is basically nothing new it’s still the
same functions but basically they allow
you to have a clearer syntax so in this
case if we want to use error functions
what I didn’t do is we might just remove
the function keyword and instead add
this throw can arrow which is basically
an equal sign and that greater than sign
so as you can see it doesn’t actually
change any of the output so it’s the
same result it’s just a different syntax
for doing the same
and furthermore because in this case we
just have one argument a language or leg
we don’t actually need any parentheses
around it so we can just remove them
completely and this is what it looks
like so now every function is actually
to reduce these the simple example even
further so you can see that as a
function every function beta has a body
right and the body of a function is
constrained to the curly braces now this
is fine with traditional functions when
you use a function key word but with
arrow functions you can actually
simplify this instead of having the
curly braces you can simply just remove
them and in this case we don’t actually
need any return keyboards to remove that
and what we end up with it’s basically
the parameter the arrow and then the
block of code that’s gonna execute and
then we can just bring this closing
bracket on the same line so this
simplifies the previous example a lot so
we got rid of the function key word we
got rid of the extra parentheses the
curly braces and a return keyword so
this is very clean nice and six nth now
in this example we’re using the map
function now actually the map function
allows you to have the second argument
which is the index of the elements so
the index of a element would just be 0 1
or 2 depending on what the element that
you’re looking through is so in this
case it’s not gonna work
because we don’t have the parentheses
now if you just have the one argument
like web like we have before the
language that’s fine but if you have
more than one argument you’re gonna need
to have the parentheses so that’s why
you have to put back the parentheses
right like that so we have the two
arguments we have an error function and
we have the logic basically on the same
line now if you had more logic or
processing to do then you go so default
back to the curly braces in this case
make sure that you don’t forget the
return keyword so we just want to return
the tail language and like we have
before rocks so this is it but in this
case it’s a very simple operation we’re
just taking the language and we’re just
adding a simple shrink to it if it was
something more
let’s say you had some kind of variables
inside or you’ve had other functions
where you want to do some kind of logic
then yeah it makes sense to use the
curly braces in order to have all that
code incorporated within the function
that within the body of the function now
in this case it’s fine so we can just
remove the curly braces we can move the
return to the top also remove this
bracket to the top now in this case
don’t forget that the return keyword is
actually it’s not needed here it’s
implicit so it’s me that we actually
need to remove it like that so in this
case the return keyword is implicit now
the interesting thing is you don’t need
to put the return keyword like I said so
let’s say if you had something like
console.log language well we’re gonna
get undefined the reason we get that is
because there’s actually return keyword
that returns the result of console.log
now console.log even if you try it in
the browser so I have the chrome console
log open right there so if I do console
log I don’t know if just fool you see
the full right there because that’s the
output of a function but you also see
undefined and undefined is basically
what the function returns
so the log method on the console returns
nothing it basically returns undefined
so it just prints the value to the
console but it doesn’t return any value
so in this case we do have the
implicitly return but it doesn’t return
anything and that’s why we’re getting
undefined now the other thing is let’s
say you had to return some kind of an
object instead of console logging it or
returning it the language with the with
a string concatenated to it so let’s say
you wanted to return some kind of an
object hmm maybe you want to say the
name of the language would be this
string that we provide in the function
so you can see that it’s not gonna work
that actually returns undefined and the
way to basically fix it is to just add
the extra parentheses right there like
so so as you can see right there we get
three objects one basically has a
nine-minute name of JavaScript the other
one Python and the last one is Swift so
that’s how you deal with objects if you
need to return an object from a
Eero function just make sure that you
wrap it with the brackets now in this
case if you had a body of a function if
you wanted to do some kind of an extra
logic within then what you might do is
well you’re definitely gonna need the
return keyword right so you might just
want the the curly braces right there so
that’s gonna make an object for you and
you put name language right and that’s
gonna return the same output as before
right there
so that’s basically it for arrow
functions now the only one last thing
that you need to keep in mind that you
need to be aware is basically the way
that arrow functions treat this keyword
now this keyword Angelus would basically
refers to the underlying object that
you’re working with so in order to
clarify this example it’d be useful to
use JavaScript or es6 classes now we’re
gonna take a look at classes in the very
next video but I just want to introduce
the concept just yet so let’s just use
the traditional way of defining classes
in JavaScript which is basically using
the function keyword now let’s say we
have some kind of a class with a person
now a person might have a first name
and let’s say they also have hobbies so
nothing fancy here just a simple
function now instead of doing any
processing or logic within that we’re
gonna define a this keyword dot
first-name that’s basically gonna create
a property on that function on that
object that’s gonna be instantiated with
that function so that’s just gonna be
equal to the first name and then we
might have those hobbies equals hobbies
those are just the two parameters where
arguments that we passed and let’s say
this this class will have some kind of a
behavior let’s say list hobbies which is
basically just going to list all the
hobbies that this person has so this
would be a function right so we just
assign a function to a property and well
what do we want to do it say we want to
return to this dot hobbies so this would
be a reference to
the person object now it’s gonna make
more sense once we actually instantiate
it which we were going to do in a second
but for now let’s just do this this
hobbies and in this case let’s say we
just want to map through them and like
before we’re gonna pass a callback
function with the argument that’s
basically going to be the hobby of that
person now the only thing we want to do
is let’s say we just want to do a simple
console.log and say that this dot first
name referring to the first name of the
person object plus loves and then the
name of the hobby now so far so good
no errors in the console so let’s say we
want to create an instance of this class
right so let’s say we have left person
equals new person we’re basically
initializing this glass right there and
the first thing would be with the Alex
and for hobbies well let’s say working
out
it’s a coding and lastly meditation is
it like to meditate now this would be it
and so we just want to go ahead and call
the list hobbies method on that object
now in this case we have an interesting
behavior here so we’re actually getting
undefined three times now this undefined
actually comes from here so we’re trying
to call first name on the best keyword
and it’s not really clear as to what’s
going on so let’s see what we’re doing
this code let’s say we didn’t know what
was going on and we’ll try to console
log in to this keyword now in this case
we don’t we can’t see it in the console
log and cold pen but we can actually see
it in the browser so let’s just take a
look there and you can see that the
output of the list keyword gives us the
window object now this is a standard
behavior in JavaScript it’s a little bit
tricky and you just got to keep it in
mind but basically the best keywords
inside a function because like we talked
in the previous video a function has its
own scope right
so this keyword actually doesn’t make
sense within that function is that’s
just how traditional functions in
JavaScript work so this returns the
window object now actually the trick is
if we use the babel preprocessor like I
showed you in a previous video that’s
gonna change the behavior so if we tried
that and we actually get an error here
because it says cannot read properly
first name of undefined and we also get
the undefined keyword right there so the
this keyword within this function then
this anonymous function is gonna be
undefined if we turn on the babble of
preprocessor right but if I turn it off
like before we’re gonna get the window
object the reason we get undefined for
the first name well that’s just simply
because the window object doesn’t have
any first name property defined on it
now let’s say if we used instead of
having the first name as a property in
the class let’s say instead we created a
property called name and we tried to
console.log that name now in this case
it’s gonna give us an interesting result
it says quote pen loves working out the
reason is somehow quote pen basically
creates a property on the window object
that refers to the name of the website
that we’re on then in this case we’re
gonna get anything but if you try that
within the Copan console as you might
expect you’re gonna get cold pen so
that’s the reason why that’s happening
so this might be a little bit confusing
now like I said this behavior is really
tricky and if you don’t know about it
it’s really it can really mess you up in
this case the error functions will come
to the rescue so instead of using the
traditional function keyword and let’s
just put back the first name just for
more clarity so instead of using the
function keyword let’s just use arrow
functions and let’s see what happens
with that now this gives us the proper
output so we get all of the three
statements with the proper first name of
the object in this case it’s Alex
because we passed Alex is the first
argument so this is how error functions
work so basically they allow you to
have access to the list keyword that in
this case refers to the person object
from within the function so the function
right here the anonymous function that
we passed it keeps the same reference to
the list keyword so we don’t have to do
anything extra in order to get to get
access to it so but let’s say you wanted
to use the old approach with the
functions well it’s so possible to have
this to get this working without using
error functions so one approach one
typical approach would be to have a
separate variable so you could either
use var or you can use let and a typical
name will be self so you assign this
object to the self variable and instead
of using this you basically just use
self so as you can see it’s gonna work
perfectly did you get all the three
statements with the first name the other
approach is instead of doing that you
can still keep it this keyword but you
can also use a divine method on the
function so basically every function and
that’s the other thing about functions
functions are actually object so every
object has a method on it that you can
basically call like era like arrays have
methods strings have methods well
functions are also objects just like
arrays and shrinks so you can call
methods on them so in this case you can
call a special method that’s called bind
and it basically allows you to bind in
this case it allows you to bind the list
keyword to the context or the scope of
the function so the list keyword that
we’re passing into buying well this is
the same this keyword that exists within
this function right so you’re passing it
there it’s gonna be the reference to the
person object and in this case we get
the proper output in the console and the
very last approach because we’re using
map map actually allows you to pass a
second argument to it so if you pass
this to it it allows you to basically
get this working within the context of
the function to make it clear let’s just
look at the documentation of map and
now if you go to Mozilla Docs you’re
really gonna see this this box where
there tells you all about the syntax and
you can see that the second argument is
actually the this keyword so this
argument that this arc parameter allows
you to pass the best keyword so that you
can get the access to the underlying
object within the callback function
right so going back to our example we
have this function right here so when we
passed this to it it allows you to have
access to the this keyword that exists
within this function which is basically
the person object so all this is kind of
tricky and requires extra logic to do in
this case the simplest solution is to
just use error functions so in this case
we can just refactor your code in the
following way and just remove the
function keyword in this case it works
but you can simplify it even further
because we just have one argument which
can we move the of the brackets right so
we get the the same proper output now if
you had more arguments like I said if
you wanted to have access to the index
that the map function provides you
you’re gonna have to add the brackets
back so this is basically it for arrow
functions I hope you liked the video and I hope to see you next time
Please follow and like us: