JavaScript Decorators ( Understanding Class and Property Descriptor Decorators )

[@alirazzaq1541]

Haven't seen a better explanation of Decorators than this. Thanks.

[@devilthemes]

your explanation is so much simple and every one can understand.

[@Techsithtube]

Thanks for the comment.

[@satyaprakashkumawat6575]

Was watching a tutorial on udemy about angular and wanted to know the use cases of decorator. Now I am watching all the tutorials of this guy. Amazing explanation. Thanks

[@atarazavi133]

Always the best place to understand complicated concepts... Thanks

[@gilbertrosario8633]

I am learning NestJS which is a Node.js framework that uses TypeScript decorators and I was at complete lost with the concept, but after watching this video I finally understand what decorators do. I may not know what the decorators of a given framework are doing under the hood but I least now I do know how they work. Thank you very much sir for this simple explanation for what it seems a complicated topic.

[@Techsithtube]

Gilbert, when i first learnt Decorators i was very confused. So , I wanted to make it easier for everyone. thanks for watching.

[@vijayswarnkar9239]

I have gone through the complete series. Thanks for your efforts to make these complex concepts like home.

[@fredpies]

really to the point.. decorators are something like syntactic sugars for property descriptor filter functions

[@georgesaeid7231]

This is the best out there in explaining decorators. Thank you.

[@RobertHieger]

Thank you for providing such an elucidating video tutorial. I must admit that I am still a bit foggy on decorators because I have not been made aware of the undergirding principle of prototype inheritance that you touch on. I will have to get back to this. But as I am now in a bootcamp program with Woz U and we are studying Angular, your video has proven of help. I look forward to viewing your other tutorials.

[@FredoCorleone]

Shorten getColor() with get color() then you can access the method like a property instanceCar.color. Anyway this indian guy is the best on teaching things, straight to the point.

[@tekbal]

Awesome explanation. Quite didactic. The girl with lipstick example is on point. Although my brain exploded a bit on the part where you decorated the property of the class to change the descriptor.

[@Techsithtube]

Glad it was helpful! :)

[@nafeesahmed4942]

Great explanation, please also include some tutorials regarding functional programming( map,reduce,filter). there are many tutorials but your explanation way is very nice.

[@elfpimp1]

Nafees abbasi I thought he had those. I'd like to see them if he doesn't.

[@andreascarpa7143]

Very clear, I've really appreciated. Thank you so much

[@hayatasuenaga7028]

I always appreciate your easy explanations!

[@sudharsan.ravikumar]

Great, I understood 100% of the content in this video, Every detail was useful.

[@akashpal9691]

My js knowledge has tremendously improved from your channel, hoping for angular 4 tutorials soon.

[@Techsithtube]

I am glad that it helped. I will start angular tutorials from next weeks. Thanks for watching!

[@guidingpanda]

I really appreciate this tutorial, for this has made Angular code reading/understanding really simple!!

[@Techsithtube]

Yes its very important to understand decorators before starting angular ! Thanks for watching! :)

[@RahulSingh-ex2sm]

Great way of explaining this complex concept! Thanks!

[@Techsithtube]

This one was hard to explain . but there is always a way. :)

[@RahulSingh-ex2sm]

