WEBVTT 00:00.120 --> 00:02.080 Hello everyone and welcome back. 00:02.100 --> 00:07.590 In the first few instants lesson we have seen that it is definitely possible to define and use expressions 00:07.910 --> 00:09.640 vertically within our templates. 00:09.770 --> 00:16.140 Like in the example shown here below however it is easy to understand our using complex expressions 00:16.440 --> 00:19.440 can quickly make our code difficult to read and maintain. 00:19.440 --> 00:26.180 Increasing the risk of bugs and that's why for any complex logic few offers as the computed properties 00:26.430 --> 00:29.530 similar to methods that we've already learned to use. 00:29.590 --> 00:36.230 Are different from them because the results are cached until the values they use change sometimes called 00:36.240 --> 00:37.860 also computed values. 00:37.860 --> 00:43.650 We can think of these as an extension of our data model useful to show values resulting from processing. 00:43.650 --> 00:48.360 It is good practice to avoid changing the values of the data model through the computed properties. 00:48.360 --> 00:53.730 Keeping them pure meaning it is best to just use them to return and show values. 00:53.730 --> 00:55.020 Let's make some examples. 00:55.320 --> 00:55.620 OK. 00:55.650 --> 00:59.830 So we are in business to your code and let's jump right into the main dots Joe. 00:59.850 --> 01:04.350 Yes five who have said that methods and computed properties are very similar. 01:04.350 --> 01:06.240 At least in the way we define them. 01:06.330 --> 01:12.000 And the biggest difference between computed properties and methods is that computed properties cache 01:12.030 --> 01:18.530 the result of data processing and keep using that same result until the values they've used change. 01:18.540 --> 01:20.470 So let's make an example right away. 01:20.580 --> 01:31.860 I'm going to define first of all a method get a random number which is just going to return a mass not 01:32.610 --> 01:33.760 random. 01:34.020 --> 01:45.180 So I'm also now going to define computed and yeah I'm going to define kind of the same method of defining 01:45.180 --> 01:53.010 error which this time is a computed property and therefore I'm just going to call it get a random computed 01:53.700 --> 01:57.210 going back to the HDMI file we are now going to use both. 01:57.210 --> 02:02.430 They get around don't compete with property the get random number and we're going to use each of them 02:02.550 --> 02:06.340 three times to see how the results differ from each other. 02:06.390 --> 02:08.450 So let's just define some paragraphs. 02:08.700 --> 02:13.200 The so method 1. 02:14.000 --> 02:16.260 And of course we need to do method name. 02:16.310 --> 02:23.570 So get that on the number inside curly braces like so. 02:24.170 --> 02:27.350 So 1 2 and 3 02:30.310 --> 02:35.280 like so maybe we can even add in a chart tag. 02:35.290 --> 02:37.900 Let's now do something similar for the computed properties. 02:37.900 --> 02:41.610 So this is going to be computed. 02:41.650 --> 02:56.150 We do not need any parentheses we can just copy names so get random computed one two and three times. 02:56.250 --> 03:01.860 So let's not jump into chrome and let's see what up and so as you can see I've already opened the page. 03:01.910 --> 03:08.370 I'm going to refresh and if we now zoom in as you can see the method is being called three times. 03:08.370 --> 03:15.740 Therefore we get three different random numbers as you can see why the computed property is that he's 03:15.750 --> 03:18.520 showing us the same number. 03:18.630 --> 03:21.030 And that's because the value has been cached. 03:21.270 --> 03:26.700 As we've said it is important to think about the computed properties as an extension of what we define 03:26.700 --> 03:30.370 in the detail object basically an extension of our data model. 03:30.690 --> 03:36.480 And that's also why we have this difference as you can see if I remove the parenthesis from get a random 03:36.480 --> 03:40.090 number we get the function native code. 03:40.200 --> 03:49.170 But if I try to add them to a computer's property and if we now refresh the page we see that everything 03:49.290 --> 03:50.550 kind of crashed. 03:50.550 --> 03:58.050 Let's open up the development console console and zooming in we can read a useful error message which 03:58.050 --> 04:03.300 says get random computed is not a function of course it's a computed property. 04:03.300 --> 04:08.960 Let's now go back to the editor and let's make another example because as we said of course the computer 04:08.970 --> 04:12.630 properties are really useful especially when you need to process some data. 04:12.780 --> 04:20.460 So going back to the main dot the G.S. file I'm now going to define a data object inside the detail 04:20.460 --> 04:20.940 object. 04:20.940 --> 04:25.140 I'm going to define first name John. 04:25.410 --> 04:29.820 And last name though. 04:30.390 --> 04:36.520 And we can now define a computed property to get the full name of John Doe as if that was defined inside 04:36.520 --> 04:37.980 the data model itself. 04:37.980 --> 04:44.910 So I'm just going to call the full name which is often the case meaning you often call these computed 04:44.910 --> 04:48.090 properties as if they were a value in say the detail object. 04:48.470 --> 04:51.930 So yeah I'm simply going to refer back to excel. 04:53.050 --> 05:06.160 So these dot first name like so then a whitespace and then yet these dot last name. 05:06.160 --> 05:11.510 Get out go back to the HMO file and just use full name like so. 05:11.510 --> 05:13.320 So maybe it be our tag. 05:13.750 --> 05:24.650 Maybe an age 3 under your full name and then full name like so let's go back to grow up. 05:25.170 --> 05:29.770 Let's refresh and it is the full name is John Doe. 05:29.860 --> 05:32.410 And let's now make it one last example. 05:32.460 --> 05:37.560 Going back to the main DOJ yes file I'm now going to define another computed property and let's say 05:37.560 --> 05:44.620 this time we want to reverse the version of its full name so reversed. 05:44.850 --> 05:45.890 Full name. 05:45.890 --> 05:48.170 So to expand a window like so. 05:48.290 --> 06:01.610 So this is going to be first equals this not first name that split dot reverse dot join like so. 06:02.220 --> 06:10.830 So this is first let's define last of course this is going to be last name. 06:10.940 --> 06:11.810 And yeah we can pass 06:16.890 --> 06:23.220 last and now going back to the H demo file we can now use the reversed version of the name. 06:24.510 --> 06:32.220 So reverse full name. 06:32.330 --> 06:34.710 Let's go back to crawl. 06:34.740 --> 06:37.860 Let's refresh and that it is awesome. 06:37.920 --> 06:40.070 So let's now go full screen wave crawl. 06:40.110 --> 06:43.280 Let's open up the console. 06:43.290 --> 06:47.000 And so yeah I'm just going to change first name so rapidly. 06:47.070 --> 06:55.920 First name equals Max and as you can see now that one of the values used in the processing has changed 06:56.040 --> 06:58.260 the value returned to change accordingly.