Javascript ES6 Arrow Functions [w/ subs]



00:00:00 – hi welcome to es6 tutorials my name is
00:00:11 – Jason swara and today we're going to
00:00:13 – have a look at arrow functions or fat
00:00:15 – arrow functions as they're sometimes
00:00:16 – called purpose of the error function is
00:00:20 – to give us as developers a cleaner and
00:00:22 – more concise syntax than we're being
00:00:24 – used to there is also an added benefit
00:00:26 – of the way it binds to the this keyword
00:00:29 – which we'll have a look at later there
00:00:32 – are various ways that we can write an
00:00:34 – arrow function so let's dive straight in
00:00:36 – and have a look at that so if we compare
00:00:40 – the old syntax for writing a function
00:00:42 – which would look like that function
00:00:46 – keyword the name parameters and function
00:00:50 – body so if we rewrite this function with
00:00:56 – the new arrows in txt it would look a
00:00:58 – bit like this it's going to change some
00:01:00 – of the numbers
00:01:11 – and returned by be put that up there the
00:01:26 – parameter list I'm just going to comment
00:01:33 – that out for the second right okay so
00:01:35 – let me just call multiply two by two
00:01:40 – staggering stuff right just put a
00:01:46 – variable in here let's call this result
00:01:49 – imaginatively and then we can just log
00:01:52 – that out to the console
00:02:01 – okay if we run that and we get for now
00:02:09 – you're probably wondering what the fuss
00:02:11 – is about that hasn't really saved as
00:02:13 – anything as it and though it hasn't not
00:02:16 – at all but and there is a big but here
00:02:19 – we can make this syntax a little more
00:02:22 – terse so what we can do is get rid of
00:02:26 – the curlies and move this up onto one
00:02:33 – line and get rid of the return statement
00:02:35 – now if you run that and we get the four
00:02:41 – again now that has given us something so
00:02:43 – for these simple functions that we have
00:02:45 – dotted all over our code is we can tidy
00:02:48 – them up into just one very small light
00:02:51 – now if you've just got a single
00:02:54 – parameter you can get this even smaller
00:02:56 – and get rid of that so the parentheses
00:02:59 – go and what we'll do is that obviously
00:03:04 – now only takes the one parameter so if
00:03:08 – we square a and then log the result
00:03:13 – again if we run that should get four and
00:03:14 – there we go when you're writing on one
00:03:18 – line it's just worth bearing in mind is
00:03:22 – you can't do this so I'll skip a
00:03:25 – functionally go dum dum dum dum
00:03:30 – one so if we ran the front look at that
00:03:47 – angle is a bit space so we get the one
00:03:53 – out there but what you can't do is split
00:03:56 – it across lines between the parenthesis
00:04:00 – and the fat arrow if we try and run that
00:04:03 – now we get a syntax error unexpected
00:04:05 – token now what you can do is this and
00:04:16 – that is valid why you would want to move
00:04:21 – a single line code over multiple lines
00:04:24 – is anybody's guess but it can be done so
00:04:29 – look at some more code to help us
00:04:31 – understand them better so if we took
00:04:33 – this piece of code so we've got an array
00:04:35 – of animals and then what we doing we're
00:04:40 – just using the map function passing in
00:04:43 – the animal each time and just getting
00:04:46 – returning the length so console dot log
00:04:50 – that helps this down 3358 so that's
00:04:58 – working fine what we can do is make this
00:05:02 – code much more succinct so if we took
00:05:06 – the same code and condensed it with an
00:05:10 – arrow function to look like this so we
00:05:15 – got still calling the map the animal
00:05:19 – that's been passed in free and then
00:05:21 – we're just pushing the length back up
00:05:24 – now it's important to note here and
00:05:26 – something should maybe have mentioned
00:05:30 – earlier is as you can see there's no
00:05:31 – return keyword here now if you remove
00:05:36 – the curly braces return is implicit it
00:05:39 – will be done for free however if the
00:05:42 – curly braces are
00:05:44 – there ie a function body is there you
00:05:47 – have to use the return keyword so just
00:05:50 – bear that in mind if we now log this
00:05:53 – should work in exactly the same way
00:05:56 – there you go 3 3 5 8 but in a much
00:06:02 – simpler clearer to read line of code
00:06:05 – short of functions were one of the
00:06:08 – drivers for the new arrow syntax the
00:06:10 – other was the way that this the keyword
00:06:13 – this behaves arrow functions do not
00:06:17 – create their own this context so when we
00:06:20 – use this with an arrow function they
00:06:23 – work as we would expect them to do
00:06:26 – before arrow functions every function
00:06:29 – defined its own this value this could
00:06:32 – prove annoying and add complexity and
00:06:35 – make it code difficult to maintain so
00:06:38 – let's just have a look a bit of code to
00:06:40 – illustrate so we've all seen code like
00:06:43 – this and we probably all written it for
00:06:45 – maybe a click event handler or some
00:06:47 – event handler so we wanted to access
00:06:50 – something in the parent scope which
00:06:53 – wasn't available to us within this
00:06:55 – function here we used to take this and
00:06:58 – assign it to that and then we would call
00:07:00 – that text and it would become very
00:07:02 – confusing and and it almost had a bit of
00:07:05 – a code smell to be honest arrow
00:07:07 – functions can help us here so let's have
00:07:10 – a quick look at some more code
00:07:20 – you
00:07:24 – so as you can see we've removed code
00:07:28 – making it more readable but more
00:07:31 – importantly we've removed that variable
00:07:33 – and we're just using this and this this
00:07:37 – keyword is lexically scoped to the outer
00:07:40 – function so we get a value so if we run
00:07:44 – this code you shouldn't get the
00:07:46 – undefined there you go hello Bob all is
00:07:52 – not necessarily Rosie in the land of
00:07:54 – arrow functions and there are some
00:07:57 – gotchas let's have a look at a few of
00:07:59 – these now arrow functions really our
00:08:06 – best use for non method functions so if
00:08:09 – we try and use them as a method function
00:08:11 – we could run into a few problem so if we
00:08:14 – look at this piece of code you'll see
00:08:17 – here we've got logged text arrow as a
00:08:19 – fat arrow function there returning this
00:08:22 – not greeting text so we should get hello
00:08:24 – and we got a more standard function
00:08:28 – definition here called log.txt VAR so
00:08:33 – when we run the code greeter log.txt
00:08:36 – arrow returns undefined well as log text
00:08:41 – file returns hello now when we call log
00:08:46 – text arrow we're getting an undefined
00:08:49 – because this is still bound to the
00:08:51 – global context now if we're in browser
00:08:54 – land that would be the window object and
00:08:56 – it's effectively saying if we're in
00:09:00 – browser land that give me window
00:09:03 – greeting text which is obviously
00:09:05 – undefined really to get around this
00:09:10 – problem or to solve this problem is you
00:09:12 – need to use a function expression such
00:09:14 – as log.txt VAR there but es6 does give
00:09:20 – us a shorthand syntax there just to help
00:09:23 – tidy up the code so all we need to do is
00:09:27 – just get rid of that colon bring that up
00:09:30 – there get rid of that and enclose
00:09:34 – code block us save that and if we run
00:09:39 – that again there you go hello hello also
00:09:45 – with arrow functions you can't use the
00:09:47 – new operator so this is not allow this
00:09:54 – sort of thing so creating a new object
00:09:56 – and then try and new it up we try and
00:10:00 – run that type error my object is not a
00:10:04 – constructor also arrow functions don't
00:10:09 – have a prototype property so you can't
00:10:14 – do anything with the prototype so just
00:10:20 – to prove that it's not there so if I try
00:10:22 – and lock it out we'll get an undefined
00:10:24 – doesn't exist and finally really the
00:10:28 – yield keywords not usable with arrow
00:10:33 – functions off the bat you can use them
00:10:35 – if they are sort of nested within an
00:10:37 – inner function without but other than
00:10:40 – that you can't use so that was a
00:10:42 – whistle-stop tour of arrow functions and
00:10:45 – as we can see they make our lives better
00:10:48 – by giving us a clearer and more concise
00:10:52 – syntax particularly if we were using
00:10:54 – callback chains etc you know our code is
00:10:58 – just going to be smaller and easier to
00:11:00 – manage anyway thanks for listening


Video Url:
http://youtu.be/EQkA_IrxOSQ

Comments

comments