1 00:00:02,000 --> 00:00:08,000 And that leaves us with the proxy API, just like the other features here it's basically a meta feature 2 00:00:08,000 --> 00:00:17,000 which allows us to tweak our objects or add some extra functionality to our code that kicks in when 3 00:00:17,000 --> 00:00:19,000 our people work with our code, 4 00:00:19,000 --> 00:00:21,000 which is why it's called meta programming. 5 00:00:21,000 --> 00:00:28,000 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,000 --> 00:00:30,000 thinking we added here. 7 00:00:30,000 --> 00:00:37,000 Now the proxy API is all about creating so-called traps for certain object operations and you can 8 00:00:37,000 --> 00:00:42,000 almost take the words trap here literally. With the proxy API, 9 00:00:42,000 --> 00:00:46,000 you can step it up on certain operations and execute your own code, 10 00:00:46,000 --> 00:00:52,000 for example if someone wants to retrieve a property, so the value for a property of an object, with the 11 00:00:52,000 --> 00:00:59,000 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,000 --> 00:01:06,000 returned or do some additional task, again for this meta level where you might want to track property 13 00:01:06,000 --> 00:01:12,000 access or make sure the objects your library exposes are used properly. 14 00:01:12,000 --> 00:01:18,000 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,000 --> 00:01:24,000 now let's see it in action. To see the proxy API in action, 16 00:01:24,000 --> 00:01:31,000 I'll comment out this delete property line here and instead now start working on this course object with 17 00:01:31,000 --> 00:01:32,000 the proxy API, 18 00:01:32,000 --> 00:01:35,000 so let's see what the proxy API can do for us there. 19 00:01:35,000 --> 00:01:42,000 When I say the proxy API, I mean that there is a special object in Javascript called proxy which you 20 00:01:42,000 --> 00:01:43,000 can actually instantiate, 21 00:01:43,000 --> 00:01:50,000 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,000 --> 00:01:56,000 name pcourse for proxy course because I will apply this proxy to this course object 23 00:01:57,000 --> 00:02:01,000 so that we have this special course object thereafter. 24 00:02:01,000 --> 00:02:08,000 Now this proxy constructor function takes the object on which this proxy should be applied, 25 00:02:08,000 --> 00:02:12,000 so here I'll pass in the course object, I will point at the course object. 26 00:02:12,000 --> 00:02:19,000 Now the name proxy, you might know that from networking, you can use a proxy server to disguise your 27 00:02:19,000 --> 00:02:27,000 IP address for example, to basically reach out to the web by funneling your traffic over another server 28 00:02:27,000 --> 00:02:31,000 which then is actually the server talking to the web sites and so on. 29 00:02:31,000 --> 00:02:32,000 Now here it's kind of similar, 30 00:02:32,000 --> 00:02:36,000 you wrap an extra object around your existing object, 31 00:02:36,000 --> 00:02:40,000 we wrap an extra object around the course object. 32 00:02:40,000 --> 00:02:43,000 Now that alone wouldn't be that useful, 33 00:02:43,000 --> 00:02:47,000 instead this proxy constructor actually needs two arguments - 34 00:02:47,000 --> 00:02:50,000 the first argument is the object which you want to proxy, 35 00:02:50,000 --> 00:02:57,000 so which you want to wrap, the second argument is another object which defines certain handlers for the 36 00:02:57,000 --> 00:03:04,000 wrapped object, so certain behaviors or certain operations you might want to perform on the wrapped 37 00:03:04,000 --> 00:03:11,000 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,000 --> 00:03:12,000 course handler 39 00:03:12,000 --> 00:03:20,000 and in this object, you got certain handler functionalities, certain traps as they are called which you 40 00:03:20,000 --> 00:03:21,000 can define, 41 00:03:21,000 --> 00:03:28,000 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,000 --> 00:03:34,000 to the MDN documentation on the proxy API where you'll find all available traps and all available 43 00:03:34,000 --> 00:03:43,000 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,000 --> 00:03:52,000 with this method syntax, which is executed whenever someone tries to read a value from the wrapped object, 45 00:03:52,000 --> 00:03:59,000 so whenever someone tries to access a property, tries to get a value from a property of the wrapped object. 46 00:04:00,000 --> 00:04:07,000 The get method then takes two arguments which are passed in automatically by the proxy API, the object 47 00:04:08,000 --> 00:04:16,000 on which this get access happens which is our wrapped object then and the property name on which this 48 00:04:16,000 --> 00:04:19,000 happened. Now 49 00:04:19,000 --> 00:04:29,000 for now I will just console log property name here and then return object [property name] 50 00:04:29,000 --> 00:04:36,000 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,000 --> 00:04:42,000 which is stored in there, which means I forward this value retrieval request without blocking it, without 52 00:04:42,000 --> 00:04:48,000 changing it, I just retrieve the value which someone try to get for this object and give it to that 53 00:04:48,000 --> 00:04:49,000 someone. 54 00:04:49,000 --> 00:04:54,000 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,000 --> 00:04:57,000 readily configured proxy object. 56 00:04:57,000 --> 00:05:06,000 Now let's see what happens if I try to access pcourse.title. This title property does exist on 57 00:05:06,000 --> 00:05:13,000 this object because the proxy object which is actually stored in pcourse wraps itself around this 58 00:05:13,000 --> 00:05:21,000 wrapped object and basically assumes all of the properties and methods of this wrapped object, just funnelling 59 00:05:21,000 --> 00:05:26,000 all access through the traps you defined here in the handler. 60 00:05:26,000 --> 00:05:32,000 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,000 --> 00:05:36,000 is coming from line 98 where I print title. 62 00:05:37,000 --> 00:05:42,000 This is coming from my handler here where I log the property name and this shows that this code indeed 63 00:05:42,000 --> 00:05:45,000 is executed. Whenever I try to access a property, 64 00:05:45,000 --> 00:05:53,000 this code executes and tells me which property I try to access, the titled property and if I'm interested 65 00:05:53,000 --> 00:06:01,000 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,000 --> 00:06:08,000 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,000 --> 00:06:10,000 here, like the something string. 68 00:06:10,000 --> 00:06:15,000 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,000 --> 00:06:23,000 I log something because I override what I fetched here with the help of the proxy API. 70 00:06:23,000 --> 00:06:30,000 Please note that neither course nor pcourse were changed by that proxy. 71 00:06:30,000 --> 00:06:34,000 If I save that and reload, you see I return something here 72 00:06:34,000 --> 00:06:40,000 but we got the titles still set to Javascript - The Complete Type, both in our original object but also 73 00:06:40,000 --> 00:06:46,000 in the proxy which wraps this object as you can see. So the title was not changed, 74 00:06:46,000 --> 00:06:53,000 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,000 --> 00:06:55,000 you to do stuff. 76 00:06:55,000 --> 00:06:58,000 So here I am hard overridding what we returned, 77 00:06:58,000 --> 00:07:06,000 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,000 --> 00:07:11,000 is, I return that or with the shortcut you learned about at the beginning of this course, 79 00:07:12,000 --> 00:07:18,000 I return not found. By doing that, I make sure that accessing the title should work 80 00:07:18,000 --> 00:07:23,000 but for example if I try to access a length property which does not exist, 81 00:07:23,000 --> 00:07:27,000 instead of getting the default value of undefined, I now get not found. 82 00:07:27,000 --> 00:07:32,000 So if I reload here, we get the title but then not found instead of undefined. 83 00:07:33,000 --> 00:07:37,000 So this might be a more useful scenario where we could use the proxy API, 84 00:07:37,000 --> 00:07:43,000 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,000 --> 00:07:47,000 using it to improve the usage of our object, 86 00:07:47,000 --> 00:07:51,000 again keep in mind we're talking about meta programming here. 87 00:07:51,000 --> 00:07:57,000 If you're writing a library which you are exposing to other users, then these users might use your exposed 88 00:07:57,000 --> 00:07:59,000 object incorrectly, 89 00:07:59,000 --> 00:08:05,000 maybe a developer writing some code based on your library tries to access a property which doesn't exist 90 00:08:05,000 --> 00:08:08,000 in the object your library returns. 91 00:08:08,000 --> 00:08:14,000 Well by default, this would give the developer undefined, maybe for your library, 92 00:08:14,000 --> 00:08:19,000 you don't want to return undefined but return some other default value, like not found or a number or 93 00:08:19,000 --> 00:08:24,000 another object or whatever it is and then you can just do that. 94 00:08:24,000 --> 00:08:28,000 Of course you could also take into account which property the user try to access, 95 00:08:28,000 --> 00:08:34,000 if the property name was length here for example, you could return something else and just have this 96 00:08:34,000 --> 00:08:38,000 default fallback for any property not named length. 97 00:08:38,000 --> 00:08:44,000 So for length, we could return a number of zero and only return not found for any other property which 98 00:08:44,000 --> 00:08:47,000 didn't exist, like rating for example. 99 00:08:47,000 --> 00:08:54,000 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,000 --> 00:08:55,000 the rating. 101 00:08:55,000 --> 00:09:01,000 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.