When They "feel" the Same - Code - Part 1

What’s the Difference Between Scope and Context in JavaScript? When Scope and Context "feel" like the same thing (but they are not)
5 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
€87.70
List Price:  €122.78
You save:  €35.08
£75.10
List Price:  £105.15
You save:  £30.04
CA$138.82
List Price:  CA$194.36
You save:  CA$55.53
A$156.01
List Price:  A$218.42
You save:  A$62.41
S$131.39
List Price:  S$183.95
You save:  S$52.56
HK$775.79
List Price:  HK$1,086.14
You save:  HK$310.35
CHF 82.80
List Price:  CHF 115.93
You save:  CHF 33.12
NOK kr1,043.63
List Price:  NOK kr1,461.13
You save:  NOK kr417.49
DKK kr656.84
List Price:  DKK kr919.60
You save:  DKK kr262.76
NZ$167.59
List Price:  NZ$234.64
You save:  NZ$67.04
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.92
৳12,148.30
List Price:  ৳17,008.11
You save:  ৳4,859.80
₹8,537.62
List Price:  ₹11,953.01
You save:  ₹3,415.39
RM437.35
List Price:  RM612.31
You save:  RM174.96
₦160,863.91
List Price:  ₦225,215.91
You save:  ₦64,352
₨28,092.19
List Price:  ₨39,330.19
You save:  ₨11,238
฿3,350.66
List Price:  ฿4,691.06
You save:  ฿1,340.39
₺3,841.79
List Price:  ₺5,378.66
You save:  ₺1,536.87
B$568.98
List Price:  B$796.59
You save:  B$227.61
R1,868.66
List Price:  R2,616.20
You save:  R747.54
Лв172.01
List Price:  Лв240.82
You save:  Лв68.81
₩143,821.94
List Price:  ₩201,356.47
You save:  ₩57,534.53
₪362.36
List Price:  ₪507.32
You save:  ₪144.96
₱5,623.93
List Price:  ₱7,873.73
You save:  ₱2,249.79
¥14,366.05
List Price:  ¥20,113.05
You save:  ¥5,746.99
MX$1,950.18
List Price:  MX$2,730.33
You save:  MX$780.15
QR364.06
List Price:  QR509.70
You save:  QR145.64
P1,378.20
List Price:  P1,929.54
You save:  P551.33
KSh12,898.71
List Price:  KSh18,058.71
You save:  KSh5,160
E£5,075.64
List Price:  E£7,106.11
You save:  E£2,030.46
ብር13,121.18
List Price:  ብር18,370.18
You save:  ብር5,249
Kz91,740.82
List Price:  Kz128,440.82
You save:  Kz36,700
CLP$93,485.65
List Price:  CLP$130,883.65
You save:  CLP$37,398
CN¥728.69
List Price:  CN¥1,020.20
You save:  CN¥291.50
RD$5,909.40
List Price:  RD$8,273.40
You save:  RD$2,364
DA13,237.77
List Price:  DA18,533.41
You save:  DA5,295.64
FJ$225.77
List Price:  FJ$316.09
You save:  FJ$90.31
Q770.06
List Price:  Q1,078.12
You save:  Q308.05
GY$20,918.55
List Price:  GY$29,286.80
You save:  GY$8,368.25
ISK kr12,783.72
List Price:  ISK kr17,897.72
You save:  ISK kr5,114
DH927.46
List Price:  DH1,298.48
You save:  DH371.02
L1,725.73
List Price:  L2,416.09
You save:  L690.36
ден5,409.84
List Price:  ден7,573.99
You save:  ден2,164.15
MOP$798.85
List Price:  MOP$1,118.43
You save:  MOP$319.57
N$1,886.91
List Price:  N$2,641.75
You save:  N$754.84
C$3,679.51
List Price:  C$5,151.46
You save:  C$1,471.95
रु13,656.03
List Price:  रु19,119
You save:  रु5,462.96
S/368.36
List Price:  S/515.72
You save:  S/147.36
K405.25
List Price:  K567.37
You save:  K162.12
SAR375.05
List Price:  SAR525.09
You save:  SAR150.03
ZK2,792.07
List Price:  ZK3,909.02
You save:  ZK1,116.94
L438.21
List Price:  L613.52
You save:  L175.30
Kč2,197.59
List Price:  Kč3,076.71
You save:  Kč879.12
Ft35,691.43
List Price:  Ft49,969.43
You save:  Ft14,278
SEK kr968.31
List Price:  SEK kr1,355.67
You save:  SEK kr387.36
ARS$116,356.84
List Price:  ARS$162,904.23
You save:  ARS$46,547.39
Bs690.91
List Price:  Bs967.30
You save:  Bs276.39
COP$425,444.32
List Price:  COP$595,639.07
You save:  COP$170,194.74
₡50,609.75
List Price:  ₡70,855.68
You save:  ₡20,245.92
L2,579.74
List Price:  L3,611.74
You save:  L1,032
₲799,773.34
List Price:  ₲1,119,714.67
You save:  ₲319,941.33
$U4,185.15
List Price:  $U5,859.38
You save:  $U1,674.22
zł375.88
List Price:  zł526.25
You save:  zł150.36
Already have an account? Log In

