1 00:00:02,050 --> 00:00:03,630 Now we are coming closer 2 00:00:03,630 --> 00:00:05,220 to asynchronous code 3 00:00:05,220 --> 00:00:07,340 and therefore, the end of this section 4 00:00:07,340 --> 00:00:08,835 but before we get there, 5 00:00:08,835 --> 00:00:12,470 there is another concept related to objects, 6 00:00:12,470 --> 00:00:14,430 which I'll explore again. 7 00:00:14,430 --> 00:00:17,890 And for that, I'll add a new objects.js file, 8 00:00:17,890 --> 00:00:20,300 and in there, of course, we learned 9 00:00:20,300 --> 00:00:23,910 that we can create objects like, let's say a job 10 00:00:23,910 --> 00:00:27,490 that might have a title: developer, 11 00:00:27,490 --> 00:00:30,948 that might have a location: New York. 12 00:00:30,948 --> 00:00:35,948 And maybe a salary of 50,000 a year like that. 13 00:00:38,320 --> 00:00:40,620 That's how we can create objects. 14 00:00:40,620 --> 00:00:43,810 We can also split the key-value pairs 15 00:00:43,810 --> 00:00:46,720 into multiple lines to improve readability. 16 00:00:46,720 --> 00:00:50,610 And that is something we used over and over already 17 00:00:50,610 --> 00:00:52,560 in this course. 18 00:00:52,560 --> 00:00:54,440 We then can use the job notation 19 00:00:54,440 --> 00:00:56,220 to access those properties, 20 00:00:56,220 --> 00:00:58,570 and we can also add methods, 21 00:00:58,570 --> 00:01:02,770 which are simply functions added as properties, 22 00:01:02,770 --> 00:01:05,790 as values inside of that object. 23 00:01:05,790 --> 00:01:08,053 That's what we already learned. 24 00:01:09,600 --> 00:01:12,540 Now, in this course, you also sometimes saw 25 00:01:12,540 --> 00:01:17,500 that I created objects with a special new keyword. 26 00:01:17,500 --> 00:01:20,350 For example, when we created a date. 27 00:01:20,350 --> 00:01:22,713 That's something we did earlier in the course. 28 00:01:24,020 --> 00:01:28,900 Date is actually a built-in thing in JavaScript, 29 00:01:28,900 --> 00:01:32,530 both in the browser, as well as NodeJS, 30 00:01:32,530 --> 00:01:34,710 and when we call new Date, 31 00:01:34,710 --> 00:01:39,260 we create a new object that describes a date. 32 00:01:39,260 --> 00:01:41,720 By default, if we call it like this, 33 00:01:41,720 --> 00:01:45,420 it gives us the current date and timestamp. 34 00:01:45,420 --> 00:01:48,310 And we can then call methods on that date, 35 00:01:48,310 --> 00:01:50,570 for example, toISOString 36 00:01:50,570 --> 00:01:55,570 to get a standardized string representation of that date. 37 00:01:56,170 --> 00:02:00,440 So if I console.log new Date like that here, 38 00:02:00,440 --> 00:02:04,440 and I then execute objects.js, 39 00:02:04,440 --> 00:02:07,723 I get this output of the current date timestamp. 40 00:02:09,389 --> 00:02:11,720 But what is this new keyword 41 00:02:11,720 --> 00:02:14,070 and what exactly is this Date thing, 42 00:02:14,070 --> 00:02:16,850 which we execute like a function? 43 00:02:16,850 --> 00:02:18,870 Now, Date here, in the end, 44 00:02:18,870 --> 00:02:23,793 is a so-called constructor function or class. 45 00:02:25,330 --> 00:02:29,380 And constructor functions/classes, 46 00:02:29,380 --> 00:02:32,200 we can treat these terms interchangeably here, 47 00:02:32,200 --> 00:02:35,690 are blueprints that allow you 48 00:02:35,690 --> 00:02:38,173 to build objects based on them. 49 00:02:39,370 --> 00:02:41,310 What we did here with the job 50 00:02:41,310 --> 00:02:46,310 is we used the so-called object literal notation, 51 00:02:46,480 --> 00:02:49,200 which means we create an object when we need it 52 00:02:49,200 --> 00:02:53,890 and we manually describe all the key-value pairs we need. 53 00:02:53,890 --> 00:02:56,170 And often that's exactly what we want 54 00:02:56,170 --> 00:02:58,620 if we just want to group together a couple 55 00:02:58,620 --> 00:02:59,873 of pieces of data. 56 00:03:00,960 --> 00:03:03,602 But what if we would be building an application, 57 00:03:03,602 --> 00:03:07,550 a website that needs multiple jobs 58 00:03:07,550 --> 00:03:11,673 that all have the same shape but different values? 59 00:03:12,590 --> 00:03:15,610 If we build a website that allows users 60 00:03:15,610 --> 00:03:18,550 to manage different job profiles, 61 00:03:18,550 --> 00:03:22,830 we might, under the hood, create multiple job objects 62 00:03:22,830 --> 00:03:26,513 but will have differing titles, locations and salaries. 63 00:03:27,750 --> 00:03:31,770 Now, we can create multiple jobs, 64 00:03:31,770 --> 00:03:35,560 simply by repeating that object literal notation 65 00:03:35,560 --> 00:03:37,450 over and over, for example, 66 00:03:37,450 --> 00:03:39,470 by copy and pasting this 67 00:03:39,470 --> 00:03:43,210 and then filling in different values. 68 00:03:43,210 --> 00:03:46,090 That is, of course, something we can do, 69 00:03:46,090 --> 00:03:48,570 and with that, we can then definitely 70 00:03:48,570 --> 00:03:50,533 also build multiple objects. 71 00:03:51,670 --> 00:03:54,400 But if you have scenarios like this 72 00:03:54,400 --> 00:03:58,460 that you potentially need multiple objects 73 00:03:58,460 --> 00:04:00,060 that have the same shape, 74 00:04:00,060 --> 00:04:03,240 a blueprint can come in handy. 75 00:04:03,240 --> 00:04:05,183 And Date is a good example. 76 00:04:05,183 --> 00:04:08,350 It's not unrealistic that you have different kinds 77 00:04:08,350 --> 00:04:10,150 of dates in your application 78 00:04:10,150 --> 00:04:12,455 and therefore, it's actually even built in 79 00:04:12,455 --> 00:04:17,454 in JavaScript, and you have this standardized blueprint, 80 00:04:17,620 --> 00:04:20,519 which does a lot of things under the hood, 81 00:04:20,519 --> 00:04:23,620 for example, it gives you the current date. 82 00:04:23,620 --> 00:04:26,410 And it also gives you utility methods 83 00:04:26,410 --> 00:04:29,193 for converting and outputting that date. 84 00:04:30,150 --> 00:04:32,290 And very often as a developer, 85 00:04:32,290 --> 00:04:36,190 you will work with such built-in blueprints, 86 00:04:36,190 --> 00:04:40,360 such built-in classes or constructor functions 87 00:04:40,360 --> 00:04:42,863 but you can also define your own ones. 88 00:04:44,000 --> 00:04:47,910 And for that, let me comment all of that out, 89 00:04:47,910 --> 00:04:51,520 and let's create our own blueprint for a job. 90 00:04:51,520 --> 00:04:53,680 In modern JavaScript, 91 00:04:53,680 --> 00:04:56,230 which is supported both in NodeJS, 92 00:04:56,230 --> 00:04:58,070 as well as in the browser, 93 00:04:58,070 --> 00:05:00,823 we do this by using the class keyword. 94 00:05:01,730 --> 00:05:04,643 A class is simply a blueprint for an object. 95 00:05:05,750 --> 00:05:08,380 Then we give this class a descriptive name, 96 00:05:08,380 --> 00:05:09,853 for example, Job. 97 00:05:10,870 --> 00:05:13,760 Now the naming convention here is that we typically start 98 00:05:13,760 --> 00:05:16,810 with an uppercase character for those classes, 99 00:05:16,810 --> 00:05:20,363 just as Date starts with an uppercase character. 100 00:05:22,040 --> 00:05:24,260 Now, we then have curly braces 101 00:05:24,260 --> 00:05:26,550 and inside of that block of code 102 00:05:26,550 --> 00:05:28,190 that belongs to this class, 103 00:05:28,190 --> 00:05:30,793 we can now define this class. 104 00:05:32,060 --> 00:05:35,460 And we do this by adding a special method here 105 00:05:35,460 --> 00:05:38,553 by writing constructor like that. 106 00:05:39,650 --> 00:05:42,510 This adds a method to this class 107 00:05:42,510 --> 00:05:44,840 and we can also add our own methods. 108 00:05:44,840 --> 00:05:46,570 We'll do this in a second. 109 00:05:46,570 --> 00:05:48,450 But this is a special method 110 00:05:48,450 --> 00:05:50,390 with a reserved name 111 00:05:50,390 --> 00:05:52,560 that basically tells JavaScript 112 00:05:52,560 --> 00:05:57,160 how to construct a concrete instance of this class, 113 00:05:57,160 --> 00:06:01,000 how to construct a object based on this blueprint 114 00:06:01,000 --> 00:06:03,600 when you later use this Job class 115 00:06:03,600 --> 00:06:05,610 in conjunction with the new keyword 116 00:06:06,740 --> 00:06:10,950 because we now can create jobs like developer 117 00:06:10,950 --> 00:06:14,170 by using new Job like that 118 00:06:14,170 --> 00:06:17,180 so by executing our class like a function 119 00:06:17,180 --> 00:06:18,760 by adding parentheses here 120 00:06:18,760 --> 00:06:20,743 and by adding the new keyword. 121 00:06:21,600 --> 00:06:23,710 This is how you can use your own classes, 122 00:06:23,710 --> 00:06:25,250 your own blueprints 123 00:06:25,250 --> 00:06:29,240 and that will automatically execute this constructor method, 124 00:06:29,240 --> 00:06:31,390 which is added in the class. 125 00:06:31,390 --> 00:06:35,040 And you need to add that to then run any logic 126 00:06:35,040 --> 00:06:38,050 whenever this code here is executed, 127 00:06:38,050 --> 00:06:41,623 whenever you create an object based on that class. 128 00:06:42,610 --> 00:06:45,550 Now, in this constructor, you can do whatever you want. 129 00:06:45,550 --> 00:06:48,161 For example, the built-in Date class 130 00:06:48,161 --> 00:06:51,100 will reach out to the system 131 00:06:51,100 --> 00:06:55,090 and find out what the current date and time is. 132 00:06:55,090 --> 00:06:57,120 You could do something similar here 133 00:06:57,120 --> 00:07:00,970 but here, I instead just wanna add a couple of properties 134 00:07:00,970 --> 00:07:03,253 to the object that should be created. 135 00:07:04,410 --> 00:07:07,340 And you do this by using a special keyword, 136 00:07:07,340 --> 00:07:09,250 another special keyword 137 00:07:09,250 --> 00:07:11,260 that's built into JavaScript, 138 00:07:11,260 --> 00:07:13,383 and that's the this keyword. 139 00:07:14,520 --> 00:07:18,963 This simply refers to the object that will be created. 140 00:07:19,960 --> 00:07:22,240 And hence, you can use the dot notation here 141 00:07:22,240 --> 00:07:24,670 to read or write properties 142 00:07:24,670 --> 00:07:26,520 and since we're in the constructor, 143 00:07:26,520 --> 00:07:28,530 and no properties exist yet, 144 00:07:28,530 --> 00:07:31,180 we can simply assign a couple of properties 145 00:07:31,180 --> 00:07:35,310 that will then be added to the object that is created 146 00:07:35,310 --> 00:07:37,340 because again, this refers 147 00:07:37,340 --> 00:07:39,943 to that to-be-created object here. 148 00:07:40,780 --> 00:07:43,370 And here we could, for example, add a title 149 00:07:43,370 --> 00:07:46,300 and then set this to any value of our choice. 150 00:07:46,300 --> 00:07:48,500 For example, Developer. 151 00:07:48,500 --> 00:07:52,770 But typically, you don't wanna hard code a value here 152 00:07:52,770 --> 00:07:54,760 in the constructor but instead, 153 00:07:54,760 --> 00:07:58,480 it would be nice if we could pass the concrete values 154 00:07:58,480 --> 00:08:02,280 to that constructor when we create our object based 155 00:08:02,280 --> 00:08:05,440 on the class with the new keyword. 156 00:08:05,440 --> 00:08:08,070 And that's why we call it like a function. 157 00:08:08,070 --> 00:08:12,940 Date doesn't necessarily need any values passed here. 158 00:08:12,940 --> 00:08:15,820 For our own Job, that might be different. 159 00:08:15,820 --> 00:08:20,740 We could expect the jobTitle here as a parameter 160 00:08:20,740 --> 00:08:23,930 because constructor, even though it's a special method 161 00:08:23,930 --> 00:08:26,260 still is a method in the end, 162 00:08:26,260 --> 00:08:27,970 so it's a function in the end, 163 00:08:27,970 --> 00:08:30,730 and hence, you can pass in parameters 164 00:08:30,730 --> 00:08:33,909 and we can then use this parameter value here 165 00:08:33,909 --> 00:08:37,003 to assign it as a value to this property. 166 00:08:37,960 --> 00:08:42,960 And similarly, we could accept a place and a salary, 167 00:08:43,320 --> 00:08:45,550 and then also add this.location 168 00:08:45,550 --> 00:08:47,200 and set it equal to place, 169 00:08:47,200 --> 00:08:50,383 and this.salary and set it equal to salary. 170 00:08:51,750 --> 00:08:54,230 And as you see at the example of salary, 171 00:08:54,230 --> 00:08:56,670 you are allowed to use the same name 172 00:08:56,670 --> 00:08:59,930 for the parameter as you do for the property, 173 00:08:59,930 --> 00:09:03,000 but as you see at the example of location and title, 174 00:09:03,000 --> 00:09:05,820 it's not a requirement to use the same names. 175 00:09:05,820 --> 00:09:06,973 It is up to you. 176 00:09:08,020 --> 00:09:09,340 But now with that, 177 00:09:09,340 --> 00:09:12,402 you can pass your concrete values here 178 00:09:12,402 --> 00:09:15,930 as values to new Job. 179 00:09:15,930 --> 00:09:19,579 So Developer and New York 180 00:09:19,579 --> 00:09:22,760 and 50,000, 181 00:09:22,760 --> 00:09:25,360 and just as with every function call, 182 00:09:25,360 --> 00:09:27,640 the order does matter here. 183 00:09:27,640 --> 00:09:30,370 So we have jobTitle, place, salary here. 184 00:09:30,370 --> 00:09:32,170 We need to keep that order 185 00:09:32,170 --> 00:09:34,363 when we pass the concrete values. 186 00:09:35,210 --> 00:09:37,923 And then with that, we'll build such an object. 187 00:09:39,130 --> 00:09:44,043 Now if I console.log developer here in the next line, 188 00:09:45,050 --> 00:09:50,050 you will see that if we execute this code in objects.js, 189 00:09:51,280 --> 00:09:53,653 this object is being output here. 190 00:09:54,490 --> 00:09:57,610 We also get the name of the blueprint that was used 191 00:09:57,610 --> 00:10:02,170 as a extra convenience by NodeJS when we use console.log 192 00:10:02,170 --> 00:10:05,313 but we also can see all the properties of that object. 193 00:10:06,620 --> 00:10:09,010 And what's really important to me here 194 00:10:09,010 --> 00:10:13,960 is that the object we get by using this blueprint approach 195 00:10:13,960 --> 00:10:16,030 is the same kind of object we get here 196 00:10:16,030 --> 00:10:18,163 with that object literal approach. 197 00:10:19,200 --> 00:10:21,300 The advantage now just is 198 00:10:21,300 --> 00:10:23,750 that since we have that blueprint, 199 00:10:23,750 --> 00:10:27,140 we can easily create multiple jobs 200 00:10:27,140 --> 00:10:31,363 by simply repeating this code over and over again, 201 00:10:32,320 --> 00:10:36,060 and we then don't have to manually copy 202 00:10:36,060 --> 00:10:39,670 and paste key-value pairs over and over again, 203 00:10:39,670 --> 00:10:44,210 as we have to when using that object literal notation 204 00:10:44,210 --> 00:10:48,580 because manually copying property names is error prone. 205 00:10:48,580 --> 00:10:51,440 It's easy to add a typo somehow. 206 00:10:51,440 --> 00:10:53,390 If you have a blueprint here 207 00:10:53,390 --> 00:10:56,480 where you locked in the property names once, 208 00:10:56,480 --> 00:10:59,730 and you then just create different instances 209 00:10:59,730 --> 00:11:04,070 of that blueprint, different objects based on that blueprint 210 00:11:04,070 --> 00:11:08,060 by using new and then executing the class like a function, 211 00:11:08,060 --> 00:11:10,790 then you avoid such typos 212 00:11:10,790 --> 00:11:13,423 and you have way less error-prone code. 213 00:11:14,298 --> 00:11:17,460 Of course, using a blueprint really only makes a lot 214 00:11:17,460 --> 00:11:21,710 of sense if you do create multiple versions of that object. 215 00:11:21,710 --> 00:11:24,890 If you just create one object once in your code 216 00:11:24,890 --> 00:11:27,330 to group a couple of values together, 217 00:11:27,330 --> 00:11:28,932 then you probably don't need 218 00:11:28,932 --> 00:11:31,973 to create a blueprint like this. 219 00:11:33,160 --> 00:11:35,440 But it is a concept that can come in handy 220 00:11:35,440 --> 00:11:38,340 if you need multiple objects of the same type, 221 00:11:38,340 --> 00:11:41,990 and it is also something that we'll see later again. 222 00:11:41,990 --> 00:11:44,550 And now you also understand a bit better 223 00:11:44,550 --> 00:11:47,593 what happened when we created a date like this. 224 00:11:48,580 --> 00:11:51,623 But now let's add more logic to our class.