Understanding Scope Part 1

Modern JavaScript Incorporating Functions
9 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€94.79
List Price:  €132.71
You save:  €37.92
£78.97
List Price:  £110.56
You save:  £31.59
CA$139.89
List Price:  CA$195.85
You save:  CA$55.96
A$153.73
List Price:  A$215.23
You save:  A$61.50
S$134.32
List Price:  S$188.05
You save:  S$53.73
HK$778.26
List Price:  HK$1,089.59
You save:  HK$311.33
CHF 88.57
List Price:  CHF 124
You save:  CHF 35.43
NOK kr1,105.08
List Price:  NOK kr1,547.16
You save:  NOK kr442.07
DKK kr706.99
List Price:  DKK kr989.82
You save:  DKK kr282.82
NZ$170.06
List Price:  NZ$238.10
You save:  NZ$68.03
د.إ367.26
List Price:  د.إ514.17
You save:  د.إ146.91
৳11,906.24
List Price:  ৳16,669.22
You save:  ৳4,762.97
₹8,436.24
List Price:  ₹11,811.08
You save:  ₹3,374.83
RM447.10
List Price:  RM625.96
You save:  RM178.86
₦167,464.25
List Price:  ₦234,456.65
You save:  ₦66,992.40
₨27,687.73
List Price:  ₨38,763.93
You save:  ₨11,076.20
฿3,470.35
List Price:  ฿4,858.63
You save:  ฿1,388.28
₺3,445.98
List Price:  ₺4,824.51
You save:  ₺1,378.53
B$578.68
List Price:  B$810.17
You save:  B$231.49
R1,810.53
List Price:  R2,534.81
You save:  R724.28
Лв185.34
List Price:  Лв259.49
You save:  Лв74.14
₩139,691.42
List Price:  ₩195,573.58
You save:  ₩55,882.15
₪373.67
List Price:  ₪523.15
You save:  ₪149.48
₱5,901.36
List Price:  ₱8,262.14
You save:  ₱2,360.78
¥15,574.86
List Price:  ¥21,805.43
You save:  ¥6,230.57
MX$2,020.46
List Price:  MX$2,828.72
You save:  MX$808.26
QR363.35
List Price:  QR508.71
You save:  QR145.35
P1,355.53
List Price:  P1,897.79
You save:  P542.26
KSh12,948.70
List Price:  KSh18,128.70
You save:  KSh5,180
E£4,969.50
List Price:  E£6,957.50
You save:  E£1,988
ብር12,262.61
List Price:  ብር17,168.15
You save:  ብር4,905.53
Kz91,256.94
List Price:  Kz127,763.36
You save:  Kz36,506.42
CLP$97,119.28
List Price:  CLP$135,970.88
You save:  CLP$38,851.60
CN¥724.58
List Price:  CN¥1,014.45
You save:  CN¥289.86
RD$6,000.34
List Price:  RD$8,400.72
You save:  RD$2,400.37
DA13,341.73
List Price:  DA18,678.95
You save:  DA5,337.22
FJ$227.04
List Price:  FJ$317.87
You save:  FJ$90.82
Q769.16
List Price:  Q1,076.85
You save:  Q307.69
GY$20,834.51
List Price:  GY$29,169.15
You save:  GY$8,334.63
ISK kr13,772.62
List Price:  ISK kr19,282.22
You save:  ISK kr5,509.60
DH995.44
List Price:  DH1,393.66
You save:  DH398.21
L1,819.82
List Price:  L2,547.83
You save:  L728
ден5,825.40
List Price:  ден8,155.79
You save:  ден2,330.39
MOP$798.74
List Price:  MOP$1,118.27
You save:  MOP$319.52
N$1,801.35
List Price:  N$2,521.97
You save:  N$720.61
C$3,666.61
List Price:  C$5,133.40
You save:  C$1,466.79
रु13,462.23
List Price:  रु18,847.67
You save:  रु5,385.43
S/378.10
List Price:  S/529.35
You save:  S/151.25
K400.90
List Price:  K561.28
You save:  K160.37
SAR375.38
List Price:  SAR525.55
You save:  SAR150.16
ZK2,752.36
List Price:  ZK3,853.42
You save:  ZK1,101.05
L471.69
List Price:  L660.38
You save:  L188.69
Kč2,395.79
List Price:  Kč3,354.20
You save:  Kč958.41
Ft38,840.72
List Price:  Ft54,378.57
You save:  Ft15,537.84
SEK kr1,099.74
List Price:  SEK kr1,539.68
You save:  SEK kr439.94
ARS$100,165.56
List Price:  ARS$140,235.79
You save:  ARS$40,070.23
Bs690.96
List Price:  Bs967.37
You save:  Bs276.41
COP$440,690.82
List Price:  COP$616,984.78
You save:  COP$176,293.95
₡50,645.88
List Price:  ₡70,906.26
You save:  ₡20,260.37
L2,517.41
List Price:  L3,524.47
You save:  L1,007.06
₲775,966.15
List Price:  ₲1,086,383.66
You save:  ₲310,417.50
$U4,274.58
List Price:  $U5,984.58
You save:  $U1,710
zł411.21
List Price:  zł575.71
You save:  zł164.50
Already have an account? Log In

