1
00:00:00,330 --> 00:00:01,440
In this video.

2
00:00:01,440 --> 00:00:06,810
Let's talk about global scope in details with code.

3
00:00:07,170 --> 00:00:09,240
So back to Visual Studio code.

4
00:00:09,240 --> 00:00:19,140
As usual, I have a folder called Functions and inside I have two files called HTML and my JavaScript.

5
00:00:19,710 --> 00:00:23,940
Inside the HTML I have connected by JavaScript.

6
00:00:23,940 --> 00:00:25,470
So let me close it.

7
00:00:25,470 --> 00:00:29,220
And now let's open the JavaScript file.

8
00:00:30,240 --> 00:00:31,770
Let's start with.

9
00:00:33,090 --> 00:00:34,080
Global.

10
00:00:34,800 --> 00:00:35,580
Scope.

11
00:00:35,970 --> 00:00:38,790
So what is global scope?

12
00:00:39,210 --> 00:00:47,400
Well, in JavaScript, global scope refers to the root scope of the problem, and global scope is a

13
00:00:47,400 --> 00:00:53,550
default scope for variables and functions defined outside of any other scope.

14
00:00:53,850 --> 00:00:55,200
So let's have a look.

15
00:00:55,410 --> 00:01:02,200
Let's declare a variable say user, which is an object with two properties.

16
00:01:02,220 --> 00:01:03,210
Name.

17
00:01:04,720 --> 00:01:05,890
Of men.

18
00:01:07,780 --> 00:01:09,460
And age.

19
00:01:10,520 --> 00:01:12,110
Of 20 years.

20
00:01:12,500 --> 00:01:21,410
So this variable called user is in global scope because we can access these variables anywhere in our

21
00:01:21,410 --> 00:01:26,540
code, whether in a function, or we can console.log it without any error.

22
00:01:27,230 --> 00:01:34,340
And again, global scope is created when your JavaScript code is loaded into the browser.

23
00:01:34,640 --> 00:01:40,400
So as soon as I said this now when JavaScript has loaded into the browser.

24
00:01:40,430 --> 00:01:44,060
So let's see if indeed our file has been loaded.

25
00:01:44,090 --> 00:01:49,400
So first, let's check inside our console and see if there is an error.

26
00:01:49,430 --> 00:01:55,310
And lucky for us, there is no error, meaning our code is successfully loaded.

27
00:01:55,940 --> 00:01:59,820
But how sure I read that it has been loaded.

28
00:01:59,840 --> 00:02:01,100
Well, let me show you.

29
00:02:01,550 --> 00:02:06,790
Click on network and then click on or after.

30
00:02:06,800 --> 00:02:07,750
Click on that.

31
00:02:07,760 --> 00:02:09,500
Let's refresh our page.

32
00:02:09,530 --> 00:02:12,770
Now this something has been displayed here.

33
00:02:12,860 --> 00:02:17,240
We have the files that has been loaded into our browser.

34
00:02:17,450 --> 00:02:22,370
The first one is our HTML and the second one is our JavaScript file.

35
00:02:22,820 --> 00:02:25,720
If I open my HTML, let's see what we have.

36
00:02:25,730 --> 00:02:31,700
We see that this is our syntax that we have written, but it has been converted into this code.

37
00:02:32,810 --> 00:02:39,470
And if you click on script and then click on response, you will see the code that we have written.

38
00:02:39,830 --> 00:02:46,870
And if you check the status code headers, you see that for this one, we see that we have status code.

39
00:02:46,880 --> 00:02:49,660
Okay, meaning there is nothing wrong with it.

40
00:02:49,670 --> 00:02:52,490
Our code has been successfully loaded.

41
00:02:52,790 --> 00:03:00,470
But if I try to make some changes to the way requiring the scripts here, let's say our change the name

42
00:03:00,470 --> 00:03:04,730
this one to let's say app the g is of which it doesn't exist.

43
00:03:05,180 --> 00:03:10,430
If I save this file and next you see that now I get some error.

44
00:03:10,430 --> 00:03:17,390
If I check my console here we see that we have some error if I click on network and then all and then

45
00:03:17,390 --> 00:03:20,810
refresh to see that I get some error rate cut here.

46
00:03:20,990 --> 00:03:22,790
That is code 404.

47
00:03:22,790 --> 00:03:27,620
Meaning it hasn't found meaning that our file hasn't yet been loaded.

48
00:03:27,620 --> 00:03:30,920
And you can see that I guess that is code for four.

49
00:03:30,950 --> 00:03:35,770
And I have this red indicator meaning our file hasn't yet loaded.

50
00:03:35,780 --> 00:03:38,690
So let's do it nicely by bringing back.

51
00:03:39,760 --> 00:03:41,800
By bringing back our JavaScript?

52
00:03:41,800 --> 00:03:43,180
Well, I asked Noma.

53
00:03:43,180 --> 00:03:45,420
Now everything works perfectly.

54
00:03:46,060 --> 00:03:48,000
The proof is that I want to show you.

55
00:03:48,010 --> 00:03:52,840
Indeed, our file has been loaded into the browser, so back to our console.