@@Techsithtube when I tried the same code it gave error why??. It want me to declare lips as static variable bcz we r accessing this with class name directly . error were: 1>Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option `to remove this warning. when i resolved it by configuring "tsconfig" it showed me the error i.e " lips not declared! " then i resolved it by declaring a variable which is static! and it worked.. But why it didn't worked as i copied paste ur code ??

[@Techsithtube]

Decorators are not in JavaScript yet. they are being considered. However they are part of TypeScript spec. that is why you had to add that line.

[@armarcorry3372]

Thank for these tuts, you are a very good teacher.

[@buncha1499]

Thank you Techsith I always enjoy learning from you

[@nabiisakhanov3522]

10/10 man best explanation

[@Techsithtube]

Thanks for watching..

[@arthur8888ab]

Thank you for the clear explanation.

[@pouyajabbarisani]

Is was simple, useful and straight forward. thank you, man!

[@sourabhmunjal3830]

Good work, Addy Osmani

[@100krishna100]

Thanks for the tutorial. @8.57 => I believe the program is not throwing an error because the code might not be in strict mode. 'use strict' will throw an error if we try to update a non-writable property or method.

[@srinumajji501]

Nice tutorial Gurujiii, Thanks for sharing these kind of tutorials to us

[@phplaw]

I really love your video, easy to understand, hope you keep your love on making video. Thanks

[@MrMarkgyuro]

thank you! easy to get the idea with your explanation :)

[@TottiBln]

Best explanation, ever!!! Thank you!!!

[@betelhemtesfaye7838]

Thank you Sir! It really helps.

[@horizoncoding_]

earrings and lipstick, thanks, it's fare more original and grabbing than foo / bar, thanks for the tutorial

[@naj4163]

Good explanation, thanks

[@MohamedShedo]

it's really cool man. you 're awesome

[@AbhishekNigam]

Lucid explanation!

[@shyam123m]

Super. Very useful. Thanks Sir.

[@paulinasurazynska8516]

super well explained, thank you so much! :)))

[@RajeshWellington]

Can you do a video for 'async' and 'await'?

[@vigneshbalachandran9704]

He already did

[@anaghasalvi8364]

Thank you so much

[@Techsithtube]

You're most welcome

[@jamalguyo4635]

your tutorials are amazing. watched almost all your playlist. can you create one with how to create javascript library like jquery from scratch. will really appreciate

[@Techsithtube]

Sure i think that is a great idea. I will create on soon .Thanks for watching!

[@Valsenasd]

Man, you are awesome

[@seenuvasanv]

yes, it is much simpler. thanks.

[@siddhivinayaka3141]

@techsith, firstly nice tutorial. Wanted to know. What exactly different between mixins and decorators? Mixins: Additional functionality of multiple objects and given as separate one object. Decorators: Also modifies the object instance directly. Can you clarify on this? Thanks in advance.

[@hugofilipeseleiro]

Thanks man !!

[@itsrahimuddinkhan]

Nice explanation. Please provide lessons on Angularjs 2.0

[@Techsithtube]

That is my next plan. I am working on it right now.

[@itsrahimuddinkhan]

techsith Thank you

[@ManOnHorizon]

Thank you for this series, but there is no class mixins tutorial: neigher in the playlist nor on the channel. Are there some plans to produce that one or is there some kind of a problem? Thank you one more time)

[@nikhilkulkarni2556]

I did not understand the purpose of "$" in the program @5:34

[@free3style787]

It's the ES6 template literal syntax: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals.

[@dmitryscherba5758]

I've watched the vid several times and I still have questions: like how and when the decorator function is called? How does readonly decorator accept the 3 arguments? I assume it takes the method as a target, but where does it get the key and descriptor? Does it call Object.defineProperty under the hood?

[@dayanromo]

Excellent!

[@elfpimp1]

So, when I first started at Codefellows here in Seattle around March timeframe, they had us using Atom for editing, for this latest course, "full stack Javascript " the instructor has us using VS code. I was wondering if you could do a vid maybe comparing, pros and cons, ease of learning, etc...

[@Techsithtube]

Sure I think that would be a good topic. I have used both so I can do a good comparison. Thanks for watching! :)

[@elfpimp1]

techsith that's groovy! Just don't stretch yourself too much. I saw a vid on YTs compensation model and honestly, I feel for content creators who are trying to do YT full time.

[@meetshujah]

you nailed it Allah bless you.

[@gopikirshnasathyamurthy4968]

I think you have to have 'use strict' if you want to see error when overriding an immutable value

[@yassine_klilich]

great explanation (y) (y)

[@sabareeshk976]

Thanks for the tutorial

[@Techsithtube]

Thanks for watching!

[@gabrielfono844]

clean

[@RajeshWellington]

What do you think about React License patents?

[@Techsithtube]

I don't like it. I think it's not nice to people who are using it thinking that its free. I would say move to either ember or vue. which are not supported by big corporations. WHat do you think?

[@RajeshWellington]

I think they took a big step moving from BSD + Patents to MIT license, Even though they aren't much difference. We should stick to React because MIT-licensed projects can be used/redistributed in BSD-licensed projects (but unless there are modifications, the users can get it from the original sources also. BSD-licensed projects can be used/redistributed in MIT-licensed projects. MIT license allows for distribution without contribution credits; BSD doesn't. So this major change makes sense right??. We can fall in love with React more and more.

[@Techsithtube]

As a developer it wont make much difference. Its only for a company when you have to deal with FOSS and licensing. There are some legal situations that can create problems. But I guess they will have to figure it out.

[@mdnaembhuiyan3073]

please make a tutorial on typeScript

[@Techsithtube]

Will do , thanks for watching!

[@eugenekhristo7252]

10:22 - return descriptor; is not necessary

[@moneyharry]

yes, it isn't.

[@shujaatali8414]

you are guru, keep it up (Y)

[@michaelerwin8744]

So does it mean whenever a decorator @readonly is used in a function or class it automatically receives all the object parameters (target, key, description)?

[@Techsithtube]

Yep. basically it decorates ( adds ) those properties to the class

[@sergioangel8362]

@techsith sorry still not clear. In this example readOnly takes target, name, descriptor. But you don't pass anything into readOnly when you place it on top of getColor. So does this mean the decorator looks for 'this' to pass in 'target' and what ever is underneath it will be passed in as 'name'? And where does it get the value of descriptor? Sorry hope my question makes sense.

[@federicoperalta9245]

@@sergioangel8362 We are two now. Still not clear.

[@naruto5437]

loved it

[@maskman4821]

cool, though I don't quite understand it, I have some idea and the concept is clear, it would be better to explain through an actual example like a game or the one you used in angular.

[@Techsithtube]

I am building a series on angular 4 . so soon you will see decorators in a practical application

[@maskman4821]

thanks so much for the reply, seems decoration is a must know topic.....

[@johnb1391]

Hi Stephen. So the basic idea behind the Decorator pattern is that you can easily attach additional things to an item. There is a Github repo (written in Java, NOT JavaScript) called "Starbuzz" that showcases how to use Decorator pattern for making a Point of Sale (POS) application for a coffee shop. Read below for further example for the principle behind Decorator design pattern: When you order a cup of coffee at a coffee shop, there are many different versions of coffee that you can get. Let's ignore different coffee blends for the moment. You could get "black coffee", which is just plain coffee with no milk added or sweeteners like syrups. But maybe plain coffee is too bitter for you so you want some milk. Maybe for our coffee shop we charge 50 cents ($0.50) for added milk. Maybe you also want sweet coffee that has hazelnut flavour but that also costs more money (let us say 25 cents or $0.25). We have cost of coffee by itself. We will say it is $1.00. With Decorator pattern, we set up the application so that we can easily add on these additional items to add on to the price. So instead of writing MANY different classes all for different types of coffee (Coffee class, CoffeeWithMilk class, CoffeeWithMilkAndHazelnutSyrup class, etc), we can instead easily attach these additional items (in Java via "interfaces") to our main class, Coffee. Now we get the same performance benefit we would get from writing all those different permutations of possible classes but without writing too much extra code. This is the main idea behind Decorator class. Hope it helps! Unfortunately I cannot find many examples of Starbuzz example like specified above with JavaScript (only with Java, COMPLETELY different programming language!). But I hope this helps explain the idea behind the design pattern and what it is used for. When we want to add things to one original main thing, Decorator pattern helps us build that customization without adding on too many additional subclasses/functions/etc.

[@maskman4821]

thank you so much for the detailed explanations!!!

[@Techsithtube]

thanks John this is good info.

[@nikhilkulkarni2556]

I did not understand the purpose of "$" in the program @5:34 "$" is used in regular expression in javascript. Have you used jquery or angular js

[@Techsithtube]

the $ here is actually template string. for more details look at this video kzbin.info/www/bejne/q3TGqX6mlK2Vgc0

[@nikhilkulkarni2556]

I will watch the video of template string and will get back to you.Thank you for quick reply

[@cyrusbfbulan6573]

sir..please need your help.. i know its out of topic my Sublime IDE accidentally i got a mistake in pressing hide the Tool Menu.. i cant work/practice please anyone help me i am a new in this world please..

[@Techsithtube]

Are you talking about the tool drop down menu? on Windows ctrl+shift+p followed by 'vmen' (short for View Menu)

[@believelody5531]

What will happen if we do: redCar.color = "blue" and console.log it?

[@Techsithtube]

JavaScript all properties are public so you will be able to do console.log( redCar.color) and it will give you blue.

[@ellsonmds5310]

let log=console.log; ///Decorator ///currying ///give the color let lipstick = function(color){ //pass in the target return function(target){ //extend/decorate the target target.lips=color; ///if we want to chain methods, return the target return target; } }; //target object let girl={ info:function(){ log('I have '+this.lips + ' lips!'); } }; ///Usage lipstick('red')(girl).info();

[@Techsithtube]

Thanks for sharing :)

[@Oswee]

Kinda great video, but.... it does not "click". More practical "Where and Why" would be great.

[@creative-commons-videos]

but sometime decorators can do damage as well :)

[@mariumgoraya4363]

Thanks for such a nice video sir, but i have a question. By applying @decorator on classes and on methods of the class , all objects of that class will have same behavior, but i have read that decorators can change the behavior of individual objects dynamically with out affecting the other objects of that class. will you please elaborate how we can achieve this in javascript

[@j.almadhaji]

so confusing can you make a module tutorial video thanks

[@Techsithtube]

Here is a video on JavaScript modules kzbin.info/www/bejne/fqKsnJeagct2d80

[@hmalintsyan6360]

I really want to understand decorators but nothing works , and i get very upset((((

[@Techsithtube]

I am assuming you are referring to Angular Decorators. Decorators are complicated. Hope you get some understanding of how it works from this video.

[@ronidey380]

Sir why do you crop your videos too much?? It breaks the rhythm

[@Techsithtube]

Sorry about that , in newer videos i do that less .

[@kalleneumann203]

I like your tuorials better when you keep them unopinionated about role models :/

[@shyama5612]

The dislikes are probably from those who clicked looking at the girl pic with the lipstick

[@Techsithtube]

Shyam, in my expreience, people always are going to dislike, :)