JavaScript Topics: Declarations and Scope

1. Introduction: Welcome to JavaScript topics. A Siri's that focuses on individual topics. In JavaScript. These topics are focused so you can spend your limited time learning or reviewing a specific feature pattern or concept. Let's take a look at what is covered in this topic in declarations in Scope. The goal list of Ride, A complete understanding of Scope in Java script and how the declaration keywords, var, Let and const differ and apply to scope. Scope is a critical concept to understand, so we will cover that first in depth. Using the keyword bar will then discuss let and then finally, const. It should take about 30 minutes to complete this topic, so let's jump right in. 2. Understanding Scope: it's important to understand scope in JavaScript in order to understand what your code is doing and in order to take full advantage of all of its capabilities in this video, we will use several examples to help illustrate scope and the scope chain and make that concept more understandable. So first, it seems important to define scope. Scope is simply a set of rules that determine where within a program you can access referenced items. Usually that refers to variables. So scope is a set of rules that determine where you're able to access the variables you have declared. Now, scope isn't limited to variables, as you will see in our examples, but we usually think of variables. When we're talking about scope. Let's now take a look at a few concepts that are associated with scope. Number one is scope is determined. Lexical e. Now what does that mean? Well, as simply means that when you're riding your program, where you place declaration of variables and functions determined sculpt so it has nothing to do with when a function is called or when your code is executed. Scope is determined by how you write your program. Second, JavaScript uses function scope when a new function is declared that creates scope. Everything in JavaScript starts in the global scope. But as you begin creating functions that creates scope as well and then finally nested functions. So if you declare a function inside, another function that creates a nested function that creates what we call a scope chain will explain what a scope chain is as well. So these are the three concepts that are important to keep in mind as we go through these examples. Now, let's take a look at the code that we're going to use for the examples that will help explain scope. First off, we declare variable, we assign the number 10 to it. Then we have a function that we've referenced with add five. Both of those are in the global space. Inside the ad five function, we declare variable assigning number five to it. Then we logged the information that it results from the number passed in plus that variable . We declare another function inside the ad five function. In fact, we declare a second function at 15 which is inside the ad five function. Both of those are called and a number is passed into those functions. So now let's take a look at what scope is created as a result of this code. Here's a diagram identifying the sculpt that is created by the code we were just looking at . So the outermost scope I've labeled a and then the Ad five function creates scope. I've labeled that be inside of the advi function. We have an at 10 function, which creates scope. I've labeled that see, and we have an ad 15 function that creates scope. I've labeled that d no notice in the sculpt for B, C and D. It does not include the definition of the function is a part of its scope. It includes the variable that is passed in, but the function actually resides in the outer scope. For example, if we take a look at sea, number two is a part of scope see, but the ad 10 function is a part of sculpt. Be now. Let's walk through the code and see how the scope effects what happens. So first off the arrow is pointing to our first excusable statement, which is simply defining a variable A and assigning the number 10 to it the next execute Herbal statement is the calling of the ad five function, and we pass in a number three. So we go to the ad five function. That is where the numb variable is declared so numb now equals three. Because of that value, which we passed in, we then declare variable B and a sign five to it. Now we encounter the consul dot logs statement. Now this concert out log statement causes a look up for the two variables. Numb and be first searches for Numb inside its own scope. It finds it inside its own scope and therefore returns three and then searches for the variable, be inside its own scope. It finds it and returns five and then prints out the number eight because three plus five is eight. Now we go to the next excusable statement that calls the ad 10 function, and it passes in a number three. So at the ad 10 Function numb to is assigned a value of three. We then go to the concert log. The system searches through its own a scope, the scope for the ad 10 function to find them to it finds it and returns three. It then searches for a It cannot find a within sculpt. See, so it goes to the next most outer scope. This is the scope chain that we talked about. The next most outer scope is be. It looks for the variable a within sculpt be it cannot find it. So it goes further up the scope chain. It goes to the next most outer scope, which is scope A and scope. A happens to be the global scope, so the scope chain stops at the global scope. If a is not found in the global scope, then it it is considered an undeclared variable and causes an air. However, it does find a in that scope. It returns the value and then prints out three plus 10 which is 13. We moved to the next excusable statement, which is a call to add 15 and it passes in the number three. Numb three is declared with a value of three. A variable see is declared and assigned a value of 15 and then the consul dot logs statement first looks for numb three. It finds it within its own sculpt and returns a three and then searches for C it finds within its own scope and returns of 15 adds those two together and prints out 18. The four different scopes, which we took a look at here, were created by how we entered the coat because we nested functions inside of the ad five function that created scope inside that and also created a sculpt chain, which it could traverse to find variables when it's looking for them. No, really quick. What if we were to change a line of code? The bold ID line is the cold that's been changed instead of referring to variable A. It is now referring to variable See. So is that possible? Variable See is actually just declared within scope D Scope D is not a part of the scope chain for scope. See, therefore, an air would be produced. Basically, what would happen is it would look for the variable see within scope, See could not find it. It goes to the next outer scope, which is B. I can't find it, then goes to scope a camp, find it generates an air. All right, One more example with change code. So that line has changed back. So the variable a is being used but down inside of function. Add 15. We changed the constant log statement to simply call the function, add 10 and pass in a number of three. Will that work well? When that function is called, it will look for the function inside sculpt D. It will not find it. It will then go to the outer scope, which is scope be? Can it find it there? Yes, the ad 10 function is declared within scope. Be so it finds it and executes it. Now. Before finalizing this video, I like to verify everything we've talked about by executing the actual code. So let's do that now. All right, here's the actual code. It's attached to this HTML page. So when it executes, we should get eight, 13 and 18. I will refresh that. Open up the console 8 13 and 18. Now let's quickly make the changes, which we talked about previously. If I change that variable to see as I mentioned, we would get an air jump out executed. Sure enough, we get a reference there. See is not defined because it cannot find see in its scope chain. Let's change that back to a. And now let's call instead of concert out log that's called add 10 passing a three. So if this works, we should get 8 13 and 13. And sure enough, that's what we get. One more comment before we leave the concept of scope. Yes. Six Yes, 2015 introduced a new key word for declaring variables. Let that creates a different scope than Var. Let is what we will be talking about in the next topic, so let's move on. 3. The Difference Between var and let: the ES six standard provided a new way to define variables. So let's take a look at the difference between Var versus let now. The main difference is with how the variables are scoped. However, there is another difference of as well, and it has to do with hoisting. So first, the scope of variables declared with bar is the function itself or if they're declared as a global variable, it is the global environment, whereas variables that are declared with let the scope of those variables is simply the code block, the block of code contained within curly braces. Now, as for hoisting, variables declared with latte are not hoisted, whereas those declared with far are, Let's take a look at both examples. So first I have a simple function that simply logs a variable to the console. I'm calling that function online. Seven. However, the variable is not declared until line 10 and right now I'm using BAR. We're going to look at hoisting in this first example. It's let me go ahead and refresh my Web page and display the console and see what we have. It indicates that the variables undefined we have not assigned a value to it, but it does not give us an air that the variable does not exist. Therefore, the declaration of variable was hoisted to the top of the code, but the assignment remained where we had placed it within the code. Now what's the difference if we change this to let now in both these situations, this is in the global environment, so the scope of the variable for both of our and latte in the global environment is the same. But let's see what happens with hoisting. Refresh again, open the console and notice. Now we get reference there. X is not defined, so it was not hoisted with let where it was with bar Alright. Second example in this example have a function that once again is logging to the consul but is going through a four loop, and it's logging the value of I to the consul each time we go through the four loop. Once the four loop is complete, then logs I one more time Now. In this first example, we declare I with bar. Let's go ahead and call that function and see what happens. Refresh Console 1234 and then five. This is the final consul statement here because the four loop was as long as it was less than five. All right, now let's change this toe. Let now remember, let should define the scope of the variable to the code block. There's our code block. So let's see what happens when we try to log I to the console at Line 15. Save this refresh. We get the 1st 4 just fine. But once we get to that final concert log statement, we get a reference there where I is not defined. And that's because I was defined with let so the scope is limited. Hopefully, those two examples help you see the difference between var and let I think one of the best ways to learn is by trying different things in your code and finding out what happens. So in the project for this course, I'm goingto have you do exactly that. You will play with the code provided in previous topic and make changes to see the difference between let and bar. But before I describe the project, we need to talk about Const. So let's move on 4. Creating Constants with const: we have another ES six topic creating Constance. This goes along with creating variables because it's a very similar structure. A constant is a container that contains the value, the main differences. You cannot change it once out of value, assigned to the container. So let's take a look at this. The syntax for setting up a constant is very similar. The only difference is instead of our or latte years, the word const. In the past and Java script, when programmers wanted to indicate that a value should not be changed, they would put the variable name in all uppercase letters then, as they were programming that would know that this is a constant value. This is a value we do not want to change. That's a good practice to continue. I think when you're using the const keyword to declare a constant yes, six made it possible so that you can now create a container, a variable type container that once it is set, it prevents you from making a change to it. So if we sign this constant pi the value of 3.14 we can then reference that and it comes back and displays it, but notice that we cannot change it. Even if the the change value is correct, it basically gives us an air. So there are situations where you want to use a constant something that's unchangeable. In that case, you would want to declare it with constant. Now, how does the scope of Const compare with var and let so cost is block scope, which is exactly like let so the discussion we had about let applies to const. Now there's one more thing we need to mention about Constant. It is important to remember that Const Onley restricts value assignment. There is no restriction on the value itself. So what does that mean? Practically well, let me illustrate. So I'm going to declare two things with CONST. This year is a number. It is a primitive. Since it is primitive, we cannot change the value at all. And because it's declared with const, we cannot reassign it. Now the second thing is going to be user to find object. Okay, so there we have two declarations with Const. Let's go ahead and take a look at these. So if I look at pie in the console, I can reference it. But as we saw, I cannot change it. It gives me an air. If I do that now, let's take a look at the other 10 b. J. I can reference that I can look at it. Let's see if we try to change it to something else. Maybe just a number. No, it gives me an heir. I cannot do that. But here is something I can do. I can change the object because it is an object. And objects in Javascript are immutable. I can go ahead and change it. So I could set the name too. Something else. And it will go ahead and change that. So that's what I mean. When I say the restriction is on value assignment. It is not on the value itself because objects are immutable in JavaScript, we can continue to modify those. Now, where would you use Const? Well, now a days. You will see const use in a lot of places. It is frequently used for variables that store function. And the reason for that is you wouldn't want to sign something else to that variable. If you've stored a function in it, something you may be aware of or you may have seen, that Const. Has become the declaration of choice in a lot of cases because there are many things in your code that you don't want to assign a new value to. And so that makes sense. However, you may also want to consider what Const communicates the other developers. Basically, it is saying that this won't be changed, so I hesitate using it with things such as usual to find objects and lasts. I don't plan to have that object change. I don't want that object changed or have frozen the object. But if the object is gonna be immutable, then I'll declare it was something else, depending on what I want the scope to be. And that's another thing to do, to consider let and const confused interchangeably because their scope is the same. But if you want a different scope, then you would need to use bar. All right. In the next topic, I will explain the project for this job strip topic 5. Project: one of the best ways to learn JavaScript is by trying different things and finding out what happens. So for the project, I would like you to do exactly that. First, download the code from the project that cold looks exactly like the code presented in the discussion on scope. You will notice that the coat exclusively uses of our make some changes and find out what happens. Use. Let use Const. Try some things, see what happens then Take a screen capture of your co changes or upload the code file or may be linked to some, Cody wrote in Code Pen at code penned a Iot. Then write a description of what you learn. This way we can all learn from each other, which is another important way to learn Java script. So give it a try and thanks for being a part of this JavaScript topic. Declarations and scope