WEBVTT 0 00:00.270 --> 00:06.180 So up till now you would have heard me talk about objects and using the object's properties or methods. 1 00:06.180 --> 00:13.320 But let's really truly dig in and understand exactly what Javascript objects are and how we can use 2 00:13.320 --> 00:15.570 them to dominate the web. 3 00:15.570 --> 00:21.070 Now let's say that you've just inherited a hotel and you're in charge of running it. Now 4 00:21.090 --> 00:25.820 when you arrive the first thing you notice is that there's a whole load of bags that are in the lobby 5 00:26.010 --> 00:29.490 and you've got guests who are checking in and leaving their luggage. 6 00:29.490 --> 00:30.810 So what do you need? 7 00:30.810 --> 00:31.800 You need a bellboy, 8 00:31.830 --> 00:32.480 right? 9 00:32.490 --> 00:35.560 So let's go ahead and employ our first bellboy. 10 00:35.580 --> 00:37.170 His name is Timmy. 11 00:37.170 --> 00:41.470 Now in addition to his name there's a number of other things that you need to know from your bellboy. 12 00:41.490 --> 00:43.640 So let's quiz him. All right Timmy, 13 00:43.650 --> 00:44.660 you can drop the suitcase 14 00:44.670 --> 00:46.470 now. What is your name? 15 00:46.470 --> 00:48.190 My name is Timmy. 16 00:48.840 --> 00:54.460 So we could create a variable to capture this data and we can call it bellBoy1Name. 17 00:54.450 --> 00:57.840 Now, as we keep quizzing him, say what is your age, 18 00:57.930 --> 00:59.790 do you have a work permit, 19 01:00.000 --> 01:01.620 what languages do you speak, 20 01:01.620 --> 01:06.060 we can start capturing and saving all of this data by creating a whole bunch of variables. 21 01:06.090 --> 01:11.640 So that means if we were to instruct our bellboy to greet a guest, then we could write our line of code 22 01:11.640 --> 01:12.830 like this: alert 23 01:12.870 --> 01:16.410 ("Hello, my name is " + bellBoy1Name). 24 01:16.470 --> 01:19.640 So this would create a pop up saying "Hello, my name is Timmy". 25 01:19.740 --> 01:23.190 So up till now we should be very familiar with this kind of syntax. 26 01:23.250 --> 01:29.580 But let's say that we're really good at running hotels and it gets completely booked out and we're effectively 27 01:29.580 --> 01:31.720 swamped with guests and luggage. 28 01:31.860 --> 01:33.760 Now Timmy can't manage by himself. 29 01:33.870 --> 01:38.040 So let's employ some other bellboys, bellboy two and bellboy three. 30 01:38.070 --> 01:45.570 Now if we were to go through this process of creating var bellBoy2Name = "Jimmy" etc. etc., it 31 01:45.570 --> 01:47.060 will take for ever. 32 01:47.160 --> 01:48.800 So what can we do instead? 33 01:48.930 --> 01:54.480 Well in real life this information might be better represented by a table or an Excel spreadsheet like 34 01:54.480 --> 02:00.360 this because we need to know the same properties for each of the bellboys. We can simply just create 35 02:00.420 --> 02:07.140 a number of rows that represent each of the properties and as we recruit new bellboys we just fill in 36 02:07.140 --> 02:10.560 the values of each and every property. 37 02:10.590 --> 02:15.750 Now in Javascript we can create something really similar to this by simply creating an object. 38 02:15.780 --> 02:22.650 So we would create a variable that's called bellBoy1, and it would have a number of properties that 39 02:22.650 --> 02:28.420 will assign values and all of these properties are enclosed inside a set of curly braces. 40 02:28.420 --> 02:31.830 Now inside here we could simply say name is Timmy, 41 02:31.900 --> 02:35.090 age is 19, has work permit is true, 42 02:35.190 --> 02:36.440 languages are 43 02:36.480 --> 02:41.620 this array of languages. Now that alert might look like this. 44 02:41.850 --> 02:43.600 So, "Hello, my name is " 45 02:43.640 --> 02:50.990 + bellBoy1, which is the name of the object, .name. And we are using the dot to access the property 46 02:51.000 --> 02:56.730 that's called name. And this would create an alert that says "Hello, my name is Timmy", but our data is now 47 02:56.730 --> 03:02.640 far more structured and it's much less likely that we'll make an error when we're assigning names and ages 48 03:02.760 --> 03:09.220 to our new bellboys. And by doing this, we effectively just created a Javascript object. 49 03:09.230 --> 03:15.630 Now if we were to create a housekeeper object, then the properties that we define probably will be quite 50 03:15.630 --> 03:16.420 different. 51 03:16.440 --> 03:18.160 We might be interested in things like 52 03:18.170 --> 03:20.980 how long have you worked as a housekeeper, 53 03:21.000 --> 03:23.700 which other hotels have you worked at, or 54 03:23.700 --> 03:27.870 which kind of cleaning tasks are you happy to do. So for different objects, 55 03:27.870 --> 03:32.180 we will create different properties depending on what is relevant to that object. 56 03:32.280 --> 03:38.340 So I want you to have a go at creating objects. So head over to the Sources tab inside the Chrome Developer 57 03:38.340 --> 03:38.890 Tools, and 58 03:39.060 --> 03:46.010 I want you to create a new object that is houseKeeper1, and she needs to have a number properties, 59 03:46.320 --> 03:51.480 so depending on what you think might be relevant properties for a housekeeper, then go ahead and just add 60 03:51.510 --> 03:53.230 those to that object. 61 03:53.440 --> 03:56.810 So pause the video now and see if you can complete this challenge. 62 03:58.040 --> 04:04.160 All right. So we're creating a new object, and we do that the same way that we create new variables. 63 04:04.180 --> 04:08.260 We start off with a keyword var and then we give our object a name. 64 04:08.260 --> 04:16.090 So in our case we're just calling ours houseKeeper1. And then we're going to set it to equal, 65 04:16.090 --> 04:22.090 but instead of just giving it a value as we've done before, we're going to give it a number of properties, 66 04:22.390 --> 04:26.900 and all of those properties are enclosed inside a set of curly braces. 67 04:26.920 --> 04:34.810 Now the first property the housekeeper might have is say years of experience and she's got 12 years 68 04:34.810 --> 04:35.890 of experience. 69 04:36.070 --> 04:42.220 So the left hand side is the name of the property and you can name it whatever it is that you want and 70 04:42.220 --> 04:46.460 a good idea is to follow the rules of convention of naming Javascript variables, 71 04:46.540 --> 04:52.870 so all of those things about camel casing, as well as not using numbers to begin with, apply here as well. 72 04:53.020 --> 04:56.480 Effectively when we're creating properties inside objects, 73 04:56.680 --> 05:03.010 we're just creating a variable that's associated with another variable, and of course you can assign 74 05:03.010 --> 05:04.510 it any value you wish, 75 05:04.510 --> 05:08.800 a number, a string, an array, whatever it is that you want. 76 05:08.830 --> 05:13.190 So let's say our housekeeper has years of experience and has a name. 77 05:13.240 --> 05:14.850 Let's call her Jane. 78 05:14.890 --> 05:22.720 Then she can have an array called cleaning repertoire and this could be an array that has things like 79 05:22.890 --> 05:24.640 she's happy cleaning the bathroom, 80 05:24.640 --> 05:30.820 she's happy cleaning the lobby and she's happy cleaning the bedrooms. 81 05:31.090 --> 05:31.690 All right. Cool. 82 05:31.690 --> 05:38.590 So now we have this new object called houseKeeper1, and we've got a number of properties that we've filled 83 05:38.590 --> 05:39.380 in. 84 05:39.400 --> 05:47.980 So if we go ahead and hit command enter or control enter, or simply press on this button, 85 05:48.370 --> 05:55.600 then we've created this object and we can tap into it by simply saying houseKeeper1, and we get access 86 05:55.600 --> 06:02.350 to all of these properties. And we can tap into the properties by simply using the dot notation. 87 06:02.350 --> 06:11.140 So, for example, we can say console.log(houseKeeper1.name), and this will give us Jane because 88 06:11.140 --> 06:17.260 that's the piece of information that we've associated with the property name inside our object 89 06:17.260 --> 06:18.460 houseKeeper1. 90 06:18.490 --> 06:25.060 Now let's say that our hotel has just been featured in the top hotels in the world and we're literally 91 06:25.060 --> 06:31.030 full every single day and we actually need far more bellboys than just the three that we've already 92 06:31.030 --> 06:36.400 got. And going through this process of every single time when we have to create a new object, 93 06:36.490 --> 06:43.270 we have to write the name property, name value, age property, age value, 94 06:43.390 --> 06:50.350 and actually, if you notice, for all of our bellboys, we have the same properties, and we don't actually have to 95 06:50.350 --> 06:55.600 type out all of these properties again and again and again every single time we want to construct a 96 06:55.600 --> 06:57.350 new bellboy object. 97 06:57.370 --> 06:59.530 So what's the solution to this? 98 06:59.620 --> 07:06.280 Well, we can actually create a factory that basically just pumps out bellboys all day long. That factory, 99 07:06.610 --> 07:09.390 in Javascript code, would look something like this. 100 07:09.580 --> 07:14.160 So we would create a function that has a name of BellBoy. 101 07:14.320 --> 07:17.400 And this is called a constructor function. 102 07:17.710 --> 07:23.830 And what's special about constructor functions is that the names have to be capitalized and it's no 103 07:23.830 --> 07:26.800 longer the same camel casing that we've seen so far. 104 07:26.860 --> 07:32.350 The first letter of the first word also has to be capitalized and this is how we can tell that this 105 07:32.350 --> 07:35.800 is a constructor function and not just any odd function. 106 07:35.800 --> 07:41.680 Now the constructor function takes a number of inputs, and these are the inputs that we're going to provide 107 07:41.740 --> 07:47.470 when we create new objects from this constructor function or from this factory. 108 07:47.560 --> 07:53.530 And inside the constructor function we match the inputs to property names. 109 07:53.530 --> 08:00.340 So, for example, we will say this object, .name, is equal to the name that was given 110 08:00.430 --> 08:01.240 as an input 111 08:01.270 --> 08:03.880 when we constructed this object. 112 08:03.880 --> 08:08.140 Now this looks a little bit confusing but let me show you what it looks like when we initialize a new 113 08:08.140 --> 08:12.220 object or effectively when we create an object from that factory. 114 08:12.220 --> 08:18.370 So we would write something like var bellBoy1 = new BellBoy, 115 08:18.480 --> 08:21.100 notice the capital B, parentheses, 116 08:21.220 --> 08:26.860 and inside the parentheses we would provide the inputs to all of those properties. 117 08:26.860 --> 08:29.440 So the first one was the name, the second was the age, 118 08:29.530 --> 08:34.380 the third one was whether if they had a permit, and the fourth one was which languages they spoke. 119 08:34.600 --> 08:41.380 So this is much much shorter than our previous version where we had to specify the name of the property 120 08:41.470 --> 08:47.620 every single time we created a new object. And we can use this factory or constructor function to create 121 08:47.620 --> 08:52.160 new bellboy objects all day long. And, effectively, 122 08:52.390 --> 08:58.810 the only difference between this syntax and calling a normal function is the keyword new, 123 08:59.000 --> 09:02.470 and the fact that the name of the function is capitalized from the beginning. 124 09:02.510 --> 09:05.090 So now it's your turn. As a challenge, 125 09:05.090 --> 09:11.600 I want you to take what we did before where we created a new houseKeeper1 object, and I want you to 126 09:11.600 --> 09:14.370 create a constructor function for it. 127 09:14.390 --> 09:20.810 So instead of creating it like this, I want you to use what you just learned and create the constructor 128 09:20.810 --> 09:25.820 function for any housekeeper objects, and then to create the object 129 09:25.820 --> 09:29.020 houseKeeper1 using that constructor function. 130 09:29.030 --> 09:31.050 So pause the video now and give that a go. 131 09:34.210 --> 09:39.030 So the first thing I'm going to do is I'm going to empty cache and hard reload so that our houseKeeper1 132 09:39.070 --> 09:41.300 object no longer exists. 133 09:41.560 --> 09:46.600 Now I'm going to reformat this code so instead of having to write this out every single time we create 134 09:46.630 --> 09:49.700 a new housekeeper object, we have to say houseKeeper2, 135 09:49.720 --> 09:58.060 years of experience is 3 etc. etc., we're going to now have a factory that just creates housekeeper 136 09:58.090 --> 09:58.890 objects. 137 09:59.110 --> 10:04.080 So to begin with we need to create a function and the function name has to be capitalized. 138 10:04.120 --> 10:07.090 So we're creating housekeeper objects. 139 10:07.120 --> 10:12.970 Now this function is going to take a number of inputs and those inputs correspond to all of the properties 140 10:12.970 --> 10:13.560 we need. 141 10:13.720 --> 10:16.010 So the first one is yearsOfExperience, 142 10:16.180 --> 10:23.710 second one is name, and the third one is cleaningRepertoire. And now inside the function we're going 143 10:23.710 --> 10:25.340 to give it some properties. 144 10:25.390 --> 10:31.660 So we're going to say this object is going have a yearsOfExperience property, and it's going to be equal 145 10:31.660 --> 10:34.850 to the input that comes in through here. 146 10:35.050 --> 10:39.660 And then I'm just going to go through this and create this code for all the other properties. 147 10:39.880 --> 10:44.920 All right so now that we've created our constructor function I'm going to delete where we created the 148 10:44.920 --> 10:48.550 first housekeeper object and I'm going to run this code. 149 10:48.550 --> 10:54.160 So now inside our console we're going to create a new housekeeper object and instead of going through 150 10:54.160 --> 11:00.940 this long winded approach of specifying the name of the property, the value of the property, every single time 151 11:00.970 --> 11:02.890 we create a new object, 152 11:03.040 --> 11:11.320 we're simply going to say var houseKeeper1 = new. That new keyword is really important, because 153 11:11.320 --> 11:13.860 we're going to be using a constructor function 154 11:13.870 --> 11:21.700 afterwards. new HouseKeeper. Notice the capitalized H. And then inside the parentheses we're going to provide 155 11:21.700 --> 11:24.250 the values of all three properties. 156 11:24.250 --> 11:32.310 So years of experience, let's say 9, and then name, let's say he's called Tom, and cleaning repertoire, 157 11:32.320 --> 11:36.170 let's say he's only good for cleaning the lobby and bedrooms. 158 11:36.250 --> 11:46.520 So now if I hit enter and I console.log our new houseKeeper1's name, then you can see I get Tom. 159 11:46.690 --> 11:48.970 So our object has been created. 160 11:49.120 --> 11:54.580 So now that we created this constructor function every single time we want to create a new object from 161 11:54.580 --> 12:01.420 it it's as simple as just filling in the properties with the new values and we can use that object factory 162 12:01.420 --> 12:04.720 to pump out new objects with those same properties all day long.