JavaScript Object Property Descriptors

When you create an Object and add properties there are actually six property descriptors that you can use to define qualities of the property that you have added.
DATA property descriptors are
value
writable
configurable
enumerable
ACCESSOR property descriptors are
configurable
enumerable
get
set
You can use these property descriptors in combination with a collection of Object methods to fine tune access to your properties and their value.
See the comments in the Code Gist for a list of all the property descriptors and the Object methods.
Code GIST: gist.github.co...

[@jiharedconteh4530]

The explanation is breathtaking. It’s so simplified.😊

[@Brad_Script]

there's specific interactions between writable and configurable described on the MDN website: if writable = true and configurable = (true or false), you can modify a property with both the "value" attribute and directly on the object via dot or bracket syntax if writable = false and configurable = true, you can modify a property only with the "value" attribute but not with dot/bracket syntax if writable = false and configurable = false, the property cannot be modified in any way also if configurable is set to false, you can only modify writable from true to false, but not false to true

[@rotrose7531]

Your tutorials deserves any amount you would request, I learned a lot of tutorials so far, paid and free, but your style is impeccable. after following your tutorials for about a week or so, I am now confident to pick up again the project I left halfway because of its complexity. Thank you.

[@paulgz101]

13 minutes and you know everything about Object Descriptors. The best JS stuff on youtube. Thanks a lot! Спасибо! Obrigado! Tack! Gracias! Danke schön! Merci!

[@SteveGriffith-Prof3ssorSt3v3]

You're welcome. Ничего. De nada. Varsågod. De nada. Bitte. De rien.

[@GGGGGGGGGG96]

There are many many front-end developers, but very few are really interested on PropertyDescriptors, so I am happy to join this very exclusive club :D

[@fs17792]

Danke!

[@SteveGriffith-Prof3ssorSt3v3]

Vielen Dank!

[@anujkumarjha9454]

best explanation with source code provided. I mastered this in only 13 minutes. thank you so much.

[@kensleylewis]

Love the video notes on Object. Very helpful!

[@jeff-creations]

Thanks for sharing your knowledge on this topic Steve. I have one question though: this.value is greyed out on the set function when I copied over your code, but it did log correctly. When I configured the get/set like this the "this.value" wasn't greyed out on the set() and logged correctly as well: Object.defineProperty(obj, 'frank', { configurable:true, enumerable: true, get() { return this.value }, set(val) { this.value = val + " baby!"; } }); I'm not using modules, just plain HTML and JS. Have any idea why this.value would be greyed out?

[@SteveGriffith-Prof3ssorSt3v3]

Could be an issue with how your linter is configured. Could be the context of `this` inside of where the code is being run.

[@jeff-creations]

@@SteveGriffith-Prof3ssorSt3v3 Thanks for the reply/insight Steve. I am still learning the "this" keyword flowchart! You rock man!

[@davidhiudianto9863]

Thank you for another great tutorial! One question though, at 8:00, when we're using arrow function, doesn't `this` resolve to module.exports? And therefore `this.value = _val + " baby!"` will define another property named `value` inside module.exports? Thank you sir, your js tutorials really helped me alot..

[@SteveGriffith-Prof3ssorSt3v3]

Good question. The `this` inside the Object.defineProperty method will use the first parameter of that method as the value of `this`. Object.defineProperty(obj, 'frank', { }) So, in this code, `obj` will be used as the `this` context.

[@davidhiudianto9863]

​@@SteveGriffith-Prof3ssorSt3v3 Thanks for your reply...Out of curiosity, I did an experiment on this one, stackblitz.com/edit/node-4djxlf. I think the arrow function is the culprit here, it has indeed changed the `this` context, and if regular function keyword is used, `obj` will be correctly used as `this` context inside the get and set. What do you think? Thank you so much.

[@codewithsheikh2805]

​@@SteveGriffith-Prof3ssorSt3v3 actually no. Since you are using the arrow function 'this' in that case will be window object if you're not strict mode in browser and since node runs in something like module it will create new object property on that module object. you can recreate it yourself and see the output or see output of program I have given both with and without arrow function. const obj = {}; // Object.defineProperty(obj, 'a', { // value: 'one', // writable: true, // enumerable: true, // configurable: true // }); // Object.defineProperty(obj, 'foo', { // get: () => console.log(this) // , // set: (name) => { // this.value = name; // }, // enumerable: true, // configurable: true // }); Object.defineProperty(obj, 'a', { value: 'one', writable: true, enumerable: true, configurable: true }); Object.defineProperty(obj, 'foo', { get: () => console.log(this) , set(name) { this.value = name }, enumerable: true, configurable: true }); console.log(obj) obj.foo = 'falan' obj.foo; console.log(obj)

[@priyaranjan1733]

thank you sir for splendid explanation.. I was very much confused about these jargon phrases

[@Snoo29293]

Another great tutorial, your videos are helping me a lot.

[@Behold-the-Florist]

Your content is priceless! Thank you so much Sir! ;)

[@alfaex.]

AMAZING video Steve

[@nicolascondrea8068]

Brilliant tutorial, thank you!

[@chesterxp508]

Another very cool tutorial !!!

[@deylenergy5761]

Thanks for an explicit explanation.

[@SteveGriffith-Prof3ssorSt3v3]

Hope it helps.

[@shaikzuhair8537]

Thanks you for good explanations

[@GursewakSingh-gx6ev]

The side of Javascript that I have never seen...Thanks, Steve for such fine, granular knowledge about JavaScript. Just one question: Are you a professor ??

[@SteveGriffith-Prof3ssorSt3v3]

Yes I am.

[@GursewakSingh-gx6ev]

@@SteveGriffith-Prof3ssorSt3v3 Then I have a huge Respect for you, just keep us alive with these core things concept which is either poorly taught or not taught. Please make a series of testing.

[@AshokKumar-dp5rv]

Thanks man! Grate explanation and easy to understand.

[@sineava]

awesome video,thank you very much!

[@eh-lo2do]

Thank you brother, sure clear and easy to understand, one question what is it with _val, is it just a naming convention ?

[@SteveGriffith-Prof3ssorSt3v3]

Yes. It is my local variable being passed into the function. Helps to avoid confusion between things like name and _name or value and _value.

[@kensleylewis]

Do you have lesson on factory functions?

[@SteveGriffith-Prof3ssorSt3v3]

I made this one a few years ago - kzbin.info/www/bejne/i5TQgnWoe7x3rpY

[@zohar10001000]

beautifully explained, thanks.

[@romeojoseph766]

isn't creating a property with Object.defineProperty tedious for the long term?

[@SteveGriffith-Prof3ssorSt3v3]

It's not for everyday object creation. Its for special cases where you need to alter the default values of the property descriptors.

[@justincook8473]

Phenomenal video! Thank you!

[@oluface2]

Sir Please Why did you add the " prop " in the for loop?

[@priyaranjan1733]

is 'prop' a keyword? , #SameConfusion

[@jordanski5421]

prop is just a variable he could've called it anything

[@yinonelbaz5309]

great tutorial!!!

[@oghenefokethompson7407]

Thanks sir.

[@PauloSantos-yu1tn]

This video is very good stuff. Thanks

[@sampathkumarajjapaga9817]

😍 This is what I'm looking for

[@dharanyuvi6951]

Thanks dude., it really means a lot!!

[@picardibenge2498]

very clear

[@bardhan.abhirup]

Thanks a lot!

[@ck0024]

200th like from me

[@md.sahaibmridha3170]

Cool man!

[@ajeetworking]

thank you

[@dharanyuvi6951]

Thanks dude., it really means a lot!!