0 1 00:00:00,270 --> 00:00:06,180 So up till now you would have heard me talk about objects and using the object's properties or methods. 1 2 00:00:06,180 --> 00:00:13,320 But let's really truly dig in and understand exactly what Javascript objects are and how we can use 2 3 00:00:13,320 --> 00:00:15,570 them to dominate the web. 3 4 00:00:15,570 --> 00:00:21,070 Now let's say that you've just inherited a hotel and you're in charge of running it. Now 4 5 00:00:21,090 --> 00: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 6 00:00:26,010 --> 00:00:29,490 and you've got guests who are checking in and leaving their luggage. 6 7 00:00:29,490 --> 00:00:30,810 So what do you need? 7 8 00:00:30,810 --> 00:00:31,800 You need a bellboy, 8 9 00:00:31,830 --> 00:00:32,480 right? 9 10 00:00:32,490 --> 00:00:35,560 So let's go ahead and employ our first bellboy. 10 11 00:00:35,580 --> 00:00:37,170 His name is Timmy. 11 12 00:00:37,170 --> 00: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 13 00:00:41,490 --> 00:00:43,640 So let's quiz him. All right Timmy, 13 14 00:00:43,650 --> 00:00:44,660 you can drop the suitcase 14 15 00:00:44,670 --> 00:00:46,470 now. What is your name? 15 16 00:00:46,470 --> 00:00:48,190 My name is Timmy. 16 17 00:00:48,840 --> 00:00:54,460 So we could create a variable to capture this data and we can call it bellBoy1Name. 17 18 00:00:54,450 --> 00:00:57,840 Now, as we keep quizzing him, say what is your age, 18 19 00:00:57,930 --> 00:00:59,790 do you have a work permit, 19 20 00:01:00,000 --> 00:01:01,620 what languages do you speak, 20 21 00:01:01,620 --> 00:01:06,060 we can start capturing and saving all of this data by creating a whole bunch of variables. 21 22 00:01:06,090 --> 00: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 23 00:01:11,640 --> 00:01:12,830 like this: alert 23 24 00:01:12,870 --> 00:01:16,410 ("Hello, my name is " + bellBoy1Name). 24 25 00:01:16,470 --> 00:01:19,640 So this would create a pop up saying "Hello, my name is Timmy". 25 26 00:01:19,740 --> 00:01:23,190 So up till now we should be very familiar with this kind of syntax. 26 27 00:01:23,250 --> 00: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 28 00:01:29,580 --> 00:01:31,720 swamped with guests and luggage. 28 29 00:01:31,860 --> 00:01:33,760 Now Timmy can't manage by himself. 29 30 00:01:33,870 --> 00:01:38,040 So let's employ some other bellboys, bellboy two and bellboy three. 30 31 00:01:38,070 --> 00:01:45,570 Now if we were to go through this process of creating var bellBoy2Name = "Jimmy" etc. etc., it 31 32 00:01:45,570 --> 00:01:47,060 will take for ever. 32 33 00:01:47,160 --> 00:01:48,800 So what can we do instead? 33 34 00:01:48,930 --> 00:01:54,480 Well in real life this information might be better represented by a table or an Excel spreadsheet like 34 35 00:01:54,480 --> 00:02:00,360 this because we need to know the same properties for each of the bellboys. We can simply just create 35 36 00:02:00,420 --> 00:02:07,140 a number of rows that represent each of the properties and as we recruit new bellboys we just fill in 36 37 00:02:07,140 --> 00:02:10,560 the values of each and every property. 37 38 00:02:10,590 --> 00:02:15,750 Now in Javascript we can create something really similar to this by simply creating an object. 38 39 00:02:15,780 --> 00:02:22,650 So we would create a variable that's called bellBoy1, and it would have a number of properties that 39 40 00:02:22,650 --> 00:02:28,420 will assign values and all of these properties are enclosed inside a set of curly braces. 40 41 00:02:28,420 --> 00:02:31,830 Now inside here we could simply say name is Timmy, 41 42 00:02:31,900 --> 00:02:35,090 age is 19, has work permit is true, 42 43 00:02:35,190 --> 00:02:36,440 languages are 43 44 00:02:36,480 --> 00:02:41,620 this array of languages. Now that alert might look like this. 44 45 00:02:41,850 --> 00:02:43,600 So, "Hello, my name is " 45 46 00:02:43,640 --> 00:02:50,990 + bellBoy1, which is the name of the object, .name. And we are using the dot to access the property 46 47 00:02:51,000 --> 00: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 48 00:02:56,730 --> 00: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 49 00:03:02,760 --> 00:03:09,220 to our new bellboys. And by doing this, we effectively just created a Javascript object. 49 50 00:03:09,230 --> 00:03:15,630 Now if we were to create a housekeeper object, then the properties that we define probably will be quite 50 51 00:03:15,630 --> 00:03:16,420 different. 51 52 00:03:16,440 --> 00:03:18,160 We might be interested in things like 52 53 00:03:18,170 --> 00:03:20,980 how long have you worked as a housekeeper, 53 54 00:03:21,000 --> 00:03:23,700 which other hotels have you worked at, or 54 55 00:03:23,700 --> 00:03:27,870 which kind of cleaning tasks are you happy to do. So for different objects, 55 56 00:03:27,870 --> 00:03:32,180 we will create different properties depending on what is relevant to that object. 56 57 00:03:32,280 --> 00: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 58 00:03:38,340 --> 00:03:38,890 Tools, and 58 59 00:03:39,060 --> 00:03:46,010 I want you to create a new object that is houseKeeper1, and she needs to have a number properties, 59 60 00:03:46,320 --> 00:03:51,480 so depending on what you think might be relevant properties for a housekeeper, then go ahead and just add 60 61 00:03:51,510 --> 00:03:53,230 those to that object. 61 62 00:03:53,440 --> 00:03:56,810 So pause the video now and see if you can complete this challenge. 62 63 00:03:58,040 --> 00: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 64 00:04:04,180 --> 00:04:08,260 We start off with a keyword var and then we give our object a name. 64 65 00:04:08,260 --> 00:04:16,090 So in our case we're just calling ours houseKeeper1. And then we're going to set it to equal, 65 66 00:04:16,090 --> 00: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 67 00:04:22,390 --> 00:04:26,900 and all of those properties are enclosed inside a set of curly braces. 67 68 00:04:26,920 --> 00:04:34,810 Now the first property the housekeeper might have is say years of experience and she's got 12 years 68 69 00:04:34,810 --> 00:04:35,890 of experience. 69 70 00:04:36,070 --> 00: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 71 00:04:42,220 --> 00:04:46,460 a good idea is to follow the rules of convention of naming Javascript variables, 71 72 00:04:46,540 --> 00: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 73 00:04:53,020 --> 00:04:56,480 Effectively when we're creating properties inside objects, 73 74 00:04:56,680 --> 00:05:03,010 we're just creating a variable that's associated with another variable, and of course you can assign 74 75 00:05:03,010 --> 00:05:04,510 it any value you wish, 75 76 00:05:04,510 --> 00:05:08,800 a number, a string, an array, whatever it is that you want. 76 77 00:05:08,830 --> 00:05:13,190 So let's say our housekeeper has years of experience and has a name. 77 78 00:05:13,240 --> 00:05:14,850 Let's call her Jane. 78 79 00:05:14,890 --> 00:05:22,720 Then she can have an array called cleaning repertoire and this could be an array that has things like 79 80 00:05:22,890 --> 00:05:24,640 she's happy cleaning the bathroom, 80 81 00:05:24,640 --> 00:05:30,820 she's happy cleaning the lobby and she's happy cleaning the bedrooms. 81 82 00:05:31,090 --> 00:05:31,690 All right. Cool. 82 83 00:05:31,690 --> 00: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 84 00:05:38,590 --> 00:05:39,380 in. 84 85 00:05:39,400 --> 00:05:47,980 So if we go ahead and hit command enter or control enter, or simply press on this button, 85 86 00:05:48,370 --> 00:05:55,600 then we've created this object and we can tap into it by simply saying houseKeeper1, and we get access 86 87 00:05:55,600 --> 00:06:02,350 to all of these properties. And we can tap into the properties by simply using the dot notation. 87 88 00:06:02,350 --> 00:06:11,140 So, for example, we can say console.log(houseKeeper1.name), and this will give us Jane because 88 89 00:06:11,140 --> 00:06:17,260 that's the piece of information that we've associated with the property name inside our object 89 90 00:06:17,260 --> 00:06:18,460 houseKeeper1. 90 91 00:06:18,490 --> 00: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 92 00:06:25,060 --> 00:06:31,030 full every single day and we actually need far more bellboys than just the three that we've already 92 93 00:06:31,030 --> 00:06:36,400 got. And going through this process of every single time when we have to create a new object, 93 94 00:06:36,490 --> 00:06:43,270 we have to write the name property, name value, age property, age value, 94 95 00:06:43,390 --> 00: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 96 00:06:50,350 --> 00:06:55,600 type out all of these properties again and again and again every single time we want to construct a 96 97 00:06:55,600 --> 00:06:57,350 new bellboy object. 97 98 00:06:57,370 --> 00:06:59,530 So what's the solution to this? 98 99 00:06:59,620 --> 00:07:06,280 Well, we can actually create a factory that basically just pumps out bellboys all day long. That factory, 99 100 00:07:06,610 --> 00:07:09,390 in Javascript code, would look something like this. 100 101 00:07:09,580 --> 00:07:14,160 So we would create a function that has a name of BellBoy. 101 102 00:07:14,320 --> 00:07:17,400 And this is called a constructor function. 102 103 00:07:17,710 --> 00:07:23,830 And what's special about constructor functions is that the names have to be capitalized and it's no 103 104 00:07:23,830 --> 00:07:26,800 longer the same camel casing that we've seen so far. 104 105 00:07:26,860 --> 00: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 106 00:07:32,350 --> 00:07:35,800 is a constructor function and not just any odd function. 106 107 00:07:35,800 --> 00:07:41,680 Now the constructor function takes a number of inputs, and these are the inputs that we're going to provide 107 108 00:07:41,740 --> 00:07:47,470 when we create new objects from this constructor function or from this factory. 108 109 00:07:47,560 --> 00:07:53,530 And inside the constructor function we match the inputs to property names. 109 110 00:07:53,530 --> 00:08:00,340 So, for example, we will say this object, .name, is equal to the name that was given 110 111 00:08:00,430 --> 00:08:01,240 as an input 111 112 00:08:01,270 --> 00:08:03,880 when we constructed this object. 112 113 00:08:03,880 --> 00: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 114 00:08:08,140 --> 00:08:12,220 object or effectively when we create an object from that factory. 114 115 00:08:12,220 --> 00:08:18,370 So we would write something like var bellBoy1 = new BellBoy, 115 116 00:08:18,480 --> 00:08:21,100 notice the capital B, parentheses, 116 117 00:08:21,220 --> 00:08:26,860 and inside the parentheses we would provide the inputs to all of those properties. 117 118 00:08:26,860 --> 00:08:29,440 So the first one was the name, the second was the age, 118 119 00:08:29,530 --> 00:08:34,380 the third one was whether if they had a permit, and the fourth one was which languages they spoke. 119 120 00:08:34,600 --> 00:08:41,380 So this is much much shorter than our previous version where we had to specify the name of the property 120 121 00:08:41,470 --> 00:08:47,620 every single time we created a new object. And we can use this factory or constructor function to create 121 122 00:08:47,620 --> 00:08:52,160 new bellboy objects all day long. And, effectively, 122 123 00:08:52,390 --> 00:08:58,810 the only difference between this syntax and calling a normal function is the keyword new, 123 124 00:08:59,000 --> 00:09:02,470 and the fact that the name of the function is capitalized from the beginning. 124 125 00:09:02,510 --> 00:09:05,090 So now it's your turn. As a challenge, 125 126 00:09:05,090 --> 00: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 127 00:09:11,600 --> 00:09:14,370 create a constructor function for it. 127 128 00:09:14,390 --> 00:09:20,810 So instead of creating it like this, I want you to use what you just learned and create the constructor 128 129 00:09:20,810 --> 00:09:25,820 function for any housekeeper objects, and then to create the object 129 130 00:09:25,820 --> 00:09:29,020 houseKeeper1 using that constructor function. 130 131 00:09:29,030 --> 00:09:31,050 So pause the video now and give that a go. 131 132 00:09:34,210 --> 00: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 133 00:09:39,070 --> 00:09:41,300 object no longer exists. 133 134 00:09:41,560 --> 00: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 135 00:09:46,630 --> 00:09:49,700 a new housekeeper object, we have to say houseKeeper2, 135 136 00:09:49,720 --> 00:09:58,060 years of experience is 3 etc. etc., we're going to now have a factory that just creates housekeeper 136 137 00:09:58,090 --> 00:09:58,890 objects. 137 138 00:09:59,110 --> 00:10:04,080 So to begin with we need to create a function and the function name has to be capitalized. 138 139 00:10:04,120 --> 00:10:07,090 So we're creating housekeeper objects. 139 140 00:10:07,120 --> 00:10:12,970 Now this function is going to take a number of inputs and those inputs correspond to all of the properties 140 141 00:10:12,970 --> 00:10:13,560 we need. 141 142 00:10:13,720 --> 00:10:16,010 So the first one is yearsOfExperience, 142 143 00:10:16,180 --> 00:10:23,710 second one is name, and the third one is cleaningRepertoire. And now inside the function we're going 143 144 00:10:23,710 --> 00:10:25,340 to give it some properties. 144 145 00:10:25,390 --> 00: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 146 00:10:31,660 --> 00:10:34,850 to the input that comes in through here. 146 147 00:10:35,050 --> 00:10:39,660 And then I'm just going to go through this and create this code for all the other properties. 147 148 00:10:39,880 --> 00:10:44,920 All right so now that we've created our constructor function I'm going to delete where we created the 148 149 00:10:44,920 --> 00:10:48,550 first housekeeper object and I'm going to run this code. 149 150 00:10:48,550 --> 00:10:54,160 So now inside our console we're going to create a new housekeeper object and instead of going through 150 151 00:10:54,160 --> 00:11:00,940 this long winded approach of specifying the name of the property, the value of the property, every single time 151 152 00:11:00,970 --> 00:11:02,890 we create a new object, 152 153 00:11:03,040 --> 00:11:11,320 we're simply going to say var houseKeeper1 = new. That new keyword is really important, because 153 154 00:11:11,320 --> 00:11:13,860 we're going to be using a constructor function 154 155 00:11:13,870 --> 00:11:21,700 afterwards. new HouseKeeper. Notice the capitalized H. And then inside the parentheses we're going to provide 155 156 00:11:21,700 --> 00:11:24,250 the values of all three properties. 156 157 00:11:24,250 --> 00: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 158 00:11:32,320 --> 00:11:36,170 let's say he's only good for cleaning the lobby and bedrooms. 158 159 00:11:36,250 --> 00: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 160 00:11:46,690 --> 00:11:48,970 So our object has been created. 160 161 00:11:49,120 --> 00:11:54,580 So now that we created this constructor function every single time we want to create a new object from 161 162 00:11:54,580 --> 00: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 163 00:12:01,420 --> 00:12:04,720 to pump out new objects with those same properties all day long.