1
00:00:08,800 --> 00:00:15,970
Hey, everyone, in this video, we are going to talk about name spaces earlier in the course, we talked

2
00:00:15,970 --> 00:00:22,980
about variable scope and we saw the global variables can be accessed from anywhere in the code.

3
00:00:23,320 --> 00:00:30,910
So as our application grows and becomes more complex, it is likely that at some point two variables

4
00:00:30,910 --> 00:00:31,900
are functions.

5
00:00:32,200 --> 00:00:37,240
We end up having the same name and this is going to cause a conflict.

6
00:00:37,540 --> 00:00:45,300
We might get errors that we take a long time to identify, and this can be very problematic to our application.

7
00:00:45,490 --> 00:00:53,770
So the way we can keep our code organized while keeping the variable names simple and avoiding conflict

8
00:00:53,980 --> 00:00:56,480
is by using name spaces.

9
00:00:56,770 --> 00:01:02,230
This is going to create a local scope for our variables and functions.

10
00:01:02,560 --> 00:01:10,630
Name spaces are something very common in many programming languages, but JavaScript doesn't actually

11
00:01:10,630 --> 00:01:12,280
have name spaces.

12
00:01:12,580 --> 00:01:18,720
So what we are going to see here are alternative ways of achieving the same outcome.

13
00:01:19,120 --> 00:01:22,840
So I'm not going to go into details with this.

14
00:01:22,870 --> 00:01:25,570
I just want to talk about what name spaces are.

15
00:01:25,570 --> 00:01:29,470
I'm going to show you one example, which is by using objects.

16
00:01:29,710 --> 00:01:36,730
And then if you want to dive deeper into this subject, I'm going to leave a few links at the end so

17
00:01:36,730 --> 00:01:38,050
you can learn more.

18
00:01:38,140 --> 00:01:42,510
So let's see how we can create name spaces with objects.

19
00:01:42,520 --> 00:01:44,560
So let's go to Visual Studio Code.

20
00:01:44,770 --> 00:01:50,770
Let's say we have a component in our home page, which is a best seller slider.

21
00:01:51,070 --> 00:01:56,560
So let's say we have a product slider that shows prices that have links.

22
00:01:57,070 --> 00:02:02,550
So we want to create variables to store the information for this slider.

23
00:02:02,950 --> 00:02:07,240
So let's say we want to start by the products.

24
00:02:07,240 --> 00:02:10,000
We could create a variable called product.

25
00:02:12,510 --> 00:02:19,800
And then let's start a list here, so I'm just going to create a very simple example.

26
00:02:21,680 --> 00:02:22,550
Like this.

27
00:02:24,350 --> 00:02:31,400
So these would be the products for our product, Slider, but as our application grows, it is likely

28
00:02:31,400 --> 00:02:35,210
that I'm going to use this name somewhere else in the code.

29
00:02:36,230 --> 00:02:38,690
So what could we do with this?

30
00:02:38,900 --> 00:02:46,760
Well, we could just make this name more specific so I could do like products for.

31
00:02:48,310 --> 00:02:49,000
Best.

32
00:02:50,260 --> 00:02:57,640
Sallas slider, but as we've learned in the beginning of the course, we should try to keep the names

33
00:02:57,640 --> 00:03:02,470
simple, we should try to use as few words as possible.

34
00:03:02,480 --> 00:03:05,830
So this is not a very good name for our variable.

35
00:03:06,070 --> 00:03:12,130
And besides, maybe we need to store more information about the slider.

36
00:03:12,130 --> 00:03:14,880
So let's say we need to start the interval.

37
00:03:15,400 --> 00:03:18,550
So I would have to create something like Intervale.

38
00:03:19,570 --> 00:03:22,030
Then I can just repeat.

39
00:03:23,020 --> 00:03:29,140
The rest of it, so intervale for best seller Slider, which is going to be three thousand milliseconds,

40
00:03:29,560 --> 00:03:35,260
which is what I'm going to use for the interval between sliders, and this can go on.

41
00:03:35,290 --> 00:03:38,960
So, as you can see, this is not a very good way of doing this.

42
00:03:39,160 --> 00:03:42,340
We have very complicated names for our variables.

43
00:03:43,150 --> 00:03:50,710
And also they are just going to be there in the global scope, which is not a very organized way of

44
00:03:50,710 --> 00:03:51,260
doing this.

45
00:03:51,610 --> 00:03:55,300
So how can we make it much better by using a namespace?

46
00:03:55,570 --> 00:04:02,550
As I've said, it's not exactly a namespace, but just a simulation of a namespace by using an object.

47
00:04:02,980 --> 00:04:08,520
So instead of creating stuff like this, I'm going to create an empty object here.

48
00:04:09,130 --> 00:04:13,330
So let me use this name bestseller's slider.

49
00:04:17,550 --> 00:04:21,600
Like this, which is going to be an empty object.

50
00:04:26,840 --> 00:04:35,990
So every time you have a section of your page or maybe a page in your website, you should always organize

51
00:04:35,990 --> 00:04:42,920
it like this, just create an object and keep everything for that section or for that page inside the

52
00:04:42,920 --> 00:04:43,490
object.

