1 00:00:01,090 --> 00:00:02,290 In this video. 2 00:00:02,290 --> 00:00:13,330 Let's see how we can add our custom methods to objects to make it more flexible the way we want it. 3 00:00:13,330 --> 00:00:18,850 So how can we had object or methods to objects? 4 00:00:18,850 --> 00:00:21,820 So let me show you how we are going to do it. 5 00:00:21,820 --> 00:00:23,200 It's going to pretty simple. 6 00:00:23,770 --> 00:00:24,610 Sorry, guys. 7 00:00:24,850 --> 00:00:29,800 So let me comment this one and then comment this one. 8 00:00:30,690 --> 00:00:30,870 Okay. 9 00:00:30,870 --> 00:00:33,090 Let me copy this one before I comment. 10 00:00:33,390 --> 00:00:34,590 Yes, yes. 11 00:00:34,830 --> 00:00:38,090 The na na na na na na na na na na na na pace. 12 00:00:38,100 --> 00:00:40,020 Here and then. 13 00:00:41,170 --> 00:00:43,120 My beautiful comment. 14 00:00:45,200 --> 00:00:47,480 And let's say adding. 15 00:00:49,650 --> 00:00:53,700 Metis to object. 16 00:00:54,540 --> 00:01:01,980 So for this object, let's see how we can add method to this particular object. 17 00:01:02,310 --> 00:01:04,290 It's going to be pretty simple. 18 00:01:04,830 --> 00:01:05,850 Pretty simple. 19 00:01:06,990 --> 00:01:09,270 Okay, so let's say that. 20 00:01:09,270 --> 00:01:15,930 Well, for this one, let's use a call object because we have been using person, person, person, 21 00:01:15,930 --> 00:01:16,560 person. 22 00:01:16,590 --> 00:01:18,690 Well, it's okay. 23 00:01:18,720 --> 00:01:24,180 Either a outdoor person object is okay because the concept is the most important, but not the type 24 00:01:24,180 --> 00:01:26,820 of the object that we are creating. 25 00:01:27,330 --> 00:01:37,050 Okay, so how can we add an object or a method to an object when when a function is inside an object 26 00:01:37,080 --> 00:01:38,430 is called method. 27 00:01:38,730 --> 00:01:45,120 So when I say method and functions the same, but depending where I use it, that tells you differences. 28 00:01:45,630 --> 00:01:46,590 Okay, good. 29 00:01:47,010 --> 00:01:51,250 So let's say that for this person object. 30 00:01:51,270 --> 00:01:52,560 Now, let me add. 31 00:01:52,560 --> 00:01:54,000 Let's insert name. 32 00:01:54,000 --> 00:01:55,500 I'll make this one as. 33 00:01:56,680 --> 00:01:58,060 As first. 34 00:02:00,370 --> 00:02:02,080 Name as John. 35 00:02:02,290 --> 00:02:05,170 Let me add also last. 36 00:02:06,430 --> 00:02:07,330 Name. 37 00:02:07,330 --> 00:02:08,090 Semicolon. 38 00:02:08,110 --> 00:02:09,430 Let's do. 39 00:02:12,510 --> 00:02:14,310 But yes, like that. 40 00:02:15,240 --> 00:02:15,930 Good. 41 00:02:16,050 --> 00:02:23,730 So let's say that for this object, I want to print out the full name of this particular object. 42 00:02:24,120 --> 00:02:30,900 Well, you may be thinking that where we can do person the first name and person the last name, and 43 00:02:30,900 --> 00:02:32,160 then we are good to go. 44 00:02:32,310 --> 00:02:35,500 So let me show you the one way that we can achieve the same logic. 45 00:02:35,520 --> 00:02:36,990 Printing out. 46 00:02:38,670 --> 00:02:39,600 The. 47 00:02:42,250 --> 00:02:42,920 Funny. 48 00:02:42,970 --> 00:02:47,390 So for this logic, we can achieve it in so many ways. 49 00:02:47,410 --> 00:02:53,080 One is I can declare a variable and say first name. 50 00:02:54,050 --> 00:03:02,220 Noun is equal to person dot first name and then cost. 51 00:03:02,240 --> 00:03:03,710 Let's say last. 52 00:03:05,330 --> 00:03:09,500 Last name is equal to person. 53 00:03:09,500 --> 00:03:11,430 Dodd's last name. 54 00:03:11,450 --> 00:03:13,250 Don't be confused with the variable name. 55 00:03:13,250 --> 00:03:18,050 And this because this one is not the same as this, because this is in the object. 56 00:03:18,050 --> 00:03:20,780 So let me change this one to just let's say f name. 57 00:03:21,650 --> 00:03:29,090 So that going to be confused about the naming convention here and now we can say that lets full name. 58 00:03:30,540 --> 00:03:36,570 Is equal to first name plus last name. 59 00:03:37,810 --> 00:03:38,700 Our name? 60 00:03:38,830 --> 00:03:39,520 Yes. 61 00:03:39,820 --> 00:03:41,830 So I need to add some concatenation. 62 00:03:41,830 --> 00:03:47,410 So let's say double code and then plus remember string concatenation. 63 00:03:47,590 --> 00:03:52,150 So if I check for console.log foo name. 64 00:03:54,310 --> 00:03:57,490 You see, you have John Doe the first method. 65 00:03:57,490 --> 00:04:00,610 Or I can also go by this. 66 00:04:01,720 --> 00:04:12,140 Let me comment this one out here and then I can also say that Konst full name is equal to biotech, 67 00:04:12,460 --> 00:04:23,290 then dollar sign carry basis and then person dot first name and then space dollar sign categories. 68 00:04:23,590 --> 00:04:27,460 Person dot last name. 69 00:04:28,690 --> 00:04:33,610 So if I check for foo name, we have it. 70 00:04:34,690 --> 00:04:37,060 We see we got John Doe. 71 00:04:37,150 --> 00:04:41,650 Well, we got the same, I mean, objective. 72 00:04:41,680 --> 00:04:44,890 But we need a function for this. 73 00:04:45,190 --> 00:04:46,990 A function must be reusable. 74 00:04:46,990 --> 00:04:49,510 In this way we are just repeating ourselves. 75 00:04:50,260 --> 00:04:56,500 There are some use cases you may need how we can access properties to display to the user, and that 76 00:04:56,500 --> 00:04:59,530 one is what you call accessing object properties. 77 00:04:59,620 --> 00:05:06,790 But what we want is what a function or a method to be able to display a person's name and that is it 78 00:05:06,790 --> 00:05:08,680 to avoid duplication of code. 79 00:05:09,130 --> 00:05:14,110 So let's see how we can add a method to achieve the same logic as this one. 80 00:05:14,110 --> 00:05:15,730 So here we go. 81 00:05:16,300 --> 00:05:20,110 Comment this one out and then my person object is here. 82 00:05:20,350 --> 00:05:26,350 So inside this one, my object, I can come down here. 83 00:05:27,740 --> 00:05:30,860 And let's see that ad. 84 00:05:32,840 --> 00:05:35,690 Print foo name. 85 00:05:37,030 --> 00:05:37,780 Met it. 86 00:05:39,400 --> 00:05:42,040 To the to the. 87 00:05:42,070 --> 00:05:43,060 To the object. 88 00:05:43,060 --> 00:05:44,650 Sorry, to the object. 89 00:05:45,010 --> 00:05:45,850 So here we go. 90 00:05:46,180 --> 00:05:52,210 Remember, I would take the person object and dot print. 91 00:05:53,550 --> 00:06:01,140 Full name now is equal to my function, keyword as function. 92 00:06:01,230 --> 00:06:02,680 And next is. 93 00:06:02,700 --> 00:06:03,710 There we go. 94 00:06:03,720 --> 00:06:05,190 And there we go. 95 00:06:05,670 --> 00:06:06,460 Great. 96 00:06:06,480 --> 00:06:10,710 So now I have added a function called Foo Name. 97 00:06:11,310 --> 00:06:16,890 So if I check, I think I can remove this one to avoid some or. 98 00:06:16,890 --> 00:06:17,370 Yes. 99 00:06:18,760 --> 00:06:22,480 So if I check for person objects. 100 00:06:22,480 --> 00:06:23,200 Let's see. 101 00:06:23,200 --> 00:06:29,960 Now I have let me open a little bit bigger here you that I have full name print full name. 102 00:06:29,980 --> 00:06:31,750 I have something strange here. 103 00:06:32,080 --> 00:06:33,700 This means it's a function. 104 00:06:35,030 --> 00:06:36,080 It's a function. 105 00:06:36,230 --> 00:06:46,340 So this function inside I can console.log anything inside I can say that console dot log. 106 00:06:46,460 --> 00:06:48,740 Let's say this. 107 00:06:49,340 --> 00:06:53,360 This is my foo name. 108 00:06:54,970 --> 00:06:55,720 Like that. 109 00:06:56,140 --> 00:07:02,800 So again, if I check again, the person I read objects, I have a function. 110 00:07:03,130 --> 00:07:06,790 So now I have added a function in this way. 111 00:07:06,820 --> 00:07:09,220 So how can I use the function? 112 00:07:09,220 --> 00:07:15,160 Say how to call the function. 113 00:07:16,240 --> 00:07:19,570 Remember how we can access property names the same way. 114 00:07:19,690 --> 00:07:24,340 So we can call the function using person dot print full name. 115 00:07:26,480 --> 00:07:31,880 And then as a function, then you bring your parentheses as that. 116 00:07:31,880 --> 00:07:34,730 So if I save it now check here. 117 00:07:35,510 --> 00:07:38,870 We see I got this is my full name. 118 00:07:38,900 --> 00:07:41,810 It has printed out perfectly. 119 00:07:42,110 --> 00:07:47,780 So the question is, how can we retrieve this, the full name of this person? 120 00:07:48,260 --> 00:07:50,330 So inside here is a normal function. 121 00:07:50,330 --> 00:07:51,890 You can do any logic in it. 122 00:07:52,040 --> 00:07:57,710 But guys, I'm going to expose to you some strange word here. 123 00:07:57,710 --> 00:08:01,810 Call this key word in JavaScript, my brother. 124 00:08:02,120 --> 00:08:05,690 This key word is a topic on it. 125 00:08:05,690 --> 00:08:07,790 On debatable. 126 00:08:08,700 --> 00:08:12,510 All documentation talking about this key word, this key word, this key word. 127 00:08:12,510 --> 00:08:18,180 But trust me, I always make things really easy for you to understand. 128 00:08:18,390 --> 00:08:21,760 For the meantime, let's consult that log. 129 00:08:21,780 --> 00:08:22,470 This. 130 00:08:24,250 --> 00:08:24,910 This. 131 00:08:24,910 --> 00:08:26,350 And this is something here. 132 00:08:26,920 --> 00:08:30,280 If I save this one, check out here. 133 00:08:31,410 --> 00:08:35,909 We see that just printed giving me the object. 134 00:08:36,669 --> 00:08:45,640 So this means that this represents what the object, but it's not always the object. 135 00:08:46,150 --> 00:08:49,120 But what are some of the use cases here? 136 00:08:49,510 --> 00:08:56,680 For the meantime, let's just finish up with our function to print out full name and then the the full 137 00:08:56,680 --> 00:08:58,330 name, then this video. 138 00:08:58,330 --> 00:09:01,590 How would that remote explain what this referring to? 139 00:09:02,380 --> 00:09:10,540 So now that we have this to this represent the instance of the object where is being called the first 140 00:09:10,540 --> 00:09:11,140 scenario. 141 00:09:11,350 --> 00:09:15,940 So now in my function I want the first name. 142 00:09:15,940 --> 00:09:24,730 So going to be this dot first name and this dot last name will give me that. 143 00:09:25,000 --> 00:09:27,430 So here we go. 144 00:09:28,240 --> 00:09:34,450 So here I'm going to be as console or I can retain it or just console.log it. 145 00:09:34,900 --> 00:09:38,740 Okay, so let me return it to be more to be more complete function. 146 00:09:38,740 --> 00:09:45,460 So retain or let me console.log it okay console.log that let's say to make easier because you're moving 147 00:09:45,460 --> 00:09:46,090 step by step. 148 00:09:46,090 --> 00:09:47,920 I want to make it more complicated. 149 00:09:48,250 --> 00:09:57,820 So here I would take the full name so back take we can use string concatenation here or for the meantime 150 00:09:57,820 --> 00:10:01,840 let's type in this dot first name. 151 00:10:02,440 --> 00:10:09,580 So if I see that I get drawn here because now this represent the object dot dot first name which is 152 00:10:09,580 --> 00:10:10,570 John over here. 153 00:10:10,570 --> 00:10:15,910 So now I can put everything in one string using temporally. 154 00:10:15,910 --> 00:10:29,830 Try here let's say that your full name is and then dollar sign Carrie braces this dot first name space 155 00:10:29,830 --> 00:10:39,330 dollar sign carry braces this dot last name Save it now let's see the message here. 156 00:10:39,430 --> 00:10:41,920 Your full name is John Doe. 157 00:10:42,010 --> 00:10:43,300 That is perfect. 158 00:10:43,300 --> 00:10:48,460 So we can create a method to manipulate this particular object. 159 00:10:49,070 --> 00:10:53,090 So the weird thing here is about this keyword. 160 00:10:53,090 --> 00:10:56,510 So let's explain this keyword in this video, in details.