Transcript

In your examples folder, open up the sub folder titled scope and context seeing the same. Let's look at the first example file. Copy this example a code, the one that's named create a speed variable and show it in the console, copy that code and paste it in your JavaScript console. And we see that the output we get is 100. Okay, let's circle back. So in this example, we're creating a private variable called speed inside of this function foo, and we're outputting it in the console.

And when we execute foo, we see 100. So nothing special there. But just to establish that we want to use the var keyword to create a private variable. And we've talked about this a number of times in this class. So when you go down to example, be the one that's that says what happens if you forget the var keyword here on line 15. I forget the var keyword I on line four I've used var but on line 15.

I just I omitted it so I'm seeing speed. equals 100. And then I output speed and I execute foo. So okay, so what happens if we forget the var keyword? Well, I'm going to copy this code. And I'm going to paste this in the console, refresh the page.

And I get 100 again. So we still get 100. We know that we created the variable and we output it. But I'm thinking something different happen here. Well, something did happen here. There's something that happens to that speed variable.

What happens is the speed variable becomes what's called an implied global. And implied global is a variable in browser based JavaScript, where when you omit the var keyword, that variable becomes a property of the window object, it becomes a global variable. And remember, it's really super important piece of information is that a global variable is a property of the window object. So if I type speed in my console, I see 100 In fact, if I type window, dot speed, I get 100. In fact, if I type window, and I inspect the window object, and I scroll all the way down, and I look, I can see there's a speed property right here. So the point here is that when you omit the var keyword, you create what's called an implied global.

It becomes a global variable. And you've done that implicitly. So creating an implied global is really the same thing as declaring the variable the variable globally. So lines 14 and line 17 are exactly the same. They do the exact same thing. They both create a global variable.

The only difference is on line 14. I'm doing it explicitly. I'm saying var speed equals 100. And I'm doing it in the global scope. On line 17, I'm doing it implicitly. And I'm saying, well, speed equals 100.

And because I'm in a function, the omission of the var keyword says, Oh, it's going to be a global. But the other thing that happened is we discovered a few seconds ago is that creating an a global variable also creates a property of the window object with the same name. So lines 14 and 15, are exactly the same. They accomplish the exact same thing. var speed equals 100 and a window dot speed equals 100. Both create a global variable.

That's also a property of the window object. So this isn't a situation where scope and context almost kind of merged they, they very much feel like the same thing. And in a way, you can almost think of them as the same thing. It's depends on how you want to debate it, but it's really the two kind of meet and they certainly feel the same because we have a global variable. There's no doubt about it, but that variable becomes a problem. Have the window object.

And you can also say that this is the exact same thing line. 16 does the exact same thing as lines 14 and 15. Because by leaving out the var keyword on line 16, I'm creating an implied global, I'm just doing it in the global space. So all three of these things accomplish the exact same thing, they create a global variable. And that global variable becomes a property of the window object. It's a incredibly important piece of information to keep in mind, because when you're working with browser based JavaScript, the window object is a very important object.

Global variables are an important concept to be aware of, they're usually bad. There's plenty of them. There's definitely plenty of project properties of the window object, but creating global variables. Intentionally is usually something you want to avoid. But it's important to understand that when you omit the var keyword inside of a funnel, If you create what's called an implied global, it's a global variable, you're doing it implicitly. And that variable also becomes a property of the window object.

And the global variable is also a property of the window object.

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.