1
00:00:01,370 --> 00:00:02,480
Welcome back.

2
00:00:02,510 --> 00:00:05,770
Let's just start with syntax of object.

3
00:00:05,780 --> 00:00:07,910
How can you create an object?

4
00:00:07,939 --> 00:00:11,240
Now you see how beauty and object is.

5
00:00:11,360 --> 00:00:13,160
So let's get started.

6
00:00:13,670 --> 00:00:14,450
All right.

7
00:00:14,450 --> 00:00:21,020
So, as usual, I have already created a folder called Objects.

8
00:00:21,650 --> 00:00:26,870
Let me show you the name of my object as that grid as that.

9
00:00:26,900 --> 00:00:32,210
And then inside, I have two files, my HTML and my JavaScript.

10
00:00:32,240 --> 00:00:38,240
This folder is from an extension I installed as my life saver, so don't pay attention to that.

11
00:00:38,600 --> 00:00:40,640
So if I open my.

12
00:00:41,860 --> 00:00:42,730
H.M..

13
00:00:42,760 --> 00:00:50,680
I have connected my JavaScript as that and next inside my JavaScript is empty canvas.

14
00:00:50,710 --> 00:00:53,140
It's time to make our hands dirty.

15
00:00:53,380 --> 00:00:56,860
All right, so how can we create objects?

16
00:00:57,430 --> 00:01:01,090
We have two ways of creating objects.

17
00:01:01,570 --> 00:01:08,350
But before we move on, the PDF guide about all the steps will be provided so you can download and make

18
00:01:08,350 --> 00:01:09,130
reference to it.

19
00:01:09,130 --> 00:01:12,880
For the meantime, follow me and then let's understand the concept.

20
00:01:13,150 --> 00:01:13,750
Good.

21
00:01:13,780 --> 00:01:19,600
So the first method is using the object constructor function.

22
00:01:20,050 --> 00:01:22,720
Object constructor.

23
00:01:23,740 --> 00:01:24,700
Function.

24
00:01:25,570 --> 00:01:27,180
So let's see how to create.

25
00:01:27,340 --> 00:01:30,010
So let's say that you want to create a person object.

26
00:01:30,010 --> 00:01:37,210
So my keyword const and then my variable name core person and then equal to.

27
00:01:38,080 --> 00:01:44,560
I'll break new and then object, uppercase object and then as a function.

28
00:01:45,280 --> 00:01:50,080
So now I have created an empty object called person.

29
00:01:50,290 --> 00:02:01,220
So if I check my console and I search for person, you see, I have it as carry places.

30
00:02:01,240 --> 00:02:03,360
As you see here on the screen.

31
00:02:03,370 --> 00:02:07,030
So this is my beautiful empty object.

32
00:02:07,270 --> 00:02:12,730
So because there is no data inside, it's an empty object.

33
00:02:12,760 --> 00:02:16,420
So how can we add properties to it?

34
00:02:16,720 --> 00:02:24,010
So the first step of using this method is that, first of all, you create, let's say here create,

35
00:02:24,010 --> 00:02:28,540
and then next step after creating, you add your properties to it.

36
00:02:29,490 --> 00:02:31,470
Properties to it, and it's how we do it.

37
00:02:32,400 --> 00:02:41,160
We take the person, the piece of dot, and here we see that we have built in methods on that, but

38
00:02:41,160 --> 00:02:44,830
we can add our own properties and method to it.

39
00:02:44,850 --> 00:02:46,770
So here I will say name.

40
00:02:47,160 --> 00:02:50,310
Then I assign to, let's say John.

41
00:02:52,550 --> 00:03:00,560
So if I check my console again and search for person and announce that I have a key value per property

42
00:03:00,560 --> 00:03:02,570
name and then my value.

43
00:03:02,870 --> 00:03:03,590
Perfect.

44
00:03:03,590 --> 00:03:06,990
So I can go ahead and add more properties.

45
00:03:07,010 --> 00:03:10,730
Let's say the person's age is equal to 30.

46
00:03:12,420 --> 00:03:13,140
You get it.

47
00:03:13,410 --> 00:03:18,720
Next is let's say person dot is.

48
00:03:19,690 --> 00:03:21,100
He is married.

49
00:03:21,700 --> 00:03:25,460
We see how how flexible this one is.

50
00:03:25,480 --> 00:03:31,210
Let's say we see that I'm able to save all kind of data types in it.

51
00:03:31,540 --> 00:03:35,530
Now I have a string number and a boolean.

52
00:03:36,100 --> 00:03:41,590
I can also go ahead and also save what you call arrays of record.

53
00:03:41,680 --> 00:03:45,520
So I can say person dot hobbies.

54
00:03:47,180 --> 00:03:49,220
Then is equal to array.

55
00:03:49,620 --> 00:03:52,280
See, then I said a person like sports.

56
00:03:53,150 --> 00:03:54,050
After that.

57
00:03:54,050 --> 00:03:55,550
The person like cooking?

58
00:03:56,150 --> 00:03:56,990
Yes.