53
00:04:43,850 --> 00:04:49,610
So now, instead of having big names like this, what I can do is just.

54
00:04:50,610 --> 00:04:54,520
Using objects, properties as variables.

55
00:04:54,750 --> 00:04:57,060
So what I'm going to do now is just.

56
00:04:59,240 --> 00:05:06,140
Getting this object and I'm going to start creating properties, so one of the properties is going to

57
00:05:06,140 --> 00:05:07,550
be called products.

58
00:05:10,030 --> 00:05:10,690
And then.

59
00:05:12,690 --> 00:05:14,280
I can store the product.

60
00:05:17,930 --> 00:05:21,350
And I'm going to do the same thing for the interviewer.

61
00:05:23,070 --> 00:05:24,330
Just like that.

62
00:05:31,350 --> 00:05:33,260
Now, let me copy this name.

63
00:05:33,630 --> 00:05:40,170
I'm just going to save it, and if we go back to the page, let me open the inspector here.

64
00:05:42,970 --> 00:05:51,240
Now we have this variable that storing everything we need for our slider, so this is much more organized

65
00:05:51,270 --> 00:05:53,350
and now if we want the product.

66
00:05:54,590 --> 00:05:57,450
We don't have that crazy name anymore.

67
00:05:57,980 --> 00:06:05,450
All we need to do is call the best sellers slider variable, which is not likely to repeat throughout

68
00:06:05,450 --> 00:06:10,460
the code and inside it, we have meaningful and simple names like products.

69
00:06:10,710 --> 00:06:16,220
So if we do like this product, then we are able to get the products we want.

70
00:06:16,370 --> 00:06:24,170
And by doing this, we can make sure that this is not going to cause any conflict with any other part

71
00:06:24,170 --> 00:06:26,850
of our code that has a product variable.

72
00:06:27,080 --> 00:06:33,130
So when you hear about name spaces in JavaScript, this is what actually people are talking about.

73
00:06:33,830 --> 00:06:39,030
Just remember that name spaces are not part of the core JavaScript language.

74
00:06:39,200 --> 00:06:44,340
So what we are doing is just simulating name spaces by using objects.

75
00:06:44,810 --> 00:06:51,770
So just going back to the code instead of doing it like this, just creating an empty object, we can

76
00:06:51,770 --> 00:06:57,070
actually create all the properties we need when we are creating the object.

77
00:06:57,080 --> 00:06:59,060
So we could just we like this.

78
00:06:59,060 --> 00:07:01,400
Let's create a property called products.

79
00:07:01,970 --> 00:07:05,930
Then let's remember that inside objects we just use.

80
00:07:06,920 --> 00:07:15,010
Key value pairs, so the key is called product, and this is the value associated to this key or property,

81
00:07:15,950 --> 00:07:17,090
the same thing.

82
00:07:18,370 --> 00:07:22,660
For any other property that we want to add here, so Intervale.

83
00:07:24,930 --> 00:07:25,650
Colin.

84
00:07:28,890 --> 00:07:36,020
So these are properties of the object, and let's remember that objects also have methods.

85
00:07:36,210 --> 00:07:40,890
So if you want to add a function, you could create one like get.

86
00:07:43,660 --> 00:07:50,170
Products so associated to this property, I'm just going to create a function which is going to turn

87
00:07:50,170 --> 00:07:51,130
this into a.

88
00:07:52,540 --> 00:08:02,470
Method of this object, and as we know inside objects, we can use this keyword to refer to the object.

89
00:08:02,740 --> 00:08:05,200
So I can just do cancel the log.

90
00:08:07,100 --> 00:08:08,780
This dot.

91
00:08:10,630 --> 00:08:11,350
Products.

92
00:08:16,560 --> 00:08:17,760
So if I do this.

93
00:08:23,070 --> 00:08:30,450
And let's try to call that method so get products, don't forget to open and close parentheses.

94
00:08:30,570 --> 00:08:36,080
And when we do this, as you can see, we are just calling a method from this object.

95
00:08:36,300 --> 00:08:39,920
So, again, this is a very simple name, get products.

96
00:08:40,230 --> 00:08:48,330
But as this is inside this object, there's no risk of having the same name associated to another variable

97
00:08:48,330 --> 00:08:49,990
and then causing a conflict.

98
00:08:50,250 --> 00:08:54,810
So this is why it's a good idea to use namespace in JavaScript.

99
00:08:55,230 --> 00:09:01,890
So this is one way by using objects, I'm not going to go into other methods because I just wanted to

100
00:09:01,890 --> 00:09:04,680
scratch the surface of this subject.

101
00:09:04,920 --> 00:09:11,490
But if you want to learn more, you can check this link about Modu patterns, which is going to create

102
00:09:11,490 --> 00:09:13,890
namespace with functions.

103
00:09:14,200 --> 00:09:19,590
And there's also this other link where you will see a few more examples.

104
00:09:19,920 --> 00:09:21,990
So that was all I wanted to speak about.

105
00:09:21,990 --> 00:09:23,090
Name spaces.

106
00:09:23,340 --> 00:09:24,780
I'll see you in the next video.