1 00:00:09,000 --> 00:00:10,140 Hi there. 2 00:00:10,460 --> 00:00:18,020 It's time for us to talk about objects, methods, in the previous video, we learn what is an object 3 00:00:18,020 --> 00:00:25,390 and we learn that the values associated to the objects properties can be, if any, data type. 4 00:00:25,550 --> 00:00:29,500 So we saw examples of strings, numbers, arrays. 5 00:00:29,810 --> 00:00:33,410 We can also have other objects inside objects. 6 00:00:33,800 --> 00:00:37,590 But not only that, we can also have functions. 7 00:00:37,730 --> 00:00:41,420 So in this case, we are going to call them methods. 8 00:00:41,720 --> 00:00:50,150 Methods are just like any other function, but inside objects they are extra useful because they can 9 00:00:50,150 --> 00:00:55,370 use other object properties using the key word this. 10 00:00:55,950 --> 00:01:02,150 So let me go to Visual Studio Code and I'm going to create an object for a student. 11 00:01:04,800 --> 00:01:09,600 So open and close curly braces to indicate my object. 12 00:01:10,680 --> 00:01:15,540 Now, inside here, we can add properties like first name. 13 00:01:23,830 --> 00:01:25,450 And last name. 14 00:01:32,410 --> 00:01:39,550 Now, if we want to have the full name instead of doing it ourselves, every time we need to use it, 15 00:01:39,760 --> 00:01:47,650 we can create a method that is going to do this for us so I can create a new property called full. 16 00:01:48,670 --> 00:01:49,180 Name. 17 00:01:51,160 --> 00:01:58,690 And I'm going to assign a function to this property, so I'm going to write it a bit differently because 18 00:01:58,690 --> 00:02:04,030 this time we don't need the name for the function because the name of the function is actually going 19 00:02:04,030 --> 00:02:05,430 to be the property. 20 00:02:05,680 --> 00:02:08,560 So we just need to open and close parentheses. 21 00:02:09,930 --> 00:02:17,160 I'm not going to use any arguments for now because in this case, we can access the elements of this 22 00:02:17,160 --> 00:02:20,370 object using the key word this. 23 00:02:20,910 --> 00:02:23,160 So I'm just going to return. 24 00:02:25,520 --> 00:02:35,690 This not first name I'm going to concatenate with an empty space and then I'm just going to get this 25 00:02:36,020 --> 00:02:40,730 dot last name, so this is our method. 26 00:02:41,030 --> 00:02:43,040 So now let's just save this. 27 00:02:43,220 --> 00:02:45,920 Let's go to the console, refresh the page. 28 00:02:46,160 --> 00:02:49,310 Now, as you can see, we have the student. 29 00:02:50,380 --> 00:02:51,250 Object. 30 00:02:54,540 --> 00:03:00,240 If we open this, we can see that we have the first name, which has a string associated, the last 31 00:03:00,240 --> 00:03:05,670 name and the full name has this F indicated that this is a function. 32 00:03:07,060 --> 00:03:09,490 So I can do student that. 33 00:03:10,600 --> 00:03:18,610 First name, if I want to get the first name or I can do student that full name, which is going to 34 00:03:18,610 --> 00:03:20,890 invoke the method we created. 35 00:03:21,190 --> 00:03:24,280 So for this, we need to open and close parentheses. 36 00:03:24,550 --> 00:03:29,020 By doing this, we're able to get the full name of the student. 37 00:03:29,380 --> 00:03:36,820 Just one important thing I want to mention is that we can only use the dot notation, this one, to 38 00:03:36,820 --> 00:03:38,410 invoke the methods. 39 00:03:38,620 --> 00:03:41,940 We can't invoke it like this using braces. 40 00:03:42,250 --> 00:03:48,970 This means that if you have a property that does not follow the variable name rules, you won't be able 41 00:03:48,970 --> 00:03:50,470 to call this method. 42 00:03:50,710 --> 00:03:51,920 Even if you could. 43 00:03:51,940 --> 00:03:54,910 We should always follow those rules. 44 00:03:55,120 --> 00:03:56,710 So now something interesting. 45 00:03:56,950 --> 00:04:00,460 Did you know that everything in JavaScript is an object? 46 00:04:00,970 --> 00:04:08,770 JavaScript is an object oriented programming language, so it treats basically everything as an object. 47 00:04:09,750 --> 00:04:17,020 Objects, arrays, functions and everything except for the primitive data types are objects. 48 00:04:17,280 --> 00:04:24,000 Let's remember that when we had an array, so I'm going to create an array called our. 49 00:04:28,710 --> 00:04:32,310 Just to use as an example and if we do type of. 50 00:04:36,990 --> 00:04:43,280 We can see that this is actually an object, so pretty much everything in JavaScript is an object. 51 00:04:43,530 --> 00:04:50,520 So now looking back to a few things we've done, we can see how things work in JavaScript. 52 00:04:50,520 --> 00:04:54,990 So when we do console, dot, log, what are we actually doing? 53 00:04:55,980 --> 00:05:00,480 Log is a method of the console object. 54 00:05:00,630 --> 00:05:02,540 So this is why we use the DOT. 55 00:05:02,700 --> 00:05:10,500 And in this case, this method has an argument, which is the text we want to send to the console when 56 00:05:10,500 --> 00:05:11,550 we use math. 57 00:05:11,970 --> 00:05:15,540 Dot round round is a method. 58 00:05:16,430 --> 00:05:22,490 Of the math object, so now things start to be a bit more clear. 59 00:05:23,700 --> 00:05:33,630 Speaking of which, let me clear this and let me call the math object just so we can see something interesting. 60 00:05:33,930 --> 00:05:42,580 If I do this and open this, you can see that we have a lot of methods in this object. 61 00:05:43,350 --> 00:05:46,670 We also have a few regular properties. 62 00:05:46,680 --> 00:05:49,500 So, for example, we have the PPI number. 63 00:05:50,440 --> 00:05:52,150 So if I do math. 64 00:05:53,800 --> 00:06:00,890 Not pi, it returns the PI number, which is a constant it is never going to change. 65 00:06:00,910 --> 00:06:04,330 So this is just a regular property. 66 00:06:04,660 --> 00:06:12,340 But then we have a few methods that we can invoke with the DOT notation so we can do like math. 67 00:06:15,240 --> 00:06:16,500 That round. 68 00:06:18,160 --> 00:06:25,000 Which is just invoking the round method of this object, and now we need an argument, which is the 69 00:06:25,000 --> 00:06:31,290 number we are trying to round when I do like this, then it's returning the result. 70 00:06:31,690 --> 00:06:38,920 I have a few other examples here, like when we select age HTML elements and get their content, what 71 00:06:38,920 --> 00:06:44,850 we're doing here is using the get element by the method. 72 00:06:45,070 --> 00:06:54,670 So the document object generated by the DOM has a method to select an element, which is this one. 73 00:06:54,820 --> 00:07:03,190 So by performing this operation, this is going to return the object representing the HTML element with 74 00:07:03,190 --> 00:07:09,130 just selected and this element has a property called inner as HTML. 75 00:07:09,460 --> 00:07:16,600 This is why pretty much everything we do in JavaScript is going to use the dot notation because we are 76 00:07:16,600 --> 00:07:20,770 going to be working with objects most of the times. 77 00:07:21,520 --> 00:07:23,230 I have another example here. 78 00:07:24,950 --> 00:07:32,930 So we create an array called courses, and when we do push, what is push is a method that can be applied 79 00:07:32,930 --> 00:07:34,100 to a race. 80 00:07:34,250 --> 00:07:37,550 So I know this is getting a bit more complex now. 81 00:07:37,550 --> 00:07:40,550 So this is why I'm not going to go any further now. 82 00:07:40,760 --> 00:07:46,990 But I bet that a lot of things are starting to be more clear in your head. 83 00:07:47,480 --> 00:07:51,350 Let's do this little by little so we don't get overwhelmed. 84 00:07:51,350 --> 00:07:59,060 But if you want to learn more about objects, you can click on this link and you have a ton of information 85 00:07:59,210 --> 00:08:00,290 you can learn from. 86 00:08:00,440 --> 00:08:02,100 So that was all for this lesson. 87 00:08:02,120 --> 00:08:07,580 Now we are ready to do another list of exercises and put all this into practice. 88 00:08:07,910 --> 00:08:08,710 I'll see you then.