WEBVTT 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.