1 00:00:01,170 --> 00:00:02,770 So after arrays, 2 00:00:02,770 --> 00:00:04,470 it's now time to learn about 3 00:00:04,470 --> 00:00:08,963 another data structure in JavaScript, which is objects. 4 00:00:10,490 --> 00:00:12,210 So up until this point, 5 00:00:12,210 --> 00:00:15,580 we have been using arrays as a data structure 6 00:00:15,580 --> 00:00:18,710 to basically store multiple related values 7 00:00:18,710 --> 00:00:20,490 in the same variable. 8 00:00:20,490 --> 00:00:22,663 So let's just quickly recap that. 9 00:00:24,290 --> 00:00:26,210 So Jonah's array, 10 00:00:26,210 --> 00:00:29,180 and you don't need to write this code, okay? 11 00:00:29,180 --> 00:00:32,290 I'm really just trying to recap here. 12 00:00:32,290 --> 00:00:33,633 So we have the first name, 13 00:00:34,630 --> 00:00:37,800 and you see that I'm writing this in multiple lines now. 14 00:00:37,800 --> 00:00:40,040 And that is perfectly acceptable. 15 00:00:40,040 --> 00:00:43,130 So, sometimes that's easier to give us 16 00:00:43,130 --> 00:00:46,410 an overview of a data structure. 17 00:00:46,410 --> 00:00:48,600 As long as we remember the commas here 18 00:00:48,600 --> 00:00:51,943 after each of the elements, we're gonna be fine. 19 00:00:53,180 --> 00:00:56,973 So then we have kind of this age calculation here. 20 00:00:58,170 --> 00:00:59,860 Then we add the job, 21 00:00:59,860 --> 00:01:02,480 and even an array of friends. 22 00:01:02,480 --> 00:01:05,533 So we have an array inside an array. 23 00:01:08,360 --> 00:01:13,173 So Michael, Peter, and Steven. 24 00:01:14,130 --> 00:01:17,650 So again, this is basically a data structure 25 00:01:17,650 --> 00:01:19,930 which combines multiple values 26 00:01:19,930 --> 00:01:24,320 which all belong to this Jonas entity. 27 00:01:24,320 --> 00:01:26,320 Now we know intuitively 28 00:01:26,320 --> 00:01:28,780 that this first element here of the array 29 00:01:28,780 --> 00:01:31,000 should be called the first name. 30 00:01:31,000 --> 00:01:33,190 And this one is the last name. 31 00:01:33,190 --> 00:01:35,300 This one could be called age, 32 00:01:35,300 --> 00:01:37,080 this one could be called job, 33 00:01:37,080 --> 00:01:40,100 and this one could be called the friends. 34 00:01:40,100 --> 00:01:40,950 But in arrays, 35 00:01:40,950 --> 00:01:44,470 there is no way of giving these elements a name. 36 00:01:44,470 --> 00:01:47,270 And so we can't reference them by name, 37 00:01:47,270 --> 00:01:49,530 but only by their order number 38 00:01:49,530 --> 00:01:51,950 in which they appear in the array. 39 00:01:51,950 --> 00:01:54,070 And so to solve that problem, 40 00:01:54,070 --> 00:01:57,040 we have another data structure in JavaScript, 41 00:01:57,040 --> 00:01:59,120 which is objects. 42 00:01:59,120 --> 00:02:02,600 So in objects, we actually define key value pairs. 43 00:02:02,600 --> 00:02:06,153 And so then we can give each of these values here, a name. 44 00:02:07,030 --> 00:02:09,020 So let's see how. 45 00:02:09,020 --> 00:02:11,263 So again, we're defining a variable. 46 00:02:12,350 --> 00:02:14,920 And so I'm calling this one Jonas now, 47 00:02:14,920 --> 00:02:17,460 and then this is the actual object. 48 00:02:17,460 --> 00:02:19,480 So now instead of the square brackets 49 00:02:19,480 --> 00:02:21,000 that we use for arrays, 50 00:02:21,000 --> 00:02:25,210 we use the curly brackets or curly braces. 51 00:02:25,210 --> 00:02:28,160 So this is the second time we're seeing the curly braces. 52 00:02:28,160 --> 00:02:31,700 First, we saw them to define a code block, 53 00:02:31,700 --> 00:02:34,510 for example, in an if else statement, 54 00:02:34,510 --> 00:02:36,550 or if a switch statement, 55 00:02:36,550 --> 00:02:39,000 or even to define a function body. 56 00:02:39,000 --> 00:02:40,940 But this is different, okay? 57 00:02:40,940 --> 00:02:45,490 So these curly braces here are to define a new object. 58 00:02:45,490 --> 00:02:49,640 And so let's now fill up this object with key value pairs. 59 00:02:49,640 --> 00:02:53,020 So the key is basically the variable name. 60 00:02:53,020 --> 00:02:55,750 So let's say, first name, 61 00:02:55,750 --> 00:02:57,610 then a colon, 62 00:02:57,610 --> 00:02:59,030 and then the value. 63 00:02:59,030 --> 00:03:02,740 And the value can be of any type that we want here. 64 00:03:02,740 --> 00:03:04,880 Then to define another key value pair, 65 00:03:04,880 --> 00:03:07,170 we just separate them with commas, 66 00:03:07,170 --> 00:03:08,593 just like in the array. 67 00:03:09,810 --> 00:03:11,750 So last name, 68 00:03:11,750 --> 00:03:13,303 and then colon, remember, 69 00:03:15,140 --> 00:03:19,150 Schmedtmann, then the age, 70 00:03:19,150 --> 00:03:22,173 and once more, we can put any expression here. 71 00:03:23,390 --> 00:03:25,210 So this will be calculated, 72 00:03:25,210 --> 00:03:27,573 and then will be assigned to age. 73 00:03:29,090 --> 00:03:30,533 Then the job, 74 00:03:32,080 --> 00:03:33,670 which is teacher. 75 00:03:33,670 --> 00:03:35,280 And finally, 76 00:03:35,280 --> 00:03:36,840 the friends, 77 00:03:36,840 --> 00:03:39,953 and let's just copy this array from here, okay? 78 00:03:42,650 --> 00:03:45,600 And so with this we have now an object 79 00:03:45,600 --> 00:03:48,460 which contains five key value pairs. 80 00:03:48,460 --> 00:03:49,340 So again, 81 00:03:49,340 --> 00:03:51,540 these are the five keys, 82 00:03:51,540 --> 00:03:53,970 and then each key has a value. 83 00:03:53,970 --> 00:03:55,840 And so essentially with this, 84 00:03:55,840 --> 00:03:58,900 we were able to assign a name 85 00:03:58,900 --> 00:04:01,700 to each of these values that we had. 86 00:04:01,700 --> 00:04:04,500 So that's something that was impossible in arrays, 87 00:04:04,500 --> 00:04:06,890 but now it is possible. 88 00:04:06,890 --> 00:04:10,680 Now each of these keys is also called a property. 89 00:04:10,680 --> 00:04:13,630 So we say that this object here, 90 00:04:13,630 --> 00:04:18,070 so this object, which is called Jonas has five properties. 91 00:04:18,070 --> 00:04:21,500 So property first name with the value of Jonas, 92 00:04:21,500 --> 00:04:25,740 property last name with the value of Schmedtmann, 93 00:04:25,740 --> 00:04:27,980 and so on and so forth. 94 00:04:27,980 --> 00:04:31,780 Now, objects are probably the most fundamental concept 95 00:04:31,780 --> 00:04:34,000 in the whole of JavaScript language. 96 00:04:34,000 --> 00:04:37,510 So there are many ways of creating objects. 97 00:04:37,510 --> 00:04:40,640 And simply writing an object in the code like this 98 00:04:40,640 --> 00:04:43,950 is probably the simplest way of creating an object. 99 00:04:43,950 --> 00:04:46,640 So here with the curly braces. 100 00:04:46,640 --> 00:04:49,780 So there are multiple ways of creating objects. 101 00:04:49,780 --> 00:04:52,440 But again, using the curly braces like this 102 00:04:52,440 --> 00:04:53,950 is the easiest one, 103 00:04:53,950 --> 00:04:57,040 and it's called the object literal Syntax 104 00:04:57,040 --> 00:04:59,440 because we are literally writing down 105 00:04:59,440 --> 00:05:02,040 the entire object content. 106 00:05:02,040 --> 00:05:05,130 So to recap, just like arrays, 107 00:05:05,130 --> 00:05:08,270 we use objects to essentially group together 108 00:05:08,270 --> 00:05:11,550 different variables that really belong together 109 00:05:11,550 --> 00:05:14,150 such as the properties of Jonas 110 00:05:14,150 --> 00:05:16,170 that we've been working with. 111 00:05:16,170 --> 00:05:19,150 Now, the big difference between objects and arrays, 112 00:05:19,150 --> 00:05:22,300 is that in objects, the order of these values 113 00:05:22,300 --> 00:05:25,810 does not matter at all when we want to retrieve them. 114 00:05:25,810 --> 00:05:28,070 And that's important to keep in mind. 115 00:05:28,070 --> 00:05:29,020 So in arrays, 116 00:05:29,020 --> 00:05:32,790 the order in which we specify the elements matters a lot 117 00:05:32,790 --> 00:05:36,860 because that's how we access these elements, right? 118 00:05:36,860 --> 00:05:39,020 So we can only access array elements 119 00:05:39,020 --> 00:05:41,070 using their order number. 120 00:05:41,070 --> 00:05:45,070 This means that we should use arrays for more order data, 121 00:05:45,070 --> 00:05:48,210 and objects for more unstructured data. 122 00:05:48,210 --> 00:05:50,890 And data that we actually want to name, 123 00:05:50,890 --> 00:05:52,950 and then retrieve from the object, 124 00:05:52,950 --> 00:05:55,240 based on that name. 125 00:05:55,240 --> 00:05:57,160 But how do we actually do that? 126 00:05:57,160 --> 00:06:00,600 So how do we get data from an object? 127 00:06:00,600 --> 00:06:03,900 And that's exactly what the next lecture is about. 128 00:06:03,900 --> 00:06:05,993 So, see you there in a second.