1 00:00:02,260 --> 00:00:08,020 And that leaves us with the proxy API, just like the other features here it's basically a meta feature 2 00:00:08,320 --> 00:00:17,380 which allows us to tweak our objects or add some extra functionality to our code that kicks in when 3 00:00:17,500 --> 00:00:19,320 our people work with our code, 4 00:00:19,330 --> 00:00:21,700 which is why it's called meta programming. 5 00:00:21,730 --> 00:00:28,750 We configure our code to behave in a certain way when other people use it, which is this extra level of 6 00:00:28,840 --> 00:00:30,700 thinking we added here. 7 00:00:30,730 --> 00:00:37,900 Now the proxy API is all about creating so-called traps for certain object operations and you can 8 00:00:37,900 --> 00:00:42,160 almost take the words trap here literally. With the proxy API, 9 00:00:42,160 --> 00:00:46,030 you can step it up on certain operations and execute your own code, 10 00:00:46,060 --> 00:00:52,090 for example if someone wants to retrieve a property, so the value for a property of an object, with the 11 00:00:52,090 --> 00:00:59,470 proxy API you can set up some logic that runs in that case which allows you to either change what is 12 00:00:59,470 --> 00:01:06,970 returned or do some additional task, again for this meta level where you might want to track property 13 00:01:06,970 --> 00:01:12,730 access or make sure the objects your library exposes are used properly. 14 00:01:12,730 --> 00:01:18,450 So again, it's an API that allows you to control how your code is used and which impact it has, 15 00:01:18,460 --> 00:01:24,060 now let's see it in action. To see the proxy API in action, 16 00:01:24,060 --> 00:01:31,030 I'll comment out this delete property line here and instead now start working on this course object with 17 00:01:31,030 --> 00:01:32,350 the proxy API, 18 00:01:32,500 --> 00:01:35,640 so let's see what the proxy API can do for us there. 19 00:01:35,860 --> 00:01:42,040 When I say the proxy API, I mean that there is a special object in Javascript called proxy which you 20 00:01:42,040 --> 00:01:43,450 can actually instantiate, 21 00:01:43,540 --> 00:01:50,950 this creates a new proxy object if you want to call it like this. Let's store this in a constant which I'll 22 00:01:50,950 --> 00:01:56,940 name pcourse for proxy course because I will apply this proxy to this course object 23 00:01:57,100 --> 00:02:01,120 so that we have this special course object thereafter. 24 00:02:01,230 --> 00:02:08,530 Now this proxy constructor function takes the object on which this proxy should be applied, 25 00:02:08,530 --> 00:02:12,700 so here I'll pass in the course object, I will point at the course object. 26 00:02:12,700 --> 00:02:19,960 Now the name proxy, you might know that from networking, you can use a proxy server to disguise your 27 00:02:19,960 --> 00:02:27,430 IP address for example, to basically reach out to the web by funneling your traffic over another server 28 00:02:27,520 --> 00:02:31,120 which then is actually the server talking to the web sites and so on. 29 00:02:31,150 --> 00:02:32,800 Now here it's kind of similar, 30 00:02:32,800 --> 00:02:36,840 you wrap an extra object around your existing object, 31 00:02:36,910 --> 00:02:40,890 we wrap an extra object around the course object. 32 00:02:40,990 --> 00:02:43,260 Now that alone wouldn't be that useful, 33 00:02:43,270 --> 00:02:47,350 instead this proxy constructor actually needs two arguments - 34 00:02:47,350 --> 00:02:50,290 the first argument is the object which you want to proxy, 35 00:02:50,320 --> 00:02:57,820 so which you want to wrap, the second argument is another object which defines certain handlers for the 36 00:02:57,820 --> 00:03:04,000 wrapped object, so certain behaviors or certain operations you might want to perform on the wrapped 37 00:03:04,090 --> 00:03:11,080 object where you can then step in. For that, I'll create a new object here and store it in a constant named 38 00:03:11,080 --> 00:03:12,420 course handler 39 00:03:12,580 --> 00:03:20,290 and in this object, you got certain handler functionalities, certain traps as they are called which you 40 00:03:20,290 --> 00:03:21,160 can define, 41 00:03:21,160 --> 00:03:28,660 for example a get trap. Now the names you can use here are clearly defined and attached you find a link 42 00:03:28,660 --> 00:03:34,390 to the MDN documentation on the proxy API where you'll find all available traps and all available 43 00:03:34,420 --> 00:03:43,330 operations you can listen to and step in. Here with get, I define a handler, a function in the end here 44 00:03:43,330 --> 00:03:52,030 with this method syntax, which is executed whenever someone tries to read a value from the wrapped object, 45 00:03:52,030 --> 00:03:59,070 so whenever someone tries to access a property, tries to get a value from a property of the wrapped object. 46 00:04:00,010 --> 00:04:07,660 The get method then takes two arguments which are passed in automatically by the proxy API, the object 47 00:04:08,380 --> 00:04:16,710 on which this get access happens which is our wrapped object then and the property name on which this 48 00:04:16,720 --> 00:04:19,530 happened. Now 49 00:04:19,530 --> 00:04:29,610 for now I will just console log property name here and then return object [property name] 50 00:04:29,620 --> 00:04:36,180 which means for the wrapped object, I access this property name which you tried to access and I return a value 51 00:04:36,180 --> 00:04:42,540 which is stored in there, which means I forward this value retrieval request without blocking it, without 52 00:04:42,540 --> 00:04:48,210 changing it, I just retrieve the value which someone try to get for this object and give it to that 53 00:04:48,210 --> 00:04:49,270 someone. 54 00:04:49,280 --> 00:04:54,480 Now this course handler object is then the second argument I pass to my proxy and with that, we got the 55 00:04:54,480 --> 00:04:57,750 readily configured proxy object. 56 00:04:57,750 --> 00:05:06,320 Now let's see what happens if I try to access pcourse.title. This title property does exist on 57 00:05:06,320 --> 00:05:13,340 this object because the proxy object which is actually stored in pcourse wraps itself around this 58 00:05:13,520 --> 00:05:21,140 wrapped object and basically assumes all of the properties and methods of this wrapped object, just funnelling 59 00:05:21,230 --> 00:05:26,060 all access through the traps you defined here in the handler. 60 00:05:26,060 --> 00:05:32,870 So now if we save that and we reload, I do print my title here but you also see this output here, which 61 00:05:32,870 --> 00:05:36,920 is coming from line 98 where I print title. 62 00:05:37,130 --> 00:05:42,350 This is coming from my handler here where I log the property name and this shows that this code indeed 63 00:05:42,440 --> 00:05:45,950 is executed. Whenever I try to access a property, 64 00:05:45,950 --> 00:05:53,780 this code executes and tells me which property I try to access, the titled property and if I'm interested 65 00:05:53,780 --> 00:06:01,220 for which object I tried to do that and then here I actually define what, for this get trap, is returned 66 00:06:01,550 --> 00:06:08,030 Here I'm just getting the user who try to get this property the actual value but we could return anything 67 00:06:08,030 --> 00:06:10,250 here, like the something string. 68 00:06:10,250 --> 00:06:15,950 If I do that and I try to console log the title, you see instead of logging Javascript - The Complete Type, 69 00:06:16,490 --> 00:06:23,740 I log something because I override what I fetched here with the help of the proxy API. 70 00:06:23,930 --> 00:06:30,040 Please note that neither course nor pcourse were changed by that proxy. 71 00:06:30,110 --> 00:06:34,340 If I save that and reload, you see I return something here 72 00:06:34,580 --> 00:06:40,940 but we got the titles still set to Javascript - The Complete Type, both in our original object but also 73 00:06:40,940 --> 00:06:46,730 in the proxy which wraps this object as you can see. So the title was not changed, 74 00:06:46,750 --> 00:06:53,800 I only have this trap which steps in whenever you try to get any value of any property and which then allows 75 00:06:53,800 --> 00:06:55,210 you to do stuff. 76 00:06:55,300 --> 00:06:58,070 So here I am hard overridding what we returned, 77 00:06:58,180 --> 00:07:06,490 a more useful behavior could be that I for example check if object property name is a thing and if it 78 00:07:06,490 --> 00:07:11,860 is, I return that or with the shortcut you learned about at the beginning of this course, 79 00:07:12,010 --> 00:07:18,560 I return not found. By doing that, I make sure that accessing the title should work 80 00:07:18,720 --> 00:07:23,110 but for example if I try to access a length property which does not exist, 81 00:07:23,280 --> 00:07:27,780 instead of getting the default value of undefined, I now get not found. 82 00:07:27,840 --> 00:07:32,840 So if I reload here, we get the title but then not found instead of undefined. 83 00:07:33,270 --> 00:07:37,760 So this might be a more useful scenario where we could use the proxy API, 84 00:07:37,800 --> 00:07:43,980 now all of a sudden we're not using it to block access or return some dummy value but instead we're 85 00:07:43,980 --> 00:07:47,790 using it to improve the usage of our object, 86 00:07:47,790 --> 00:07:51,290 again keep in mind we're talking about meta programming here. 87 00:07:51,360 --> 00:07:57,750 If you're writing a library which you are exposing to other users, then these users might use your exposed 88 00:07:57,780 --> 00:07:59,490 object incorrectly, 89 00:07:59,490 --> 00:08:05,580 maybe a developer writing some code based on your library tries to access a property which doesn't exist 90 00:08:05,670 --> 00:08:08,520 in the object your library returns. 91 00:08:08,730 --> 00:08:14,030 Well by default, this would give the developer undefined, maybe for your library, 92 00:08:14,030 --> 00:08:19,710 you don't want to return undefined but return some other default value, like not found or a number or 93 00:08:19,710 --> 00:08:24,030 another object or whatever it is and then you can just do that. 94 00:08:24,030 --> 00:08:28,920 Of course you could also take into account which property the user try to access, 95 00:08:28,920 --> 00:08:34,920 if the property name was length here for example, you could return something else and just have this 96 00:08:34,920 --> 00:08:38,120 default fallback for any property not named length. 97 00:08:38,400 --> 00:08:44,370 So for length, we could return a number of zero and only return not found for any other property which 98 00:08:44,370 --> 00:08:47,620 didn't exist, like rating for example. 99 00:08:47,810 --> 00:08:54,330 And now with that, if I save that, you see I get the title, then zero for the length and then not found for 100 00:08:54,330 --> 00:08:55,530 the rating. 101 00:08:55,590 --> 00:09:01,680 So that's what you can do with the proxy API and the get trap. Now we don't just have the get trap though.