59
00:03:57,320 --> 00:04:02,840
So now if I search for person, you see that I have this data.

60
00:04:03,200 --> 00:04:06,170
If I open this, I have my key value.

61
00:04:06,170 --> 00:04:08,540
Per h is a number.

62
00:04:08,570 --> 00:04:15,560
Hobbies and array is married is true, and name is also a string that is flexibility.

63
00:04:15,560 --> 00:04:18,800
How flexible an object is.

64
00:04:18,980 --> 00:04:24,260
So the same way of creating we can create a.

65
00:04:26,990 --> 00:04:33,110
So this method, like first of all, we create an empty object and then we add a property.

66
00:04:33,230 --> 00:04:36,380
So the same process can be simplified.

67
00:04:36,410 --> 00:04:37,310
So let me.

68
00:04:38,020 --> 00:04:46,570
Comment this one out and then let me bring mine object here as that so I can do it on the fly.

69
00:04:46,840 --> 00:04:51,710
OC then using dot notation to assign properties to my object.

70
00:04:51,730 --> 00:04:56,710
So inside this I will bring in my curly braces.

71
00:04:57,250 --> 00:04:58,450
And there you go.

72
00:04:58,570 --> 00:05:00,100
So my key value pair.

73
00:05:00,130 --> 00:05:03,760
Now I want name, which is John.

74
00:05:05,090 --> 00:05:10,400
And then the age of the person, which is called 30.

75
00:05:11,820 --> 00:05:13,770
You bring common separated pay.

76
00:05:13,770 --> 00:05:15,150
Pay attention to that.

77
00:05:15,150 --> 00:05:21,690
And let's say my hobbies, the normal hobby, the person hobby is semi-colon.

78
00:05:21,690 --> 00:05:22,920
And then I read.

79
00:05:22,970 --> 00:05:25,230
Yes I didn't mention that.

80
00:05:25,440 --> 00:05:27,090
Bring semicolon and that.

81
00:05:27,090 --> 00:05:28,200
So let's see.

82
00:05:28,230 --> 00:05:28,830
Cooking.

83
00:05:29,740 --> 00:05:30,260
Mm hmm.

84
00:05:33,020 --> 00:05:33,680
Yes.

85
00:05:34,100 --> 00:05:38,240
The last one is the person married, So let's say is.

86
00:05:39,010 --> 00:05:41,560
Married to True.

87
00:05:43,800 --> 00:05:44,460
And.

88
00:05:44,460 --> 00:05:45,300
Come on.

89
00:05:45,420 --> 00:05:46,290
Yeah, I think.

90
00:05:46,290 --> 00:05:46,510
Yeah.

91
00:05:46,770 --> 00:05:55,260
Okay, So if I save this one now, if I check for person objects, we see we have it as before.

92
00:05:55,830 --> 00:05:58,920
So any of these methods are fine.

93
00:05:59,190 --> 00:06:05,430
We can first initialize the empty object and add your properties, or you can do it on the fly.

94
00:06:05,580 --> 00:06:09,300
This is what you call using the constructor function.

95
00:06:09,300 --> 00:06:10,740
So method one.

96
00:06:11,220 --> 00:06:13,200
What about method two?

97
00:06:14,070 --> 00:06:23,880
So method two also use what is called the object literal syntax, which is called object literal syntax.

98
00:06:23,910 --> 00:06:25,590
Let's see how it goes.

99
00:06:25,950 --> 00:06:28,400
So let me create a same object by our naming.

100
00:06:28,620 --> 00:06:31,290
Let me comment this one to avoid some.

101
00:06:32,340 --> 00:06:33,870
Conflict of the variable name.

102
00:06:33,870 --> 00:06:41,880
So the same thing const mind person and thing is you bring equal to and then you are carried racist

103
00:06:42,360 --> 00:06:43,410
and that is it.

104
00:06:43,410 --> 00:06:44,250
I'm done.

105
00:06:44,250 --> 00:06:55,410
So if I check for person, if I check for person inside my console as person, remember before we have

106
00:06:55,410 --> 00:06:57,380
the same curly braces.

107
00:06:57,390 --> 00:06:59,520
That's how we can create this one.

108
00:06:59,730 --> 00:07:04,590
So adding properties, we can do it in the same way as we did for this.

109
00:07:04,590 --> 00:07:11,240
We have the the empty object that we added properties and we can also do it on the fly.

110
00:07:11,250 --> 00:07:12,540
So let's see.

111
00:07:12,900 --> 00:07:13,500
Let me see.

112
00:07:13,500 --> 00:07:15,270
Add properties.

113
00:07:17,170 --> 00:07:20,590
So first of all, person Dot's name.

114
00:07:22,270 --> 00:07:24,550
Equal to John.

115
00:07:26,300 --> 00:07:27,290
And then.

116
00:07:27,500 --> 00:07:28,850
Oh, come on.

117
00:07:28,880 --> 00:07:32,750
Not comma, sorry, semicolon like this one person does.

