Javascript Closures Tutorial – What makes Javascript Weird…and Awesome Pt 3 HD 2017 [w/ subs]



00:00:00 – into some of the weightier issues of
00:00:01 – JavaScript here now that you kind of
00:00:03 – know about the first class functions and
00:00:06 – why code looks the way it does the
00:00:08 – venture of an environment these are all
00:00:10 – kind of things that are created because
00:00:12 – of the event driven environment and so
00:00:14 – let's go ahead and look into what
00:00:18 – closures are in this video this is a
00:00:20 – very misunderstood and and oftentimes
00:00:23 – perceived as very complex thing to
00:00:25 – JavaScript there really isn't that
00:00:27 – complex of an idea if you think about it
00:00:29 – from the right perspective let's look at
00:00:32 – it from an event driven environment
00:00:33 – perspective so here we go on document
00:00:37 – ready function we want to alert a i'm
00:00:40 – going to go ver so this function runs
00:00:45 – when the document is ready sets up this
00:00:48 – listener and this is going to be the
00:00:50 – only guy running when the button is
00:00:52 – clicked the problem is is this function
00:00:56 – already ran created a and it's done the
00:00:59 – function is finished but we don't want a
00:01:01 – to disappear because this function has
00:01:04 – to access it in order to alert it
00:01:06 – javascript to notice is this it notices
00:01:08 – that there's what's called a reference
00:01:10 – to something that is in a different
00:01:12 – scope and so it keeps it keeps this
00:01:17 – variable a alive the textbook definition
00:01:20 – of a closure is something that retains
00:01:23 – state and scope after it executes so
00:01:28 – after this function executes its going
00:01:31 – to remember the state ie it's going to
00:01:33 – remember that variable a exists and that
00:01:35 – variable a equals 1 and scope which
00:01:39 – we'll get into in the next one because
00:01:41 – that's a video all on its own but it's
00:01:42 – going to remember that this exists so
00:01:45 – anytime later on this function that
00:01:47 – references a has access to it and so
00:01:51 – let's go ahead and see if this works
00:01:52 – here i'm going to let save every time I
00:01:55 – click it it's able to alert one and it's
00:01:59 – also able to modify it I can go a plus
00:02:01 – plus which if you're new is a fancy way
00:02:03 – of saying a equals a plus one so now it
00:02:07 – should alert to yep so now a exists it's
00:02:11 – been modified a now
00:02:13 – equals two if I click it again it's
00:02:15 – going to change a 23 and it's going to
00:02:18 – alert it again so this a is in a closure
00:02:22 – this whole function ran but then all the
00:02:26 – variables of the function are saved off
00:02:29 – in memory land and they're accessible by
00:02:33 – this guy as long as I exist so as long
00:02:36 – as this event listener for button exists
00:02:39 – a is stored in JavaScript memory it's a
00:02:43 – closure that JavaScript will not let go
00:02:46 – of as long as there is a reference to a
00:02:49 – so this is also where the javascript is
00:02:52 – really good at taking care of memory and
00:02:55 – the garbage collection cleaning it up
00:02:57 – but this is kind of your first
00:02:58 – introduction to what a memory leak is a
00:03:01 – memory leak is when you have maybe say a
00:03:05 – lot of variables in memory that you
00:03:07 – don't need anymore let's say this button
00:03:10 – is gone we don't need this button click
00:03:13 – event to happen anymore then we're
00:03:15 – actually going to want to go button off
00:03:19 – click that's going to unbind it that
00:03:23 – listener is gone there's no more no
00:03:26 – longer a reference this function is gone
00:03:29 – it's removed there's no longer a
00:03:31 – reference to a and so JavaScript will
00:03:34 – garbage collect this entire function
00:03:38 – this whole area here all the variables
00:03:40 – everything can now get trashed the
00:03:42 – memory can be freed up because
00:03:44 – javascript is smart enough to know that
00:03:46 – it's not necessary anymore there's no
00:03:48 – more code listening to it it can be
00:03:50 – garbage collected and unless you do that
00:03:53 – I mean it's really not a big deal in
00:03:55 – most applications unless you get to
00:03:56 – really huge JavaScript applications
00:03:59 – because honestly remembering that a
00:04:01 – equals 1 is nothing you can do that a
00:04:04 – thousand times over and


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

Comments

comments