1
00:00:09,770 --> 00:00:16,130
Hey, everyone, continuing with the last data type we need to learn in this video, we're going to

2
00:00:16,130 --> 00:00:17,690
talk about objects.

3
00:00:17,840 --> 00:00:22,160
So objects like iRace are also lists of elements.

4
00:00:22,430 --> 00:00:25,840
But the difference is that objects are not ordered.

5
00:00:26,150 --> 00:00:34,550
So in an array, you have elements in a specific order and you can access them by their indexes with

6
00:00:34,550 --> 00:00:35,330
objects.

7
00:00:35,570 --> 00:00:42,970
Each of the elements are going to be a key value pair separated by Callon.

8
00:00:43,220 --> 00:00:49,250
So as you can see in this example, we have an object for an employee.

9
00:00:49,610 --> 00:00:52,790
So this is the first element of this object.

10
00:00:52,820 --> 00:01:02,090
So this element has a key, which is name and a value associated to this key, which is James Taylor.

11
00:01:02,810 --> 00:01:06,510
The object keys are also called properties.

12
00:01:06,530 --> 00:01:08,560
So this is the name property.

13
00:01:08,570 --> 00:01:12,270
This is the year of birth property and so on.

14
00:01:12,890 --> 00:01:16,340
Now, how can we access each of these values?

15
00:01:16,730 --> 00:01:18,110
So let's copy this.

16
00:01:19,230 --> 00:01:26,670
And create this object, as you can see, we create an object with the curly braces, so arrays are

17
00:01:26,670 --> 00:01:32,740
created with braces and objects are created with curly braces.

18
00:01:33,360 --> 00:01:35,610
So now that we have this object.

19
00:01:37,470 --> 00:01:39,570
Let's try to do employee.

20
00:01:41,450 --> 00:01:43,060
Dot lenth.

21
00:01:47,030 --> 00:01:55,100
As you can see, we don't have the length property for objects, we also cannot get any value.

22
00:01:57,360 --> 00:02:02,100
By trying to use an index like this, this is going to return undefined.

23
00:02:02,130 --> 00:02:05,460
So how can we access each of the properties?

24
00:02:06,060 --> 00:02:09,020
We just use their names inside braces.

25
00:02:09,360 --> 00:02:13,100
So if we want to get the name, we just use name here.

26
00:02:13,380 --> 00:02:15,870
Now we can get the employee's name.

27
00:02:17,180 --> 00:02:25,220
So by this example, you see that this actually makes sense, because if we had an array for the employee

28
00:02:25,220 --> 00:02:32,270
and we just put the name followed by the year of birth, followed by the ID, followed by the role,

29
00:02:32,720 --> 00:02:37,530
it would be really hard to know what those values are referring to.

30
00:02:37,550 --> 00:02:39,100
So we have an object.

31
00:02:39,110 --> 00:02:44,360
We have names for the data, which is good for identification.

32
00:02:44,870 --> 00:02:52,550
Besides accessing properties like this, we can also use the DOT notation, which is very common in

33
00:02:52,550 --> 00:02:53,390
JavaScript.

34
00:02:53,570 --> 00:03:01,430
So instead of putting braces, we just use a dot and then we type the name of the property without quotation

35
00:03:01,430 --> 00:03:01,940
marks.

36
00:03:02,120 --> 00:03:04,360
So if we do this, we can get the name.

37
00:03:04,460 --> 00:03:06,260
We can also get the ID.

38
00:03:06,680 --> 00:03:13,160
Just one thing to pay attention is that you can only use the DOT notation if the property follows the

39
00:03:13,160 --> 00:03:15,350
variable naming rules.

40
00:03:15,590 --> 00:03:21,350
So if you have a property that has a space or starts with a number or something like this, you won't

41
00:03:21,350 --> 00:03:23,350
be able to use the DOT notation.

42
00:03:24,230 --> 00:03:27,110
You will only be able to use this notation.

43
00:03:27,680 --> 00:03:31,560
So I just put an example here with some odd properties.

44
00:03:32,240 --> 00:03:39,050
This one follows the variable naming rules so I can access it with the dot notation.

45
00:03:39,230 --> 00:03:40,820
The other ones I can't.

46
00:03:41,060 --> 00:03:42,740
So this starts with a number.

47
00:03:42,980 --> 00:03:47,580
This is a number, actually, and this one has a dash.

48
00:03:47,600 --> 00:03:51,740
So these ones I can only access them like this.

49
00:03:53,540 --> 00:04:00,140
So with objects, we can alter values assigned to properties and we can also add new properties.

50
00:04:00,380 --> 00:04:05,190
So let's get this employee and let's add a roll for it.

51
00:04:05,930 --> 00:04:09,660
Let me just take this to Visual Studio code so we have it there.

52
00:04:10,100 --> 00:04:11,930
I'm going to comment this.

53
00:04:12,600 --> 00:04:14,480
So shift out a.

54
00:04:21,670 --> 00:04:26,140
So this is lesson 13 and we are talking about object.

55
00:04:28,820 --> 00:04:32,990
OK, so I've just created this employee object.

56
00:04:34,370 --> 00:04:36,780
And now I'm going to change the role.

57
00:04:37,550 --> 00:04:39,290
So now this employee.

58
00:04:44,650 --> 00:04:45,550
Will become.

59
00:04:47,840 --> 00:04:49,700
The I.T. manager.

60
00:04:52,380 --> 00:04:56,370
As you can see, I'm using a property that already exists.

61
00:04:57,440 --> 00:05:00,710
So it is just going to replace the value.

62
00:05:03,560 --> 00:05:07,340
If I create a property that does not exist, like.

