WEBVTT 00:01.020 --> 00:06.270 In this lecture, we're going to talk about how to create objects in kind of a different way, you already 00:06.270 --> 00:08.600 know a simple way, how to create an object. 00:08.610 --> 00:13.970 I mean, to create them using either little notation or construct notation. 00:14.670 --> 00:20.790 But when you deal with lots of similar objects or when you're JavaScript code or refers to object oriented 00:20.790 --> 00:23.190 part, then you need something different. 00:23.700 --> 00:26.670 You need to make your code more organized and sophisticated. 00:27.720 --> 00:30.060 All right, let's open brackets. 00:31.000 --> 00:33.250 The simple way to create objects is the following. 00:34.140 --> 00:43.290 So create a couple of objects using literal notation, great variable person one which equals to an 00:43.290 --> 00:44.130 empty object. 00:47.040 --> 00:48.930 And now let's add some properties. 00:51.030 --> 00:53.700 Person one that first name equals the John. 00:57.870 --> 01:01.320 And then for someone, that last name equals to Smith. 01:06.000 --> 01:16.480 Then copy this object and change slightly, change the name of object as person to and also the values 01:16.500 --> 01:17.460 of properties. 01:17.850 --> 01:20.100 First name and last name, right, Neek. 01:21.100 --> 01:22.300 And that dough. 01:26.080 --> 01:33.140 OK, so we have created two different but similar objects, because both of them represent persons and 01:33.140 --> 01:36.820 they have the exact same properties with different values. 01:37.750 --> 01:42.640 Now, let's suppose that we need to create tens of other similar objects like these persons. 01:43.420 --> 01:49.240 Then using this way of creating object is really messy and hard, right, when it's something else. 01:49.870 --> 01:55.750 One of the ways to solve this problem is to create a function which will be like a general model or 01:55.750 --> 02:01.270 pattern and help us to create similar objects with similar properties and methods. 02:02.320 --> 02:03.490 Let's see what I'm talking about. 02:04.030 --> 02:04.930 Create function. 02:06.970 --> 02:14.290 And call it creative person, then copy one of the objects, let's say the first one. 02:16.560 --> 02:18.480 And inside function. 02:21.260 --> 02:28.850 Instead of person one, I'm going to call it as a new person, because we're going to create a new object. 02:31.210 --> 02:41.350 And also do it for the properties, right, new person instead of person one, and also change the values 02:41.350 --> 02:44.320 of first name and last name, right. 02:44.590 --> 02:49.780 As a first name, Bob, and then as last name, writes Brown. 02:52.980 --> 02:59.460 Then after that, in order to get new object, we need to return a new person so. 02:59.460 --> 03:01.130 Right, return a new person. 03:05.070 --> 03:05.490 OK. 03:06.870 --> 03:13.920 So we have created a new object using a regular function, and the only thing we have to do is to invoke 03:13.920 --> 03:14.580 this function. 03:15.000 --> 03:18.570 So right here, a variable person three. 03:22.710 --> 03:30.060 And then call this function, so assign it as a value create person. 03:33.140 --> 03:38.810 Then let's look at those objects in council, right, that look person one. 03:43.280 --> 03:49.400 Then duplicated twice and changed person one into person two and three. 03:51.820 --> 03:58.000 Reload the page, so you see that in Castle, we have the similar but different objects with the same 03:58.000 --> 03:59.870 properties, first name and last name. 04:01.250 --> 04:05.160 OK, using a function, we have just created a new object. 04:06.130 --> 04:07.300 Nothing special happened. 04:07.300 --> 04:07.630 Right? 04:08.470 --> 04:14.620 So, no, I'm going to transform this function in a different way that will allow us to create multiple 04:14.620 --> 04:21.490 similar objects dynamically on the flight so that we have to pass as parameters the properties first 04:21.490 --> 04:27.100 name and last name and then instead the color Brice's we have to assign them instead of the particular 04:27.100 --> 04:27.530 values. 04:28.180 --> 04:29.620 So right inside the parentheses. 04:29.620 --> 04:31.150 First name and last name. 04:35.960 --> 04:42.770 Then, instead of the values, Bob and Brown write first name and last name. 04:48.340 --> 04:55.000 Then below, where we call the function, we have just a pass as arguments the values for first name 04:55.330 --> 04:56.530 and last name properties. 04:57.210 --> 04:58.300 So right, Bob. 04:59.570 --> 05:01.040 And Broon. 05:05.200 --> 05:09.370 Let's add one more object here, create a variable person for. 05:12.620 --> 05:16.580 And then again, call the function with different arguments. 05:17.850 --> 05:20.700 For example, right, Mary? 05:21.730 --> 05:29.530 And as a last name, right, James, and also look it in council as well, right? 05:30.010 --> 05:30.310 Hello. 05:30.310 --> 05:33.010 Council dialogue person for. 05:37.130 --> 05:46.120 Reload and here we go, we have four similar objects with the same properties and with different values, 05:47.060 --> 05:51.650 but the key point is that creating objects became much more easier. 05:52.400 --> 05:58.460 We have a regular function as a general pattern, and it allows us to create as many objects as we want, 05:59.000 --> 06:01.530 but in a simpler and more dynamic way. 06:02.870 --> 06:04.970 I hope that it makes sense for you. 06:06.610 --> 06:13.540 OK, now I'm going to talk about another way of creating objects dynamically, which is more sophisticated, 06:13.540 --> 06:15.520 and also it needs less typing. 06:16.150 --> 06:18.940 Let's consider what function constructor is. 06:20.540 --> 06:27.770 The function constructor is used to create a function object, it allows us to construct objects dynamically. 06:29.120 --> 06:31.560 OK, let's go back to our example. 06:32.180 --> 06:38.720 At first, I'm just going to transform our function as a function constructor syntactically, and then 06:38.720 --> 06:41.960 I will explain what exactly happens here at first. 06:41.960 --> 06:45.050 Let's copy it and paste. 06:46.900 --> 06:49.720 Then comments this regular function out. 06:53.650 --> 06:56.950 Now, let's set the function name as person. 06:59.390 --> 07:03.120 There is a special convention regarding the names of function constructors. 07:03.560 --> 07:07.670 They are written with a capital letter and I will talk about it later. 07:08.360 --> 07:10.900 Let's change the names below as well. 07:11.420 --> 07:11.780 Right. 07:11.780 --> 07:14.360 Person instead of tradespersons. 07:18.650 --> 07:21.380 Also, let's get rid of these two lines. 07:23.100 --> 07:29.400 And change new person into the special keyword, this. 07:32.370 --> 07:38.400 And the last thing to do is to pass here before the function names new operator. 07:39.360 --> 07:42.340 Which I hope you remember from the previous lectures. 07:43.530 --> 07:44.070 All right. 07:45.640 --> 07:52.030 So here we have a function constructor, and as it was in previous case, this function constructor 07:52.030 --> 07:55.960 using new operator allows us to create new objects as well. 07:56.710 --> 08:02.730 So if we reload the page, we will get objects first. 08:02.740 --> 08:09.340 Two objects are created using literal notation and the rest of the objects are created using function 08:09.340 --> 08:10.020 constructor. 08:10.720 --> 08:14.770 And because of that, we see here before the objects, the word person. 08:16.720 --> 08:20.420 All right, let's consider what a new operator actually does. 08:21.100 --> 08:24.730 So the new operator creates brand new Apte object. 08:25.180 --> 08:32.800 And in order to assign to it properties and methods, we use this keyword, which is actually variable 08:33.670 --> 08:35.050 because of a new operator. 08:35.080 --> 08:37.900 This variable represents new empty object. 08:39.490 --> 08:45.450 If we miss the new operator, then this variable will represent global window object. 08:46.570 --> 08:50.200 So if we remove new and then reload. 08:52.590 --> 09:00.160 You see that we got undefined for the third person object, it's because without new operating, this 09:00.180 --> 09:07.320 function works as a regular function and we get the undefined because we don't return any value inside 09:07.320 --> 09:07.800 function. 09:08.880 --> 09:09.510 That's right. 09:09.510 --> 09:10.770 And cancel this. 09:13.020 --> 09:27.090 So here we have a window object, if we drop down it, we will see that first name and also below last 09:27.090 --> 09:32.520 name are attached to the global window object as properties. 09:33.480 --> 09:39.810 And it's because that without new operator, this variable represents global window object. 09:42.180 --> 09:51.750 All right, so if we compare this function constructed to previous regular function and the first case, 09:51.750 --> 09:56.640 we have created new empty objects and then we have returned it. 09:57.600 --> 10:04.650 But in this case, I mean, in case of a function constructor, you can imagine that JavaScript engine 10:05.130 --> 10:12.330 using this new operator creates for you this variable as a new empty object. 10:13.560 --> 10:14.190 And then. 10:16.300 --> 10:17.350 Returns it. 10:20.240 --> 10:28.100 Actually, literally, it doesn't happen in this way, but I think that it's a good reference in order 10:28.100 --> 10:33.490 to imagine how function constructs actually works, make sense. 10:35.580 --> 10:39.500 I hope that everything is clear for you, OK? 10:41.190 --> 10:45.270 As you see the name or function constructor is represented with capital letters. 10:45.570 --> 10:48.540 This is a special convention, for example. 10:48.540 --> 10:55.050 It's used in order to prevent missing the new operator if we missed it. 10:55.320 --> 11:02.400 And then when we would look at the code, the capital letter will remind that it is a function constructor. 11:04.260 --> 11:04.740 OK. 11:06.770 --> 11:13.100 This function constructor is created manually, but in JavaScript, we have built in function constructors 11:13.640 --> 11:21.050 and some of them you already know, for example, new object, new date, new array. 11:22.630 --> 11:29.470 And we also have new string and new number, all of these function constructors create new objects. 11:29.620 --> 11:36.100 We know that strings and numbers are primitives, but regardless of that, using new string, our new 11:36.100 --> 11:41.360 number function constructors, they can be transformed into string and no objects. 11:42.850 --> 11:49.920 Let's go back to Brackett's and create string object using new string function constructor. 11:51.340 --> 11:59.410 So write variable string object equals new string and instead the parentheses. 11:59.680 --> 12:08.770 Let's pass hello and then check the value of string object variable and type of this variable as well. 12:09.370 --> 12:11.410 Right to cancel that string object. 12:15.880 --> 12:20.380 Then duplicate and pass here the type of operator. 12:25.040 --> 12:28.490 Reload and you see that we have hello. 12:29.600 --> 12:32.600 It looks like string, but it's actually an object. 12:34.040 --> 12:39.650 So the primitive string value is created as an object and because of that, it's an object. 12:39.650 --> 12:45.690 We are able to use multiple string methods like, for example, index of which we have used previously. 12:46.490 --> 12:54.290 But as I remember when we have used the index of we did not transform string into object, in that case 12:54.830 --> 13:01.580 went JavaScript engine found that primitive string value was followed by index of method. 13:02.060 --> 13:05.540 It automatically transformed string into object on the fly. 13:06.930 --> 13:07.560 Makes sense. 13:08.940 --> 13:16.860 OK, I'm not going to waste time on that in the same way if we use new no function constructor with 13:16.860 --> 13:20.310 numbers that will be created as no objects. 13:22.410 --> 13:28.470 All right, I hope it makes sense, but anyway, if you have any trouble with function, construct a 13:28.470 --> 13:31.200 concept or something is not clear. 13:31.200 --> 13:34.470 I recommend to watch the video. 13:35.670 --> 13:36.360 Let's go ahead.