Introduction to Javascript ES7 Decorators and Descriptors

Key Takeaways

What's going on guys? How are you doing? And welcome to a brand new video tutorial from I Dream Us. Today we're going to be talking about a little bit of how you can work with JavaScript ES7 decorators. So, decorators are a new way to be able to add functionality and manipulate the standard data objects or data types of the JavaScript in an easy way. So, it actually easily allows you to manipulate the meta data of your JavaScript objects, either classes or even methods and functions. So, you can add meta data into that functions. You can get like um the reference of the function and you can manipulate it. You can create a new function depending on the current function. Or the best thing you can do is actually you can chain classes and create instances uh together from that. So, if you're familiar with Angular, it uses a lot and it actually depends a lot on decorators. So, we actually use decorators for making um things possible like uh dependency injection and chaining methods and all of different things and having a singleton instance throughout the whole application of class services and stuff like that. So, we're going to be learning in this on how you can use this for um JavaScript and ES7. So, I've got a project in here and it's pretty simple project for that. I've got it Just let me just going to open up this. So, this project in here actually runs Webpack with Babel. And Babel in here we've got to use a specific plugins uh to be able to use the new feature of um decorators because they are still in the stage two of the ECMAScript proposal standards. So, you've got to just go ahead and use Babel as a plugin in order to be able to do that. So, make sure to go ahead and install the Babel plugin proposal decorators and uh set the language to true inside of the Babel RC. If you know familiar with how you can set up Babel, make sure to go ahead and check out how you can do really that. And uh on the other hand, there's actually a Babel preset environment. So, the preset environment in this case actually also also to work uh with decorators and it has like the new version or pretty much also work with ES6 and ES7. Uh more specifically, ES7 because decorators are available on the JavaScript or ECMAScript ES or pretty much 2016 version. All right. All right. So, this is where probably you need to go. Uh for also for the configuration, just config.json, make sure to set the compiler options and experimental decorators to true. Otherwise, your code editor in this case, Visual Studio Code, won't work with it. And it's just going to give you like a quite some issues working with decorators. So, make sure to set that that true because they're still experimental. So, it's not really recommended to work with it uh in like um production build website or something because there's a still a lot of changes coming up to the decorators though, but you can just go ahead and work with it. The final thing in here we've got is Webpack to work with Babel and um just actually compile our code that we've gotten here. The entry point is index.js and we're finally just outputting into the app.js inside of the distribution folder. And um the as I've said, the entry point is index.js and we've got everything inside of that. So, this is pretty much simply what we're doing and we're simply running the watch in order to run um you know, the watch in here and save everything, compile everything and bundle it. Then we can just go ahead and load in the browser. I've got to use like the live server extension from Visual Studio Code in order to like create a server in here and work with the index.html. For this HTML, we simply just load in the app.js which you know, the bundle size or the final bundle came up from the Webpack actually and we can we can simply just go ahead and work with it without any problems. So, this is basically all you need to do for working with that. And then you can go ahead and start working with um pretty much decorators and how you can use them in your projects. So, before we jump into decorators, there's really small thing that you need to learn before or know how to manipulate and work with. We need to look on the object property descriptors. So, what are property descriptors? It's pretty much what describes a property inside of a JavaScript standard object. Each property has either a function or pretty much a normal property inside of a function has its own descriptor which tells JavaScript how to properly manipulate the object uh property. And uh this is a really important thing to learn about. So, as we are JavaScript programmers and developers, we we know how to create an object like we create an O and it's going to be a normal object that has has an A uh like name in here and has a B like something like this an age or something. But we don't really know how you manipulate the basic or how to go low level and manipulate these properties inside of a normal object. And we don't know how JavaScript treats those and how it actually works with it. So, this is where it comes property descriptors. So, each property in this case has its own meta data inside of the object in order to describe the property. So, either the property is going to be um writable or read-only. So, this also has in that either enumerable which pretty much allows it to get listed inside of an array in order to have like um a for loop inside of it to work with the property or not. You can also have like configurable so you can easily configure the descriptor like you can manipulate or change the descriptor and add and update it as uh however you want or it's just like read-only and you cannot change the descriptor and so on and so forth. So, this is pretty much what property descriptors are. In order to work with property descriptors, so um let's just going to try to get the property descriptor of A in this case. So, the property descriptor of A, we're going to go ahead and use the object. So, um we're going to be using the standard objects class. And I'm going to get get own property descriptor or you can get it like a descriptors which returns an array. So, here you give it the actual object which is going to be O. And here is the string which means the property name. So, we need to provide the property name inside of a string and it's just going to be returning the descriptor. So, A descriptor. And now we can just go ahead and use console.log. So, we can say descriptor A descriptor. Simple as that. So, you can just go ahead and refresh that. And there you go. We got descriptor and pretty much as clear as you see, it returns an object with configurable or set to true. And that means we can go ahead and easily descrip like manipulate the descriptor of the A property. We can change it and we can manipulate however we want. We've got the enumerable which is true. So, it can easily get listed uh on an array whenever we try to get like the keys of the object or something like this. So, you can easily enumerate throughout this uh property. This is the value which pretty much represents the value of the current property and writable or not. So, you can easily change the value once it's created or not, either read-only or not. So, this is the actual property says that. Now, let's say we want to create another property here say and um like we're going to get a new object reference though, but uh we can just go ahead and like create that using the object.create method. So, I'm going to be creating like objects one or something. Uh anything like that. And I'm going to use the object. So, I'm going to use the object.create. All right. So, the create method in here where it takes first it takes actually the object prototype. So, as you if you're familiar with prototypes and how they work like in the prototype chain, you're going to first provide it the prototype that's going to inherit from. And I'm going to use the base prototype of object.prototype. The second thing it takes in here is actually the project or properties descriptor map which means the key is going to be the name of the property that's going to be added to the object. And the value of this is going to be the object of the descriptor. So, the same values that we've put in here. If you just like omit any value or not put it inside of the object, it's going to just take the default value. So, for this I'm going to just be saying like configurable set to false which means we cannot change the descriptor whatsoever. We cannot update it. Once it's created, it won't be able to update it. Um like writable, so it's going to be also set to false so you can't actually update it or anything. And enumerable, I'm just going to set it true in here. And you can set the value uh to anything. So, do anything like that. And and that's pretty much how you can create the object. So, after saving this, it's going to create a new A reference of the object. And you can just go ahead and do console.log. It's going to be a normal object so you can take a look and check it out how it works. Uh you can also use the object.getOwnPropertyDescriptor. And this one is going to be pretty much like returning uh the actual object. So, we can give it the name. So, um I don't know. Let's put it in here. It's going to be A as we're used to. So, there you go. So, we save that and uh there you go. So, we got A is actually set to anything for the actual object. And we when we look on the descriptor of the A, the same thing as we've said like configurable false, enumerable true, and so on and so forth and so on and so forth. So, this is pretty much how it works. If you want to update like a descriptor, you can use the object.defineProperty. And here you can give it the object reference like objects one. And the second thing it takes the property name. The third thing it takes actually the like the property descriptor like you want to set for the um pretty much the new property that you've set in here. Of course, you can work with methods or functions inside of like the object without any issues or problems without any problems. So, this is pretty much how projects or property descriptors work. And they're very important in order to understand how um decorators work and how like you know, property descriptors are super super important in this case for um decorators. So, let's just go ahead and jump into decorators. So, simply decorators are the functions that can manipulate the base meta data of another functions or it can add data to it or it can even return another function um when it's assigned to the current function. So, for example, you're going to try and put a class. This class is going to be I don't know, say a user class. So the user class is going to have a constructor. As we all know, there's constructors like when you have seven, there's actually first name and a last name taken for this and we can just go and do this. First name equals first name and this last name equals last name. Simple as that. It's not really that complicated or anything. So this is pretty simple. We can just go and create a method in here. So we get full full name from the user and this is going to return a concatenated last name and first name. So this we're going to plus we're going to plus just an empty string saying just do first name. So it's simple as that. This is how we can do it. You can go create an instance like the user equals new user and we can pass it in here Brooks and Alex or something. Anything like that can do the job. You can go and do console.log. So you can say user and it's going to be user.get full name. It should pretty much return the full name for us. And there you go. You got user Brooks Alex and it pretty much works pretty much fine. Now in this case, we can easily hack this method and we can change it and manipulate it however we want. So what we want is to create a decorator that can actually assign into a specific method and make it a read only. And that's of course going to be using the help of descriptors because descriptors holds the data of a property either to set it writable or not. So this way JavaScript can know to manipulate or you can update this specific property inside of the object or not. And remember classes are normal JavaScript objects after all because they're just like syntactical sugar. So after all in the JavaScript is going to be treated normally as an object. It has a prototype. It has everything. It's only just like a constructor. You can even create your own classes using chain functions with the prototypes. But it's better to work with it this way. So here what we want is to create a decorator. So we're just going to try to define our first decorator. It's going to be a read only decorator. And as I said, decorators are simply a normal function. So I'm going to do function and it's going to be like read only decorators. I'm just going to do read only. And for the decorator functions by default, it takes three main arguments. So it's the the target. So the target in this case going to be representing the current target that is running on the current class. Or then we're going to have like the property. So the current property that we are targeting. And the last thing is going to be the descriptor of the current property that's going to be assigned to. So this is going to be the descriptor. And this is going to be much be the function. In the function, what we need to do, we can manipulate the descriptor. We can get the data from the target or anything like that. But what you need to do and what you're required to do in order to make this is a valid decorator is you need to return a valid descriptor that's going to be assigned later on for the current property. So here we need to like we can do directly return the current descriptor and there's no changes. But what we want is actually to set the current descriptor to writable. And remember there's a writable property inside of every single property belongs to a standard JavaScript object. So we can set this simply to false and that's going to make it a read only. So this current property we won't be able to change it or cannot be able to change it. So it's just going to throw up an exception whenever you try to manipulate the method or the function and try to like tamper with it or update it or change reference. So this is simply all you need to do. Just like change the descriptor and pretty much returns a new descriptor. Here for working with decorators, you need to use the @ character and you assign the name of the function of the descriptor. And if you have like any wrapper functions or something, you don't really need to like call it with the bracket in here or the parentheses because it doesn't really need that because it's not going to be executing the function anyway. So you just put it like this way. You just save and there's no changes actually. But what we try to do is actually we can go and throw out the user. So we access the user. We access the prototype and we try to tamper with it. So we can do like the get full name is going to equal to a new function. So this is going to be going to function. What it's going to do is just going to go and console.log hacked. And you can just going to see that there's no changes whatsoever because it's just going to like have a read only. So it doesn't change it whatsoever. And we can move this code a little bit like have above this one in order to see the changes. But there you go. There's no changes. It still output the same thing Alex Brooks. But if we try to get rid of the read only in here and we save it, so we save it. There we go. We've got hacked and the user now is actually undefined because um there's nothing actually to work with and we're not printing anything because this is this is an undefined method. So there you go. So this is pretty much what you have created in here and you can easily hack functions. But using a decorator that you've just created in a really simple steps. Um So you can just put a read only and it's going to work right straight to the point. So this is what decorators are and what they're used in. You can manipulate the descriptor. You can change the value. So you for example, you can create another function or another decorator change value which pretty much has no point. But it's going to this is going to be a wrapper function. It first takes like an argument and here is going to be new value. And what it does, it returns the actual descriptor function. So this is going to be a normal anonymous function that's going to take the target, property and the descriptor. So this function is going to be assigned as our decorator. But it's going to be just a wrapper function. So we can go and call it and pass in a new value that we want to send the current like full name or the current method to. So in this pretty much case, what we can do, we can just go and do um we're going to just manipulate the descriptor. We set the value to new value. You should remember that. And we can simply just go and do return descriptor. So this is going to be assigned actually to a normal property. So if you want to do this, like you can't work with it in this case. But if you want to just go and make this happen, you can go and do it in the function. It's going to tamper the whole function. So we can do change value. We can pass it in here new value nothing or forgot about that. So just pass it this way. And we can just get rid of that because we don't need it anymore. Clearly we cannot actually call it as a function because it's not a function anymore. We tamper with it. We change the value to it to a string. We can get rid of these parentheses and it should actually print out the new value that you've put in here as get full name. So you can clearly see you can do anything with descriptors with decorators pretty much and you can work with them smoothly. So this is only for property descriptors. There's the other kind of descriptors is actually class descriptors which much more efficient and they can work much much better. So for class decorators, what you need to do instead of returning a descriptor on the function of the decorator, you simply return a constructor for the actual class because the whole class structure is actually just simply representing a simple constructor. So the whole main part of the class is the constructor itself. So in this case, what we're going to do, we're going to create a function and the simple function in here is going to just be a wrapper function. So I'm going to call it is logged in function. And here you can pass in the status to it. So it's going to just simply be a wrapper as we've done the change value decorator. And in this case, what we're going to do is actually return another function which is going to represent as a decorator. So remember that. So this is going to be our decorator function. So you can imagine it. And for every single class decorator, what it takes is actually the class reference. Like the current class reference that is going to be put it on the arguments of this. So it's going to be class reference. And as I've said before, you need to like return a decorator or pretty much a constructor for working with the classes whenever you're trying to assign it to a decorator. So here we need to return another function which is going to represent the new constructor for the class. So it's going to be a function and this function we can pass in like first name, last name as we are doing for normal So I I think I reversed it that's anyway. So function first name and last name. And for this one, I'm going to I can go and access this keyword without any issues. I can say first name equals first name and this.last name equals last name. And of course, let's say let's say since this is actually called is logged in function, we want to go ahead and set a new property which is an is logged in going to be boolean and either set the current status that you have passed in. So this is going to be this.is logged in and this is going to equal actually to status. If the status is undefined for some reason, we can just go ahead and just like by default put it into a false so the user isn't logged in or whatsoever. So this is pretty basically what it is. This is going to represent or pretty much going to replace the whole constructor. You can even here return a new class and you can inherit the class from the current class reference and you can work pretty much fine. So to go and try to use this as you clearly see class decorators, you need to put it above the class definition. So it's going to be like is logged in and here we can pass in in the status for example. I'm going to put it true because it has a default by by default. And here we can go and do is logged in. So we can go and check it out and there you go. There's a user true. So the is actually logged in it's pretty much true in here. You can do log in in order to be able to identify that really quickly. And there you go. We've got to drew if you just not passing anything in here, we save it again. So you will see this undefined because it doesn't work whatsoever. So you need to call the wrapper function in order to return the actual decorator. So if you don't going to be passing anything, we're just going to have like false by default as we've set in here. And it can work pretty much as strong as it is without any issues or problems. As I said before, you can easily work with this one. So for example, you can go and return a new class since classes are normal constructors functions. This is what it represents. So you can return a new anonymous class that's going to extends from the actual class reference. And this is going to be pretty much a normal class that can have a constructor. And there you go. This can it can pretty much work the same way as it did in here without without any problems actually. So this is this is basically all you need to work with. You can have a class reference and everything without any issues. So this pretty much what the scriptures and um well class references and decorators work. So hopefully you guys enjoyed the video tutorial. Just I wanted to point out how you can work with it. I tried to explain a lot of things and examples in order to be able to work with it properly. The best to actually way to work with decorators actually through our class decorators because property desk decorators aren't that much of great, but they still have some beneficial side. So you might want to go and use it in your projects. Why not? So make sure also to go and check out the like the statuses of the because they will eventually be added to like the standard version of ECMAScript, but it's going to take quite some time. And that's been like still 2017 or something. So that might still take a quite some time too. But I think that's for watching anyway. Hope you guys have enjoyed this video tutorial. If you have any like issues with JavaScript or anything or new features you want to discuss as video tutorials, I'm going to be very very glad to put that. So make sure to put that in comments below. I'll be very happy to check out all of comments, reply why not, and you know, put that thumbs up in there. And of course subscribe for any video tutorials and getting all the news from us. You can check out check out the ipins.com to get new written and video high quality tutorials. So I think that's for watching as I said again. See you all hopefully in the next video tutorial.