Transcripts
1. Intro to variables: you know, huh? Fancy seeing you here. I guess you want to find out about variables? Well, using and storing daughter. It's the backbone off writing code. And if Joe script couldn't do, it would be pretty used. This language, so lucky for us, we can do it. And it does it very well. I'm excited about the section. It's all gonna be about variables. And sometimes you want your variables to change. Sometimes you want an explicitly state that you want a variable to never change. And you really seen us use variables? I've been using the late word often, so hopefully some of its familiar enough. See, Mr.
2. What are variables?: Let's get into variables. By the end of the section, you should have a very solid understanding of whatever able is. Variables are kind of like containers in Java script and using variables to store. Daughter is the foundation off JavaScript, Rilya's and it's done in three different parts. But we're gonna get into those and later lectures. For now. I just want you to understand that Variable is just a container to store values. That's it. Let's look at Wally Wally Smart. Remember him? We already know some information about him. His name is while he's smart, he's only got 34 funds in his account. He's not logged in, and he's got a few favorites. How would we go about storing these into variables? How does this work? I'm really mentioned that taking daughter and later manipulating their daughter is the backbone of programming. All languages use variables in variables, allow you to store things and use them later. That's all the variable is. So let's take our friend colleague. These are values, but how do we stole it? What it's looked, Each one. It's created container, which is just a variable. And let's name that name because we're gonna store Wally Smarts name. And so it's almost like you taking a container and you labelling their container. It's label it name and let's put Wally Smart into their container. That's it. That assigned, Let's go down the next list. What about City for? Well, no problem. We've got an unlimited supply of containers. Let's call this one balance, cause that's the balance of funds in his A cut. We can call it anything we want and that's store that 34 to the container and we keep working our way down the list. Let's get another container for whether he's logged in or not. That's label that loved him, and that's store that very in that container. I hope you seeing a pattern here. We're doing the same now for favorites. We stole the favorites in another container. The important point that I'm sure you've picked up on already is that all of these variables were created in the same way we got a container, we labeled it, and we put in the value and you can also see that variables can hold different types of daughter. Think about a container in your pantry. You can put different types of food in those containers. The same thing with Java script. We just don't talk food. We talk value types in our example logged in as a bullion balances Anamika. His name is the strength and favorites. Well, we've just said that's complex. It's actually an array. And in our program in Korea and any application, you bold, you probably gonna have hundreds and thousands or variables that you create in your coat. That's why it's worth while having a whole section on them. So you deeply understand them. Another thing that's interesting. He has love variables, have unique names. It would be very confusing if balance somehow became name. It just doesn't make sense. And then you start overriding variables, and all of that becomes very missy. Remember, we create variables. We then put values in him and weaken stole it, and we should make certain that are variables have distinct names. Let's move on
3. Variables creation - declare, initialize and assign: Let's look at variables and how we create them in a bit more detail. Remember, in the previous lecture said that using variables to store daughters done and three distinct steps well, let's discuss the steps quickly. The first it is, you have to take your variable. And all that means is that the vehicle is registered in its corresponding scope and the scope of a variable simply where the variable can be used. Don't stress about scope yet. We're gonna be talking about scope in more detail later. The next step is initialization. You've got to initialize that variable, and this usually occurs at the same time, the variables declared. And all this means is that the variable is assigned a memory. It's a sign space by the JavaScript engine, and when you initialize this variable, it takes a value of undefined. Remember that under find. It's a primitive daughter top. It takes that value and tell you sign of value to it. And yeah, is a practical example off a undefined variable. Let's say we just make up variable called animal, but we don't assign it value, meaning we don't have unequal sign with the video. We're just gonna today variable. This is what we've just done, and now we go type off animal. It is undefined. So we've dictated variable in the background. The Parsa has initiated a variable. It's assigned memory space that variable, but at this point in time it is undefined. Which brings us to the third step, and that is a signing of value to that variable. And all that that means is that you literally put a value into their content. You told Javascript that that variable is to have that value we've declared initialized are variable called animal. In this case, how do we assign it? A very It's easy. It say Our animal, you just read. Type it up because, remember, it's been initialized. There is memory space. The possum knows that this is a variable, but let's assign it value off. We'll talk, and now if we go top off animal, we would expect to see string, which is what we've got. Hope is making saints. Let's move on
4. What are identifiers?: you've really seen a lot of examples of us using variables. But before we move on, I just want you to understand, Identify us. Don't get intimidated with the terminology. All and identify is Is this the name? It's the name that we give a variable function or property, but the surgeon rules around a data fast. We can't just name are variables. Anything we want before to be careful how we structure it and the syntax we use. For example, identifies have to consist off letters and numbers. We can't use symbols and think about it. Look at your keyboard numbers. Now. All of them have operation. Meaning you've got the brackets for nine and zero. You've got the multiplication sign on eight. You've got the and sign for seven the Palestine on six. So we can't use any of these symbols because when the past comes across those symbols, it interprets him in a very structured and ordered way. We can, however, use the dollar sign or underscore. We're naming a variable that is open to us. The other thing with identifies is that we can't begin are variable name for the number. So then how do we name all variables, and what is the best practice? Well, the convention that I like and it's probably the most popular is what's known as Kemel case , except for class names and CONST. Variables, although you can. The industry standard is that you structure those a different way. So when you come across a variable encode that's just all capitals, for example, you'll immediately know that that's a constant variable. For example, constant pi equals 3.142 You wouldn't expect in your code to ever change it. And that's why the deemed a fire would be all caps on a constant this case Capital P and a Capital I. You also need to be away that variable names are case sensitive. This means that if we define a variable called my variable, although a case and we make that equal to one and we do the same thing with another variable. But we use camel case, and we assign that the value to these are two distinct variables. They not equal the same thing, and last but not least, identifies must not consist of reserved keywords. We know that we've been using reserve keywords all the time, When Javascript you've seen alert prompt console data logs. We can't be using these to define variable names because in the interpreter is not going to know what's going on. Reserve key words are just words in the job script language that have inbuilt functionality they've been pre defined by the program is off job script for us, and here are some examples on the screen. These are not exhaustive. There are hundreds of reserved keywords, so just don't use thes when defining your own variable. Let's move on.
5. VAR - the old way to declare a variable: we know the theory, but let's see how we actually implemented before years 2015. You had to use the var ki would, and that's why you'll see a lot of jobs trip code with the Vaki would. And all you have to do is but the name of your container the name of your variable after the Vaulx keyword. Yeah, we've got four name for balance involved in. But just remember, at this stage, we've not yet assigned values to these variables, so the value of each variable will be undefined. And this brings us on to stick to remember what stick to was. That was when you initialize your variable and that means the JavaScript engine signs the variable to memory. It's all it means, but you've done nothing else in your code. You don't anymore. You still just written for name for parents followed in. And remember, when it assigns this to memory, it is gonna place an undefined value to each of those variables because we have not yet assigned a value and this brings us to the final and most important step, and that is assigning value to a variable. We use the equal sign as an assignment operator, and that just means a sign. What is smart to the variable name? That's what that means. Something I want to show you before we move on is this fall key? Would what we used to define a variable. This is the old school, but I just want you to understand where this is. Open up the console and mystifying, using the old school far away. That's a bar user. Is Worley smart? This is what's gonna happen. We've known to find this. Use it in the Volvo variable to call the user. We just have to type it on the computer. The Parsa the brother knows that it's a variable that knows the value is while he's smart. But this is what's interesting. Every single variable that you using your code has either local global scope. And like I said, we're going to get into scope later. But all that means is that if it's a global scope, it's visible absolutely everywhere, and you can use that variable everywhere. If it's locally scoped, that means that you can only use it in limited situations with the vault key would, which is what we've done him. If we not defining it with in a function, it is gonna have automatically global scope. And let me show you this. This is what school. If we talked the window object into our console and remember, we went over the window object ruined over the bomb in one of the previous lectures. If we open this up, I would expect us to be able to find user. And there it is, is all user that we've defined what is smart. What that means is that it's available globally. We can use that absolutely any way we can even use it in a function and all know what it is you should. But let's use it and the function. I'll show you that we've got access to this variable called user. Anyway, Let's just call the function taste for lack of a better word and its console log user. Understand what it is we've just done here. We've used variable user function, but this function scope, it's never we've never defined user, so we're going to get it from what is going to get it from the global scope, and all we have to do is cool affection and to call a function. You just state the function name, which is taste and you have the brackets, and that just means execute. So let's execute it. And there you go console looks the user, which in this case is one smart probe, is making scenes. But let's move on to more important ways to declare variables, and it is with the late and constant keyword.
6. LET - the new way to declare a variable: Now let's get into the let keyword. You've seen me write late in my code and this is the new way to decay variables. It was introduced in years 2015 and let has scope constraints, which is actually very good, because what that allows you to do is it allows you to define where your variable has meaning and where it doesn't. And don't worry about scope e. It will check about that later. Just know that late variables cannot be read. It'd. So let me give you an example. If we rightly name because fully smart and further down our code, we go let name equals while he's stupid. Java script is going to give us an era saying name is a really been defined and this is a good thing, right? We don't want our containers getting mixed up in the same name. Containers in our pantry have distinct names for distinct variables, and you'll be a very happy coder. But this is not to say you can never change the name Wally smart, because with the let keyword, you can re assign values to variables. If we just didn't include the word let and we just said name because one stupid late on our code that would be perfectly valid. And I just want to elaborate, deliberately ignored scoping. And I don't want to get into this right now toward fans topic, so we're gonna be getting into it later.
7. CONST - the new way to declare a constant variable: And of course, the cousin of late is Constance, and this is the most strict way to declare a variable in my advice is to use constant as much as possible because it gets you to organize your code in a much more structured way. Const. Was introduced at the same time. It's late, it's more strict and limited the scope that's declared it. But this is the important aspect of it. It's venue cannot change. And like I said, it just results in you being more organized in the way you could. Let's have a look at an example. Well, let's say we've got a name of one and we use the constant keyword. If I try and put the const name equals on TV, it won't work. It'll throw me an era. It was the same as let we weren't able to directly either butts with late. Remember, we could re assign a value to a variable, but just not having the leg. We just had the name. Well, if we try that with constant, we get an era, which is very, very awesome and just bear in mind when you're using constant, you must initialize value you cannot just type constant name, for example, you have to assign a value at the same time you initialize it. I hope that makes sense. Let's continue just quickly before we move on. I want to show you the difference is between ball and cost when it comes to reassigning and Redick clearing variables. Firstly, with fall this define a very well called A and Smith 13 with vaw We had so much flexibility , which you could argue is good. But the flip side is that it caused a lot of bags. And a lot of areas in your code because of all allows you to do whatever you want right now . If I talked a we're expecting because we've declared it s team. We've assigned the value team to it. But what happens if I read a sign for a equals 15? What's a No. Well, this is where we start meddling up all our variables because now what the past is actually done is it's over, written a to 15 and you can see that Yeah, we've actually lost our value team. That's the one implication of all. The other implication is that we don't do enough to read it, Clear it. We can just reassign by talking. Today equals eight now a equals eight, as you would expect now we've lost the 15 so you can see we can do weird things with fall Go for a equals one. Then on the next line we can go for a equals two Saiful and so And this is where Constant comes into the picture. Constant solves this problem. It makes us be more organized. Skoda's helps us to be more structured than to think about the variables we created. Let's try the same thing with Constant. It's define call and let's make that call a BMW. I don't call, we should get BMW. But now we've used the constant keyword. So if I want to know, override it and constant call bulls don't know Toyota, it literally gives me an unexpected identify. What about if I just tried to reassign by topping call and doing it this way? Look, I get a very similar era. I get unquote type era assignment toe constant variable. This is the awesome thing about constant. Let's continue
8. CONST - try and catch: that's not a bad connection. That's just help em plan and how much I'm enjoying this course before we move on from Constance. Just want to show you one more example. And yeah, I want to use what's known as the try and catch block. All it is is that the try block of code allows you to try an expression. And if it throws any eras, that's with a catch. Block comes in and in the code to find within that block will be executed. Let me give you an example and going through this example, I hope you get a bit of feel for the constant keyword to this. Define a number. Let's make the number equal T You know what I haven't done? I haven't stuck with base practice, and that is to have caps for your constants. So did a number equal team this final try block and again I've got Crocker. That's why we see in these areas displayed real time. Let's try number calls, fire and remember, with Constance, we are unable to read a sign variables which we've tried to do here. So I expect the catch block to be executed and one thing with the catch block is that women era is thrown through the try me that passes on a variable within era in it. This is cool. It era and its console look era. Well, that's not giving us any errors off course. And this is another Listen, they're not unintentionally with me to give variables are case sensitive, So the constant number is different to this number in here. Just I've got to go caps and I'll expect non your. That's exactly what we have type era assignment to Constant. We not allow to do that. I hope you learned something.
9. Variables - recap: Okay, let's just have a quick recap on variables Var late and const. Well, the first thing you must remember is that when you write const. Late Alvar, it tells the JavaScript engine to store it in memory. And just to remind you when you use the FARC, you would you actually declaring a variable at the global scope if you haven't done so in a function will get into this a bit more later. But don't use well, rather used little const and you use lit when you want to change the value and you use const when you want the value to never change.
10. Scope: We have been dealing a lot with variables, and by this stage you should be starting to feel a lot more comfortable with what they are in reality there, just a container that stores the value. It's that simple, and you are going to be running into what's known a scoping issues. I've skipped over it in previous lecture, stating that it is a more funds topic. But you do need to know about Scopes, and that's why I thought, Let me just lay it down. What is Skype? All scope is where you can use a variable. And what do I mean by this? Well, a few minutes ago, I just wrote some code. I want to illustrate what scope is and why. It's important for us to understand how it works. Let's say we've got a block of code and you've to find a variable at the very top called my name. Why scope is important is because you and I need to know where we can use that variable. We have to find the variable globally. We can we use it. For example, if we had an if block and we console logged my name that variable would that be valid? Would it be possible? What about if we had a four block a loop? Would we be able to console, log my name Day? Would the interpreter understand what my name is? Well, let's get more complicated. What about if we had a function this case? We Let's just call it variable scope and we execute that function, Will that be able to console log my name that variable? And although these examples of consul logs just bear in mind, the code could be anything. It could be anything where you use that variable again. And this is why scope is important. You need to know where you can use it, where you can access it. Here we defined a global variable, so you'd expect just intuitively, from a global favorable we should bury. Use it absolutely. Anyway. And you would be cool, right? But this is a simple is a gets. What about if you go and define variables within your function, can you use them outside of the function? What about if you define it within a block of curly? Brace it. Can you use it outside of that? And this is where scoping comes into the picture
11. Local vs Global Scope, and Function vs Block Scope: Let's take a step back. Java script has two types of stops. Local Skype and global stuck any variable that can only be used in a specific part of your code, his local scope and then intuitively makes sense because you can only use that variable in a local piece of code. You can't use it anyway. Has to be in one spot, and I wish it was just that simple. But a locally scope variable comes in two types. You've got function scoped and block scoped. Let me quickly show you an example before we move on in this lecture. What I mean when I say that variable has local scope and that we have two different types of local Skype function scope in block scope. Well, let's have a look at an example. The first thing we should do is create a function, and let's call it taste for the lack of a better word, and within this function is to find a variable, cold car we want to do. Is Consul long this fable, not just take a step back and think about what it is we just We've created a function called Taste within that function within the local scope. Within that block, we have to find a variable cold call. What happens when we run this function well, to run a function which has got a call, its name enclosed in brackets and the eager executes, and you can see that BMW is consult the screen as we would expect. But what happens if we wanted to access this car variable outside the function? Well, this is what scoping is all about. It is not possible. You can see it's not possible. Call is not defined. We get era and this is because of function scoping. All right, so we see this doesn't work. What about block? Scoping what I mean by that? Remember what a block is blocks just the curly. Brace it. It's all a block of code is so you can actually see a block is a subset or function because the function requires curly braces. Unless you're using the new Aero Syntex, which will get into later, let me give you an example of a blocked scoped theory. Let's get rid of this. Let's just have curly braces. This is a block, and now it's defined variable, cold animal and again We just want to console that to the screen. No issues there, but what happens when we want to exist? That animal outside of the block animal is not defined, and this is what scoping is all about. I hope it's starting to make scenes. What's interesting, though, is before the let keyword we only had evolved and look what happens when we write for So now what we've done is we were placed late with for what do you think will happen up? I would expect animal to also be blocks cook, but it's not. Look at that Warthog is available outside the curly braces when it comes to ball. And this is why, before the new year, six in text came in, people referred to Java script as a function scoped language. But that's not the case in you, because now we've got a little const. Which means that it's blocks. Got sure, So we back well done. We've done locally scoped. Now let's get on to ding ding ding globally scoped, a variable declared outside of a function or a block and all I mean by a block, his curly braces, heads, global scope and something worth pointing out is that this is only true withdrawal of a script in Web browsers to the clear global variables in Node. You've got to do things a little bit differently. But this course isn't a node course that just wanted to put it up there and again. Enough talk. Let me show you a quick example of a global variable. We've seen examples off globally. Scoped variables, proof that's a mouthful globally. Skyped variables. Doubly stepped Gables clubbing stuff, fables. We've seen examples of it. You need to show you another one quickly to drive the point home. You cannot be too strong on this constant off strip, so actually, you know what I'll do. Me just started. Quicker Cook is going. It's great variable Well, the value pizza. And now, before you go on, just bear in mind. This is a global very well. Why is it a global variable? It's not defined within a function, and it's not defined within curly braces. It's not to find in the block. The default in is that this is globally accessible from anywhere in your coat, and to prove it. That's created function called show food, and all this does is a console logs favorite. Three. Taking a step back if I just Consul logged favorite food, I would expect to see Peter so long favorite food. I expect to see Peter, and that's what we see on the reason we see this, Peter, is that all we're doing is we're referencing the global variable director. So in effect, there's no need for us to even have had a function that has this function worked. We're amendment to execute a function. I have Teoh call its name and then close it in brackets a cooler name and then hit brackets executed the function, and you can see the function executes. We haven't defined a variable within the function within that scope, but yet the function still knows what favorite food is. It's pizza, and this is the power of to clearing something global. And just before we move on, I don't want you to think that you majestically or your variables globally now because the one problem and it's a big problem with declaring variables globally, his name caches. When you start to finding things globally, what you'll find is you can start over writing variables even that have been pre defined in the browse already. Just don't go there if you can avoid a global variable. Rather, do that. What a lot of coders do you have to enter a global variable is their creative global object . So there are, for example, they'll go let a equals global object. And then what they do is there touch properties to that object a dot favorite, see Top equals pizza. And then, if you want to actually set later in your code, you can just accept your global object, which you always knows. A. With the dot notation, you can access all your properties. That's what you do. You can access them. You just console the slob console. Love this out if you see the result, and it is actually exiting this pizza, not the first pizza. Don't worry. If you don't quite understand that. Well, you know that's that's more complicated code, which we may get into late in the course. For now, I want you to understand global scopes, local scopes, variables, let's and Constance, and just to end off. Remember when dealing with Fars, we saw that it was function scoped, meaning that even if you put evolves and curly braces. You can start access that for variable anyway in your coat. And because of that reason, Java script used to be known as a function scope language. But not anymore, because with latent const, we've now got block scoping and this sums up for scoping.
12. Scope - VAR vs LET vs Nested Blocks: before we move on to the next lecture. I just want to compare the fall and let keyword again quickly. I want to drive this point home and it will help you with coding promise. Let's define a age well to. And remember when I do this with the Vaki word, I'm creating the global Skype you. Now this is what I want to do. If the water augers older than one years old, I want to console log to the screen, equivalent human years off that water. What I mean, Well, water old lives for about 18 years. And if we just say human lives 100 years, I know it's too long, but let's just say the average human lives 100 years. What that means is that for everyone, water Gye. It's the equivalent of 4.72 human years, and I just wanna console law that to the screen. So let's say age is greater than one, because we are. You want to do this if they walk towards old one year and now when a creative variable, which is the human age equivalent, which we said is just gonna be the age of the war talk multiplied by 100. If we take that is the average life span of a human divided by 18 which is the average life span of a war talk. And then we want to console, Look to the screen, and I'm gonna be using template vehicles. A Teoh warthog is years in human terms, and this is what's nice about poker. You could see that the output is immunity being displayed to the right and blue. And this is what I wanna get to now comparing Vaal visits. Let remember, we said Falls only functions got. So if I try and access human age, what do you think will happen here? Human age? Well, this is not a function, isn't it's just block. It's not a function. So I would expect human age to be visible everywhere with the volcano human age. And it is we can see the opposite results to the screen. What about if I change this fall to a lit well laters block scoped. So I expect human age to not be defined. We are unable to use it outside that Locke. But you really knew this, didn't you? So let's dip it up a notch. Let's try and create. Niece did block and name. Let's see what happens. Let's delete this. Let's create a function called variable Skype for lack of a better word. You can call it anything you want and straight off the bed. Let's define a variable called X and let's make that a number. Now what I want to do is create a niece did block. We'll do a simple if statement that will execute because we're just passing the bullion truth. And if it is true, I want to create a variable. But get us I want the variable name to be the same X and it said that must be funny String . So you can really see that we've got two very bills now that shouldn't technically be a lot if they were in the same scope ones the number ones, the strength. But let's see what happens. Well, I want to do now. Is Consul log? Yes, Within this block? No, I went to exit the bloc and I want a console log X again. And the last thing I want to do is console log X again. But let me just stop quicker for the moment because I want you to think about the result console, Log X, and he has my question to you, and I'll only give you the answer. In a few seconds, I want you to pause the video. Think about we've got three console logs on the screen. What will the result off each of those logs be? Think about scopes. Think about block scopes. Think about function scopes. Pause the video. Now give it a go, and then I'll answer the question. You gave it a go. I hope you had fun. Hope you join it. And don't be intimidated by this whole. I mean, that's funny, you know. And if you don't know the answers, that's totally fine. It's why we're doing the course together. Okay, so before I start a walker, let's just run through it. We've got a function. Remember that the let variable is function skirt. That means that any variable defined in that function it's not accessible outside that function. That's the first thing I want you to think. So this console, love Peaks is there in the function, our function out the function. So when the past comes through and it looks at that X is gonna find anything. No, it's not. Who is that? X is not found in the global scope. So I would expect this last console log to display and to find. What about the first console? Remember, we said that the late variable is block Scott. That means you can treat that if block is its own section of code and only that section can access that variable. So what I mean by that Well, we've defined peaks within that scope. And then we've console blocked X, so I would expect the X to be wanting. Now it's going to the middle console. We've jumped out of that. If block so which block away in what we in the function block again. And that means we have to find existing. And are we console booking tape? I would expect the result. Let's see if this works. Give me activate Coca. Give it a moment so you can receive workers already saying that X is not to find out here, which is what we expected. The reason why we're not seeing anything executed. Here's we haven't run the function and remember to run a function we have to call the name and enclosed in brackets big, and it's literally given us what we would expect. Hope. It's starting to feel intuitive. Let's continue.
13. Bonus: using DevTools to determine the scope: this might be a little bit advanced, but I believe I believe you asking. Do it. It's interesting and the scenes that we're going to be using a debugging tool in chrome Teoh, ascertain without variables or local or globally scoped. How cool is this? So let's quickly create something that we can test our variables and, well, let's start with an HD mole documents standard template and let's start righting are JavaScript. Remember, Java script has to be intuitive within script takes. And now let's define a variable called Page. Let's make that equal three. And we know this is a strength and we know this is a number, and we would expect this to be a global variable. So let's say a level able number. Now let's create a function, and it's just call it Skype for lack of a better word. And let's create another variable. But let's make this a string and say it's young and take a step back. What scope do you think this would have? Hope? You said local cool table with time strange and I'm going to get more complicated. Let's create block and let's create yet another variable pulled age this time. That's called it old and in isolation. What did this if floppy, What scope would that be? Yes, it would be a local scope. It will be a local block Skype, to be specific. This should be a local block school variable with type string. And to test it, we can console log age over here. Outside this if statement outside that bloc, we can console log age and outside everything we can console, book age and remember to execute a function we have to call its name, which we've called scope with brackets. Now you might be sitting there wondering, How do we know with our variables are locally or globally scoped? And if it's even locally script, how do we know with its function spoke blocks well, One way is to just usual theory. Sit down and figure it out Other ways to use Google Dave Tools. But before we get into Dave Tools, I just want you and I to think about each one individually, the first age on screen that I would expect to be global. We've defined that age outside everything. Then we get to the function. So when we define new age equals young. I would expect that to only be available in function and then when we nest, another block within that country that age equals old. I would expect that to be only locally event within that block does it kind of makes scenes . So how do we see this in depth tools? Well, there's another key word in jobs for the Net is D bag. When you put that in your code and the interpreter comes across it at literally pauses the execution of dollars, and it defines the variables for you. Let's see the next. So where do we want to put these? Well, let's say on the first age, the global level. We want the D better to stop. We want to see what their ages. Then we get into the function. We define a jingles young that see at this point what scope that ages. And then when we get into the second nested look, let's do the same thing. All we gotta do now is stop the server and we should be able to see the results in the browser, and we put a blank screen and you'd expect the blank screen because we haven't defined any HD months makes it what we interested in now there is the Java script in those variables, and this time we're not going to be looking at the console tape. We're gonna be looking at sources tape, so that's going to sources. And as soon as we refresh, let me just make this a bit wider. Soon as we re fresh, I would expect that D bag to kick in to refresh the page. And they have hit our first di Bella. And at this point, we've defined age within the script, which is global and you can see on the right. That's exactly what's happened. It's got a scope tip, and we can see the scope of our variables. And remember hearted, the interpreter executes code from top to bottom. Well, this means that it's going to skip over this function for now because we haven't executed the function. This is only defining function, and its should hit this console log age expression. Let's see if that happens, and it does hits the console, that log age expression. And at this point in time, what is age? That's right. It's the global age. It's the number three so when we step over this and it executes and we just tabo it are. Console tape is the number three, but let's go back to our sources. Let's continue now. It's hit the scope function, and it's gonna execute the function. So let's execute the function. So here it's hit. Age equals young, but look what it's done within the scope. It's actually created a local variable, and at this point, the variable is still undefined. Remember, you need to care variable. Then it gets initialized, and this is what it's done here initialized. But it hasn't yet assigned a value that comes in the mix. Tape stick down. You stop it out, debunker. Now it's assigned a value to the variable, and that is young. It's continued. That's going to this. If block are expected to the D bag and now to stop the age again, that's exactly what it's done. I hope you're starting to feel how call this is. This is awesome, and you probably actually understanding this. Very few people do so well that so now we've hit this. If block we've got to the next age, which we've defined as old again, it's been initialized but not yet assigned a value. But now it's been assigned Age Is the tech you old now when we hit this console? Look age, we are still within this block. It's at this point in time. In our code, we have access to the block variable, the local variable and the global variable. Hucles that. So let's keep going down. When we hit this console log age, it's gonna console dot log old are expect because we within this block. So we step over that the terror bitter console and he's old. So it's working. We got our sources tab. Now we're hitting console, deadlock age. But at this point in our coat, look what's happened. Our scope block doesn't have a block variable in you. It only has local in global, and at the moment we in the local scope because that's at the top. So age is defined as young, you're This blows my mind call. This continues to let me step over this. I would expect young to have been consul. That's exactly what happened. So I heard this was a nice little bonus for you. I hope set you on the path to using the debugging tools to understanding globally local functions goat and
CM Code_Zone, !false | funny, because its true