56
00:03:52,870 --> 00:03:54,800
Now let me remove this one.

57
00:03:54,820 --> 00:04:02,470
Now the first scenario, and again for this variable, we can access it in any way in our code.

58
00:04:03,100 --> 00:04:08,020
Let's say that you also have a variable cost, let's say amount.

59
00:04:09,040 --> 00:04:15,790
Cost amount of money is equal to 100.

60
00:04:15,820 --> 00:04:22,570
Let's say that for these variables I can pass into any function and it work nice for me.

61
00:04:23,320 --> 00:04:31,810
Well, this technique is okay, but sometimes it can lead to problems if variables or function, the

62
00:04:31,810 --> 00:04:35,860
global scope are accidentally overwritten or modified.

63
00:04:35,950 --> 00:04:40,690
So let's see how we can modify these variables that can cause problem.

64
00:04:41,450 --> 00:04:45,740
Let's create a function to display or get user info.

65
00:04:45,740 --> 00:04:54,040
So function gets user info as that and my carry basis.

66
00:04:54,050 --> 00:04:56,750
So this function will take in the user object.

67
00:04:56,750 --> 00:04:58,850
Let me say object of user.

68
00:04:59,610 --> 00:05:04,760
Let's dump the user name and age into the console as that.

69
00:05:04,770 --> 00:05:12,190
So I would take the object user and then third name and then the age.

70
00:05:12,210 --> 00:05:22,890
Let's say your name is and then my dollar sign carry basis and then let's say the object user object

71
00:05:22,890 --> 00:05:27,360
user dot age, let's say years.

72
00:05:29,400 --> 00:05:30,780
Oh, great.

73
00:05:31,050 --> 00:05:33,460
So let's call this function and see.

74
00:05:33,480 --> 00:05:42,960
So down here, if I call get user info, then I'll pass in my user object above or the user for short.

75
00:05:42,990 --> 00:05:44,130
Now let's see.

76
00:05:44,130 --> 00:05:48,620
You see, I get Ben is 20 years old.

77
00:05:48,630 --> 00:05:50,160
This is perfect.

78
00:05:50,490 --> 00:05:55,770
But let's see how we can mutate this data after mutating it.

79
00:05:55,800 --> 00:05:59,790
Let's see the name that we are going to get all the age that you are going to get.

80
00:06:00,630 --> 00:06:07,140
Remember, objects are passed by reference so we can change the values of this particular object.

81
00:06:07,140 --> 00:06:08,280
So let's see.

82
00:06:08,490 --> 00:06:12,680
So let's add a function says change user info.

83
00:06:12,690 --> 00:06:13,770
So here we go.

84
00:06:14,070 --> 00:06:15,390
So change.

85
00:06:15,810 --> 00:06:19,200
Let me say update user, update user.

86
00:06:19,650 --> 00:06:20,460
Okay, good.

87
00:06:20,460 --> 00:06:21,690
So now here we go.

88
00:06:21,720 --> 00:06:25,320
The function the function goes like this.

89
00:06:27,770 --> 00:06:30,800
Function going to be change?

90
00:06:31,670 --> 00:06:32,690
User.

91
00:06:33,810 --> 00:06:36,120
Info as that.

92
00:06:36,120 --> 00:06:38,600
And this also takes in the user object.

93
00:06:38,610 --> 00:06:40,680
Let me say object for short.

94
00:06:40,980 --> 00:06:49,080
And now for this I'm going to change the user name objects dot name, which is equal to change this

95
00:06:49,080 --> 00:06:50,130
one to John.

96
00:06:50,340 --> 00:06:55,200
And next is the the object edge dot edge.

97
00:06:55,230 --> 00:06:58,320
Let's also change this one to set 30.

98
00:06:59,090 --> 00:07:02,360
Let me remove this one and bring my semicolon as that.

99
00:07:02,450 --> 00:07:09,320
So let's call this function called change user info and let me pass in the same user object.

100
00:07:09,380 --> 00:07:10,060
Great.

101
00:07:10,070 --> 00:07:13,850
So when I save it, there is nothing new.

102
00:07:13,910 --> 00:07:17,350
A still ban is 20 years old.

103
00:07:17,360 --> 00:07:23,930
But look, if I call this function after I call the update.

104
00:07:23,960 --> 00:07:24,890
Have a look.

105
00:07:25,190 --> 00:07:29,000
Now, instead of ban, it will be John.

106
00:07:29,330 --> 00:07:31,880
And instead of 20, I'm going to be 30.

107
00:07:31,880 --> 00:07:33,110
So let's save it.

108
00:07:33,350 --> 00:07:37,400
And indeed, you see that I have changed the variable.

109
00:07:37,430 --> 00:07:38,930
That is my object.

110
00:07:39,350 --> 00:07:45,050
That's why we say that variables declare in a global scope sometimes can cause problem.

111
00:07:45,050 --> 00:07:50,900
If you are not careful and variable we declare in the global scope can be accessed in anywhere.

112
00:07:50,930 --> 00:07:53,330
That's what I have proved to you.

113
00:07:53,480 --> 00:08:00,650
So we need to avoid as much as possible declaring variables in a global scope unless it is needed.