Next is How to never lose your scope
One of the most common problems JavaScript developers encounter is losing their scope. In this lesson we're going to solve that problem and explain to you exactly how scope works. By the end of this lesson you should master the world of scopes and objects. We'll complete the Life clock as well, and with it we will wrap our conversation about objects.
Video Transcript
00:00We're absolutely ready for the biggest topic
00:03we've been rushing and playing around with it throughout the last few chapters and that's scope and
00:09We have now an issue of scope in the last lesson if you remember we got stuck
00:13We have to send some information. We had no way to do it now. We're gonna solve it
00:17We'll show you how to do it as we complete creating our timer. This is exciting
00:22This is exciting and when I'm talking about my problem
00:25I mean that our scope reference is not really working because we're getting that window
00:30When we do our interval
00:32I want to talk a little bit more about scope in general and have a better clear understanding of what scope actually is
00:39So we talked about earlier and I'm just scrolling we did a lot last lesson
00:44We said that one of the things with scope is if we define a variable globally outside of a function
00:49It's gonna be available anywhere, but if we go ahead and create a variable inside of a function
00:55It's not gonna be available everywhere. Where is it gonna be available?
00:59For example, if we came here and we did here in our console here
01:03We the lot we traced out oto in our console oto our I'm gonna log out. I'm also gonna
01:11Try to trace out our o sample
01:14Which is kind of crazy, right? I'm trying to refer to myself using my own name inside of myself
01:19So if I'm just gonna call that function out here for a second, I'm gonna make sure that my interval is not running
01:26So let me just find where that is. I'll comment it out for a second and
01:30I'll click here on a refresh. We should see in our in our output that's coming out
01:34We're gonna see that object now
01:36The reason why we see that object in our output is very simple. We see the output
01:41It is because the scope of this function when we're inside of this function
01:45It's looking for that Oh sample, but it can't find it in here
01:49It can't find it oto as one of the variables of the object
01:52So it goes one scope up which is basically one curly bracket up and it goes in surges and it says, okay
01:58I see your o sample now the same goes if I traced inside of here the age variable
02:03Now if I trace the age variable inside of here
02:06First of all if I go ahead and create here another variable with the exact same name age
02:12Let's say and I said that to be 10 instead of the value that we have of the age object itself
02:18What do you think would happen?
02:20One is we're not overriding our age variable here
02:23We're actually creating a completely separate unique variable
02:26But what we're doing is was we're making it impossible for us to see that external variable
02:31So when we try to approach our variable will always get the one that is nearest us and in this case
02:36It would be this age 10
02:38And if I go ahead a step deeper if I create here a variable called age
02:42Which I could and I may and I come here and I said the variable of 100. I'm not overriding this value
02:48I'm not overriding this value. This is a completely unique variable. That is living inside of the scope inside of this area
02:55So literally because I create this variable. I don't have access to this variable
03:34So if I click your save we'll see that 100 in our output
03:37So that's really the basic basic basic of scope and we're saying scope
03:42We're literally saying what axis do we have from any point in time in any place now if we go back to our problem
03:48We're looking at our interval and we're calling the Oh update function
03:52Notice that we're not passing in the object, but we're actually passing in the actual function
03:57And this function is called in a completely different place
04:00It's called in the global area of the window and that is why our this ends up to be our actual
04:07function itself and not our object for us to be able to make sure that we're always going to be
04:12accessing this function as a method that belongs to this object we have to use a little trick and
04:18That trick is gonna be basically to go around it. I'm gonna create another variable called self now
04:24It could be any variable and I'm just gonna define it as our this but in this case we could define it as our oh
04:31Really but even more even better than that. We don't even have to do that
04:34well, we could do is literally just come inside here and create another function and
04:40Literally have inside of that function and I'm gonna wrap it around into this thing
04:45I'll break lines so you could actually see the structure here and
04:48Literally, I'm sending in a completely new function and inside of that function
04:53I am calling and and and defining that variable now the big difference between this and that is that when I'm calling my Oh update
04:59It's gonna look for Oh, it's not finding it in this scope
05:03So it's gonna excuse me. It's gonna find it in the scope above it, which is right here
05:07So literally by defining it with the accurate name of that item
05:12Wrapped inside of another function. I'm literally making sure that when I call the update
05:16It's still connected and attached to that object. So if I go ahead and run this one more time
05:22We should see now that our object now when it's refreshing is gonna come back as our object and that's gonna solve our problem
05:29So now that our problem is solved and our Oh update is actually calling itself. We could start working on our Oh update
05:36So what do we want to do? So step one is we want to make sure that we're updating our seconds
05:41So to do that, I'm just gonna call the function Oh update seconds
05:47What I'm gonna do next is I'm gonna actually create that function
05:49So I'm gonna go in and excuse the dog that is barking and really annoying me right now cuz in the middle of a recording
05:56All right, so Oh update seconds
06:00We what we want to do is we want to refer to our seconds variable
06:03So let's find it was called it was called it was called seconds
06:06so I'm gonna go ahead and just call this dot seconds and
06:11I want to update the value in a nice way to shortcut way
06:14Which we didn't see that is just writing plus plus and that it actually equals this
06:21Seconds plus one now if we're already talking about this shortcut
06:24There's a two different really nice shortcuts as one is plus equals and then putting whatever value we want
06:31We could do it's a minus or in the case if we're only adding one
06:33We could just put plus plus and that will automatically update our value
06:38the last thing that we need to do because we're really what we really want to do is we don't want to call the new a
06:42New date object each time and rebuild everything
06:45But instead of that what we want to do is you want to check to see if our seconds cross 60 now if it
06:50Did then we want to do something if this dot seconds is greater than 59
06:56Then we want to definitely do something we want to do probably a few things
07:00So one is we want to make sure that our this seconds will be reset to zero
07:04That's probably the first thing that we want to do and once that our seconds is set to zero
07:09We also want to update our minutes
07:11So if we go to our minutes here for a second, I we would probably want to update our minutes
07:16So we'd probably want to go to this
07:18Now obviously we need to continue this because this dot minutes plus plus is not going to do it because our minutes would grow
07:25Above the the the capability that we wanted to grow and what we want to do is each time when we're done with this
07:32Is we just want to call our?
07:34Where was it that we created our output? There we go. So it's this
07:39that output and
07:41If I save this and run this we should see that our timer should start updating on its own and it's gonna be really working
07:48Beautifully. Our only problem is when we reach minutes, it's gonna get to 100 and 200 and 300 minutes is never gonna reset
07:54So we have to go ahead and also solve that problem
07:57And the way we solve that problem is instead of calling this plus minutes is we want to create another set of function
08:03Which should we be called update minutes and it would be also a function and we're literally gonna do the exact same thing
08:12but instead of that we're gonna move on our minutes to plus up here and we want to call it so literally we're gonna go
08:19with this dot minutes Oh update minutes and
08:24What's nice about this is once we update seconds the update minutes will only be called if we're resetting our seconds
08:30So we're gonna plus our minutes and right after that we want to do the exact same type of logic
08:36So literally we just want to type here instead of minutes
08:39Seconds, we want to do minutes if our minutes grow above 59
08:42we want to make sure that they go back to zero and then we want to update our hours and
08:50Again, we're gonna have to just so I'm just gonna quickly just create it
08:52so I'm just gonna go ahead and just duplicate that function and I'm just gonna call it update hours and
08:58Look how easy this is once you get used to things how quickly we're creating new new
09:04Variables new functions that was ours
09:07We want to add to the hours and then for hours we want to ask if our hours are greater than 23
09:13Which means that we're at 24 hours
09:15Then we want to reset our hours to be zero and we want to update something else this time around we want to update our days
09:22So I could just go ahead. There is no more functions because our days doesn't have more logic beyond that
09:27So we just go days plus plus and we're done now
09:32Let's go through this logic really really quickly to just make sure that it's synced in so every single second
09:37We're calling the update function. Our update function is gonna update our seconds
09:42Our seconds are gonna get updated and if the seconds are more than 59, which means they're 60
09:48We're gonna reset the seconds and update the minutes now if that didn't happen
09:52We're gonna output whatever it is and by any chance we're only updating after we're done with all these function calls
09:57So let's say our minutes our seconds did update
10:01So we call our minutes and our minutes will update and if our minutes is more than it should be then we're gonna update our
10:07Hours as well and literally we're going all the way through
10:10So only if it all of them update then they would do all their updates
10:14They need to do and only then go through to update our output and that's it
10:18We've created our application and obviously go to the source files and really review this really really well
10:24But that's it now
10:25We'll always be able to see how many days pass since I was born and how many hours minutes and seconds and it's gonna update
10:31In this lively nice timer. So that's it
10:35So if you have any questions to the comment section and we are absolutely done with the basic core topic of objects
10:43And with it, we are done with this chapter as well
10:46And let's get ready for the next chapter where we'll explore another critical important thing in
10:53Generally programming and animation