Transcript

We have covered enough about functions and you understand enough about functions that we can now discuss scope. scope is a very important concept to understand as a modern JavaScript developer. In the past developers that would just casually learn JavaScript scope was one of the things that they did not understand and cause mistakes or problems within their code. So we're going to look at several examples to help you understand the whole concept of scope and how it applies to your JavaScript code. Now, first, let me define scope. Scope can be defined as where a variable is available in your code.

So we've talked about defining variables. We've talked about hoisting hoisting is a concept that will come into play here. Scope now refers to where that variable is available in other Where in other words, where can I access that? Let me jump to sublime. I have a little bit of code entered here. Let me explain it, I have a function declared.

And instead inside the function I simply console dot log number one, num, two. These two variables are declared and defined down here. However I'm calling function test one prior to where they are declared and defined. So what do you think this will return? Well, let's go ahead and find out. Pull up the page.

Pull up the console. And they both are undefined. Hopefully that is what you predicted what happened. We did not get an error that They weren't available because of hoisting. So these variables are automatically hoisted to the top. And so the function knows they are there.

However, they were not assigned a value and so they, they are undefined. Now these variables here are being defined in our global environment. This function is, is defined in our global environment. The global environment is a concept that's important to understand as well. Everything at the top of your code gets defined inside the global environment. However, now that we've learned functions, we can now define variables inside a function.

Those variables are no longer defined as a part of the global environment. To illustrate that let me enter var num three equals 10 Now what if I were to try and console dot log num three let's go ahead and save that refresh the page open the console uncaught reference error num three is not defined. That's because num three was defined inside of this function. Therefore, it is only available inside this function. It is not available to the global environment. And this statement here exists in the global environment.

Now obviously inside this function I could enter a statement that could access num three, but outside it I cannot. that illustrates scope. scope for num three is this function. scope for number one. Number two is the global environment. Anything Inside the global environment can access it.

Alright, to further this discussion, let me move the call to test one down here. Save it, refresh. Now we're printing out the values 25 and 75. Because we've assigned them here. Now, you may be asking yourself, well, you just said that the scope of num three is inside this function. So why can the statements that are inside the function test one, access these variables that were defined inside the global environment?

Well, the reason is functions linked to their outer environment, they have a link to their outer environment. So console dot log num, one will first check to see if num one is inside this function inside its own instance. If it cannot find it, it will look to its outer environment. Sure enough, it's there. And it uses it. The same with num two.

Now to illustrate that, let me change this num three to num one. So we have num one declared here. We have num one declared inside the function. What do you think's going to display here? I think you've probably already figured that out. Let's go ahead and refresh.

It displays the 10. So it displays this value here because it looks first to see if that variable has been declared inside its environment. If not, it looks for the variable out in the outer environment, which would be here. It uses it if it's inside its own environment. And therefore it went ahead and used it. All right now, early in this course we discussed lat left as an ESX keyword for defining variables.

Let deals with things a little bit differently. And so I want to use the same example to help you understand that because let determine scope, the scope of variables defined with lat are within the block. So this is a block the braces identify a block of code. If lat is used outside of a block to define a variable such as the global environment similar to this var keyword, then lat functions very similar to var with one exception. So, let me do lat I'm going to move test one. Well first, let's just do it with test one where it is.

Let me refresh. Open the console. 10 and 75 works the same way as well. Right now let's move the call to test one up here. Now remember with var the variables were hoisted to the top so it knew they existed but they were undefined so that's what we should see happen with num two right? Well except that let is a bit different than bar.

So, let me show you what happens. Refresh again console, so displays 10 but then we get an uncaught reference error number two is not defined. So that is a difference with let variables defined with lat are not hoisted. Back can be a nice feature of lat. Okay, I'm going to change this back to var and inside of this function, I'm going to Add a for loop. In this for loop, let i equal one and run the loop.

While i is less than five, then we increment i. And then we're going to console log I. I'm going to comment out these two lines. So as not to confuse things when reviewing this in the console, save that. Refresh, open the console, we get 1234. All those are less than five and then the loop ends. All right, now let's try one more thing to show you the scope of variables defined with lab.

Remember, variables using lat. Their scope consists of the block, here's the block. So if I do a console, console dot log, I here outside of that for loop, what's gonna happen refresh It does our our loop. And then as soon as I try to do that last console dot log statement uncaught reference error i is not defined, because the scope of i is simply within that code block. So, I is not accessible outside of that code block. That would be different if we used var.

Refresh, open the console. Sure enough, it prints it out here and it's five because it incremented it before it exited out of the loop. So, some very important concepts about scope we've covered in the second movie on scope. We'll continue with some additional examples on scope.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.