63
00:05:08,520 --> 00:05:13,890
Passport, then it is just going to add it to the object.

64
00:05:17,300 --> 00:05:20,480
Let's just invent a passport, no, save this.

65
00:05:21,350 --> 00:05:27,830
If we refresh the page, let's check how the employee object is.

66
00:05:28,130 --> 00:05:36,050
We can see that now our employee is an I.T. manager and we have the passport number here.

67
00:05:36,350 --> 00:05:41,900
As you can see, the passport was the last property to be added.

68
00:05:42,290 --> 00:05:44,240
But still, it's not at the end.

69
00:05:44,240 --> 00:05:45,430
It's not the beginning.

70
00:05:45,560 --> 00:05:47,570
It's in the middle of the object.

71
00:05:47,810 --> 00:05:51,770
So object properties, they don't have an order.

72
00:05:52,100 --> 00:05:59,390
From now on, we're going to start working with multidimensional arrays and objects mixed together.

73
00:05:59,870 --> 00:06:02,040
So I just put an example here.

74
00:06:02,420 --> 00:06:04,630
So this is the coarsest array.

75
00:06:04,940 --> 00:06:08,420
We can see that this is an array because of the Brace's.

76
00:06:08,420 --> 00:06:14,940
So now we have to pay attention to these symbols so we can understand the structure of things.

77
00:06:15,470 --> 00:06:16,730
So this is an array.

78
00:06:16,910 --> 00:06:20,480
And how many elements do we have in the course array?

79
00:06:20,660 --> 00:06:25,140
If we do courses that length, what are we going to get?

80
00:06:25,580 --> 00:06:28,160
We can see that it has three elements.

81
00:06:29,570 --> 00:06:36,990
So if we do cause that length, we will get three and each element of this array is an object.

82
00:06:37,730 --> 00:06:40,640
So in this object we have the properties.

83
00:06:40,770 --> 00:06:47,390
So the title of the course, the number of reviews, number of students, then we have this property

84
00:06:47,390 --> 00:06:51,170
called catagories where you can have more than one.

85
00:06:51,290 --> 00:06:52,780
So this is an array.

86
00:06:53,180 --> 00:06:57,440
So this is the starting point of the work we are going to do with data.

87
00:06:58,340 --> 00:07:05,430
This actually looks more like a piece of data that we would have to work on our website.

88
00:07:05,930 --> 00:07:12,830
So like I said before, it's good to learn all the fundamentals first, because now when we see something

89
00:07:12,830 --> 00:07:20,510
like this, we won't have any trouble understanding what this is and how can we work with each of these

90
00:07:20,510 --> 00:07:21,170
elements.

91
00:07:22,260 --> 00:07:26,250
So now just a small challenge, let me copy this.

92
00:07:28,920 --> 00:07:31,530
I'm going to base it on Visual Studio Code.

93
00:07:36,100 --> 00:07:39,190
So we have this crisis array.

94
00:07:41,320 --> 00:07:43,180
Let me refresh the page.

95
00:07:46,360 --> 00:07:56,050
Now, if I want to access this category, web development from the page, because how can we do this?

96
00:07:56,080 --> 00:08:03,780
Well, first we start with the courses and now the prep course is the second element.

97
00:08:03,970 --> 00:08:06,230
So the index number is one.

98
00:08:06,700 --> 00:08:14,770
So by doing this, we can access the course, which is an object inside the page because we want to

99
00:08:14,770 --> 00:08:23,170
get the categories so that categories or we can use Brace's and quotation marks.

100
00:08:23,980 --> 00:08:32,170
Now we just access this array and now to get web development, which is the first element, we can just

101
00:08:32,410 --> 00:08:33,730
do this.

102
00:08:34,210 --> 00:08:40,920
So now we just reached this category in a multidimensional array.

103
00:08:41,470 --> 00:08:48,880
So down here I've just included a few things worth remembering so we can work with multidimensional

104
00:08:48,880 --> 00:08:51,500
arrays and objects without a problem.

105
00:08:51,700 --> 00:08:56,350
So arrays are identified by braces, arrays are ordered.

106
00:08:56,350 --> 00:08:59,170
Lists of values separated by comma.

107
00:08:59,440 --> 00:09:03,610
Objects are identified by curly braces, objects.

108
00:09:03,610 --> 00:09:09,190
Elements are key value pairs separated by Callon and objects.

109
00:09:09,190 --> 00:09:12,170
Elements are separated by comma.

110
00:09:12,880 --> 00:09:21,970
So inside an object, we have a key value pair separated by Callon and these each of the elements are

111
00:09:21,970 --> 00:09:24,220
going to be separated by comma.

112
00:09:24,400 --> 00:09:28,840
So now we can understand what's going on with this array.

113
00:09:29,770 --> 00:09:37,110
So by looking at this, we can conclude that the courses variable is an array containing three elements

114
00:09:37,120 --> 00:09:45,330
we can see by the Brace's, the elements of the courses array are objects we can see by the curly braces.

115
00:09:45,700 --> 00:09:53,170
Each of these objects have four elements, which are key value pairs.

116
00:09:53,350 --> 00:09:57,490
The objects have values of different data types.

117
00:09:57,670 --> 00:10:02,860
So we have the title property that has a string associated to it.

118
00:10:03,100 --> 00:10:11,060
We have the reviews and students which are numbers and we have the categories, which is an array.

119
00:10:11,650 --> 00:10:15,520
So that was all I wanted to talk about objects for the moment.

120
00:10:15,670 --> 00:10:21,280
In the next video, I'm going to go back to this subject to talk about objects methods.

121
00:10:21,310 --> 00:10:22,150
I'll see you then.