118
00:07:33,140 --> 00:07:38,960
Age is equal to 30 person dot.

119
00:07:40,100 --> 00:07:44,990
Dot is married is equal to true.

120
00:07:46,100 --> 00:07:49,720
And then person does.

121
00:07:49,790 --> 00:07:50,660
Hobbies.

122
00:07:51,140 --> 00:07:56,750
Hobbies is equal to my empty array cooking.

123
00:07:58,180 --> 00:07:59,800
And let's say sports.

124
00:08:00,100 --> 00:08:00,910
Sports.

125
00:08:00,940 --> 00:08:01,660
Yes.

126
00:08:01,780 --> 00:08:04,750
So if I search for person.

127
00:08:05,500 --> 00:08:06,310
Let's see.

128
00:08:06,340 --> 00:08:08,320
I have it as before.

129
00:08:08,860 --> 00:08:13,030
So it under the same process, we can add the properties on the fly.

130
00:08:13,060 --> 00:08:15,820
So here, let me comment this one out.

131
00:08:16,030 --> 00:08:17,110
This one out.

132
00:08:17,140 --> 00:08:20,230
Let me copy this one and then as before.

133
00:08:20,260 --> 00:08:21,320
Let's do it on the fly.

134
00:08:21,340 --> 00:08:22,630
So space.

135
00:08:22,630 --> 00:08:25,240
And here we can add the property names.

136
00:08:25,810 --> 00:08:31,930
So first is the name of the person, not navigator, but the name of the person.

137
00:08:33,620 --> 00:08:35,210
Is John.

138
00:08:36,460 --> 00:08:37,059
And then.

139
00:08:37,059 --> 00:08:37,840
Come on here.

140
00:08:38,049 --> 00:08:38,440
Come on.

141
00:08:38,470 --> 00:08:39,450
Pay attention to that.

142
00:08:39,460 --> 00:08:41,260
An age is 30.

143
00:08:41,710 --> 00:08:44,560
Come on and say it's married.

144
00:08:46,410 --> 00:08:47,160
True.

145
00:08:47,810 --> 00:08:48,470
Comma.

146
00:08:48,480 --> 00:08:49,860
And then.

147
00:08:50,640 --> 00:08:51,410
Hobbies.

148
00:08:51,860 --> 00:08:52,620
Hobbies.

149
00:08:52,650 --> 00:08:53,550
Semi-colon.

150
00:08:53,580 --> 00:08:55,440
Array of cooking.

151
00:08:56,250 --> 00:08:57,030
And then.

152
00:08:57,030 --> 00:08:57,660
Also.

153
00:08:57,660 --> 00:08:58,470
Sports.

154
00:08:59,490 --> 00:09:03,150
So now if I save it now, let's check it out.

155
00:09:03,950 --> 00:09:04,730
Person.

156
00:09:04,850 --> 00:09:06,880
We have the same process.

157
00:09:06,890 --> 00:09:11,630
So now here is the question Which method should I use?

158
00:09:12,140 --> 00:09:17,930
Well, I'm going to tell you from experience, looking at this one, this is a long way to go.

159
00:09:18,230 --> 00:09:20,270
A person new object.

160
00:09:20,270 --> 00:09:23,540
And then you come here, you add the properties or this one.

161
00:09:23,540 --> 00:09:26,420
So I think it's a long, longer or a long way to go.

162
00:09:26,630 --> 00:09:29,450
But this syntax is really precise.

163
00:09:29,780 --> 00:09:37,220
This what you often see in documentation and project, because this is simple to use variable name,

164
00:09:37,220 --> 00:09:39,050
object and your properties.

165
00:09:39,050 --> 00:09:44,060
So this is a method that is mostly used and is what I like.

166
00:09:44,060 --> 00:09:47,810
But in some use cases you may need to go by this idea.

167
00:09:48,110 --> 00:09:53,480
Maybe after I finish to, I can come here and let's say I can add additional properties to it so I can

168
00:09:53,480 --> 00:09:57,500
say that person does another property.

169
00:10:00,830 --> 00:10:01,160
And.

170
00:10:01,550 --> 00:10:03,980
And property.

171
00:10:04,280 --> 00:10:04,640
Property?

172
00:10:04,700 --> 00:10:05,100
Yeah.

173
00:10:05,120 --> 00:10:07,790
So many say is equal to.

174
00:10:07,820 --> 00:10:08,570
I don't know.

175
00:10:10,130 --> 00:10:10,950
I do not know.

176
00:10:10,970 --> 00:10:11,480
Yes.

177
00:10:11,960 --> 00:10:12,290
Yeah.

178
00:10:12,290 --> 00:10:15,960
So if I save this one, then I check for my person.

179
00:10:15,980 --> 00:10:18,650
We see that I have additional property called.

180
00:10:19,130 --> 00:10:19,910
I don't know.

181
00:10:20,720 --> 00:10:22,270
So you see that How flexible it is.

182
00:10:22,280 --> 00:10:26,810
So this is the syntax you are going to use often.