WEBVTT 1 00:00:01.110 --> 00:00:02.750 In this short video, 2 00:00:02.750 --> 00:00:05.913 let's quickly gonna talk about statics methods. 3 00:00:07.950 --> 00:00:10.330 Now a good example to understand 4 00:00:10.330 --> 00:00:12.743 what a static method actually is, 5 00:00:13.695 --> 00:00:17.110 is the build in Array.from method. 6 00:00:17.110 --> 00:00:19.260 And let's just do that here in the console. 7 00:00:20.180 --> 00:00:24.920 so remember that we have the Array.from method 8 00:00:24.920 --> 00:00:29.920 which converts any array like structure to a real Array. 9 00:00:30.410 --> 00:00:35.410 So for example document.query selector. 10 00:00:37.636 --> 00:00:38.623 All right. 11 00:00:39.480 --> 00:00:43.140 So that's an error right there and so you see, 12 00:00:43.140 --> 00:00:46.120 this now return an Array to us. 13 00:00:46.120 --> 00:00:47.953 And for some reason it is empty. 14 00:00:48.940 --> 00:00:50.910 And that's because query selector 15 00:00:52.003 --> 00:00:54.120 doesn't return any note list. 16 00:00:54.120 --> 00:00:56.580 So lets try query selector all, 17 00:00:56.580 --> 00:00:58.883 and so now indeed we get an Array here. 18 00:00:59.720 --> 00:01:01.620 But that's not really the point, 19 00:01:01.620 --> 00:01:05.110 what's the point is that this from method here 20 00:01:05.110 --> 00:01:07.710 is really a method that is attached 21 00:01:07.710 --> 00:01:10.170 to the Array constructor. 22 00:01:10.170 --> 00:01:13.453 So we could not use the from method on an Array. 23 00:01:14.290 --> 00:01:17.373 So this is not gonna work. 24 00:01:20.430 --> 00:01:21.300 All right. 25 00:01:21.300 --> 00:01:24.090 So from is not a function. 26 00:01:24.090 --> 00:01:27.340 And so that is because this from method here 27 00:01:28.312 --> 00:01:31.160 is really attached to the entire constructor, 28 00:01:31.160 --> 00:01:32.680 so the Array constructor 29 00:01:33.801 --> 00:01:37.450 and not to the prototype property of the constructor. 30 00:01:37.450 --> 00:01:38.320 All right. 31 00:01:38.320 --> 00:01:43.320 And so therefore all the Arrays do not inherit this method. 32 00:01:43.390 --> 00:01:46.770 Again because its not on their prototype. 33 00:01:46.770 --> 00:01:50.460 Its simply attached to the constructor itself. 34 00:01:50.460 --> 00:01:55.010 So Array.from here is basically just a simple function, 35 00:01:55.010 --> 00:01:59.390 but its a function that's attached to the Array constructor. 36 00:01:59.390 --> 00:02:02.450 And the reason for that is simply, 37 00:02:02.450 --> 00:02:06.000 so that developers know that it is related to Arrays. 38 00:02:06.000 --> 00:02:11.000 We also say that the from method is in the Array name space. 39 00:02:11.170 --> 00:02:15.090 And we actually used that term before for some methods 40 00:02:15.090 --> 00:02:19.223 in the number and in the internationalization name space. 41 00:02:21.513 --> 00:02:23.513 Remember for example numbers.parsefloat. 42 00:02:25.690 --> 00:02:26.963 So that's the same thing. 43 00:02:28.240 --> 00:02:29.530 Okay. 44 00:02:29.530 --> 00:02:32.570 So this method is another static method 45 00:02:32.570 --> 00:02:36.140 and its static on the number constructor. 46 00:02:36.140 --> 00:02:38.150 So its not available on numbers, 47 00:02:38.150 --> 00:02:41.500 but only on this very constructor. 48 00:02:41.500 --> 00:02:42.430 All right. 49 00:02:42.430 --> 00:02:45.755 So these are some good examples that we understand 50 00:02:45.755 --> 00:02:48.440 what a static method is. 51 00:02:48.440 --> 00:02:51.463 And we usually use these kind of as helpers, 52 00:02:52.509 --> 00:02:54.909 that should be related to a certain constructor. 53 00:02:56.597 --> 00:02:59.735 And so maybe you can imagine that it should be pretty easy 54 00:02:59.735 --> 00:03:02.350 to implement static methods or selfs. 55 00:03:02.350 --> 00:03:05.870 And let's do that for both or constructor function 56 00:03:05.870 --> 00:03:07.663 and also for the class. 57 00:03:08.520 --> 00:03:11.820 So here I already have the constructor function 58 00:03:11.820 --> 00:03:15.090 that we wrote right in the beginning of the section. 59 00:03:15.090 --> 00:03:19.718 So this person here and to add a static method, 60 00:03:19.718 --> 00:03:22.033 all we have to do is write, 61 00:03:23.090 --> 00:03:26.493 person and let's say I want to create a very simple 62 00:03:26.493 --> 00:03:28.476 hey function 63 00:03:28.476 --> 00:03:29.601 okay. 64 00:03:29.601 --> 00:03:34.601 So which simply like waves when we call it. 65 00:03:35.470 --> 00:03:37.673 So lets just say console.log, 66 00:03:39.790 --> 00:03:41.250 hey there. 67 00:03:41.250 --> 00:03:44.130 And then maybe some emojis so we can actually 68 00:03:44.130 --> 00:03:45.863 see it better in the console. 69 00:03:47.185 --> 00:03:51.307 And so now in order to call this, it is pretty easy. 70 00:03:51.307 --> 00:03:52.520 We just have to do 71 00:03:54.599 --> 00:03:55.781 person.hey 72 00:03:55.781 --> 00:03:57.530 and that's it. 73 00:03:57.530 --> 00:04:02.140 So somewhere up here we now should get this hey there. 74 00:04:02.140 --> 00:04:06.083 Great but of course this one is not inherited. 75 00:04:07.020 --> 00:04:11.900 So just like we cannot call the from method on an Array. 76 00:04:11.900 --> 00:04:14.780 we cannot say Jonas.hey 77 00:04:14.780 --> 00:04:18.420 because it is simply not in the prototype of 78 00:04:18.420 --> 00:04:20.070 the Jonas object. 79 00:04:20.070 --> 00:04:23.853 So there's noway that the Jonas object could inherit it. 80 00:04:24.798 --> 00:04:25.963 All right. 81 00:04:27.260 --> 00:04:31.033 Now just let's just take a look at the disc key word, 82 00:04:32.170 --> 00:04:35.383 but this again should be pretty obvious. 83 00:04:36.240 --> 00:04:38.709 And so that's essentially the entire 84 00:04:38.709 --> 00:04:40.483 constructor function here. 85 00:04:41.691 --> 00:04:43.230 And the reason for that is because, 86 00:04:43.230 --> 00:04:46.910 that is exactly the object that is calling the method. 87 00:04:46.910 --> 00:04:50.360 And so as always that is basically the rule. 88 00:04:50.360 --> 00:04:53.190 So whatever object is calling the method, 89 00:04:53.190 --> 00:04:56.620 will be the disc key word inside of that function. 90 00:04:56.620 --> 00:04:58.360 And so here the disc key word, 91 00:04:58.360 --> 00:05:01.570 is simply that entire constructor function. 92 00:05:01.570 --> 00:05:02.760 Great. 93 00:05:02.760 --> 00:05:06.930 And now let's quickly take this do the same in class, 94 00:05:06.930 --> 00:05:08.583 where it is even easier. 95 00:05:10.260 --> 00:05:12.930 So here to create a static method, 96 00:05:12.930 --> 00:05:17.543 all we need to do is to add the static keyword. 97 00:05:19.260 --> 00:05:20.480 So static hey 98 00:05:22.195 --> 00:05:24.850 and then that's it. 99 00:05:24.850 --> 00:05:29.297 So let's just write it here so that is a static method. 100 00:05:30.670 --> 00:05:34.350 While these ones is called instance method. 101 00:05:34.350 --> 00:05:36.680 So as it says here these are methods 102 00:05:36.680 --> 00:05:39.570 that will be added to the prototype property, 103 00:05:39.570 --> 00:05:42.800 so that all instances can have access to them. 104 00:05:42.800 --> 00:05:47.673 And therefore the name instance methods, 105 00:05:47.673 --> 00:05:49.280 okay. 106 00:05:49.280 --> 00:05:52.823 And now we can simply, let's do it here at the end. 107 00:05:53.930 --> 00:05:55.887 Can simply do personcl.hey. 108 00:05:59.787 --> 00:06:01.370 And so again we get hey there and this time, 109 00:06:02.790 --> 00:06:05.853 disc key word points to the entire class. 110 00:06:06.840 --> 00:06:08.160 All right. 111 00:06:08.160 --> 00:06:10.830 So keep in mind that these static methods 112 00:06:10.830 --> 00:06:13.053 are not available on the instances, 113 00:06:14.334 --> 00:06:16.250 and sometimes they are still useful to implement 114 00:06:16.250 --> 00:06:19.480 some kind of helper function about a class 115 00:06:19.480 --> 00:06:21.553 or about a constructor function.