ES5 Custom Object Methods, Getters, and Setters

There is a new shorter syntax for adding methods and properties to Objects in ES6. This video covers that new syntax as well as how you can add getter and setter methods for your object properties.
Code GIST: gist.github.co...

[@ihvtework]

This video is still helping someone 3 years in the future understand JS a bit better. Thank you, Steve!

[@marcoscabrinirianidosreis6655]

Thank you very very much, it was like a flashlight in my brain. Finally, I could understand Getter and Setters!!!!

[@rotrose7531]

Thank you very much. Day by day, with every other your tutorial I found JS is not that formidable as before.

[@bretthoppough]

Awesome job! I was having trouble understanding Getters and Setters, but it makes sense now.

[@Pharizer]

What an awesome tutotial! Keep them coming!

[@kenho1701]

Easy to understand and straight to the point, appreciate your explanation very much !

[@joebuono8793]

You are a great teacher. Thank you for making these clear and helpful videos.

[@yehfang4768]

Finally getter and setter make sense now. You rocks!

[@3maj09]

Thank you Steve! I am happy that I found your channel. You are helping me a lot! Cheers!

[@SteveGriffith-Prof3ssorSt3v3]

Please share it to help others.

[@3maj09]

Will do!

[@chesterxp508]

Another very cool tutorial !!!

[@adriatic123]

This is a great explanation, yet I really don't see much use of it. We could also access object property directly like obj.prop1 This encapsulation feeling is false because object properties are not really hidden like in real OOP environment. We can access them anyway. But as I said great explanation, thanks

[@SteveGriffith-Prof3ssorSt3v3]

It's not something that I would use often but getters and setters do have their uses. A newer better implementation of this concept in JS is with Proxies. Don't have a video on those yet though.

[@ramin9134]

thank you so much it was very helpful

[@kithowlett8374]

Thank you for the video. I have a quick question - Why use a getter? Could you not just write a 'normal method' that returned the value in prop1 * 2? let obj = { prop1: 1997, prop2() { return this.prop1 * 2; } }; console.log(obj.prop2());

[@SteveGriffith-Prof3ssorSt3v3]

You can do that. There is no requirement that says you must use a getter. Getters and setters just give us the ability to control the access to values. We can do validation or formatting of the values this way.

[@yonisomar2346]

Thank you so much. It finally makes sense. Keep up the good work👌

[@yonisomar2346]

Quick question. Are we able to create new properties using getters or setters?

[@yonisomar2346]

And also, if I'm able to change the value of a property using normal dot notation. What would be the point of using getters and setters?

[@korhad]

Hi Steve, Thanks for the video! There are actually 2 things I don't get. 1. When I work in Java I usually just create a method called getValue() or setValue(). Why do we need the special keywords here? 2. Also, if the _prop1 is hidden from others, what's the point of still being able to set it? Thanks for your answer in advance!

[@SteveGriffith-Prof3ssorSt3v3]

Despite the names, there are actually quite a few differences between Java and JavaScript. One of them being that Java has modifiers like public, private, and protected. In JavaScript we can't add a modifier to control who can see variables (or properties). So, If we want a variable to be private then we have to declare it inside a function. This way its scope is contained to that object. JavaScript always passes by reference. So, if you want access to any variables declared inside a function then they need to be part of the object being passed back from the function. Now, when you create your own custom objects you are allowed to modify the abilities of all the properties inside your own object. I can set any of my properties to read-only or read-write, enumerable or not, give a default value, as well as make the property configurable (whether it can be altered or removed later). These are known as the property descriptors. Included in the property descriptors are a get and set method. Since things is JavaScript are typically public you can get and set the value of a property like this: let obj = {prop: 123}; obj.prop = 456; //set console.log( obj.prop ); //getting the value However, we are allowed to intercept that behaviour and create our own custom functions for how the value of a property is retrieved or changed. Different combinations of property descriptors are allowed. Not all descriptors can work together. Here is a good resource to start with - Object.defineProperty( ) - how to set these descriptors on a single property within an object - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty So, to answer your #2 - when you want to modify the value being returned or do something like validation on the value before it is set in your Object then we would create a get and set method.

[@korhad]

Thanks for the quick and detailed answer! I have been working in Java and Python the past 1,5 years, but currently I'm learning functional programming, and for the past 48 hours, JavaScript. :) It's still a bit confusing, but I will check on the links you provided and will have a deeper look into them. Thank you for the instructions, I highly appreciate them!

[@SteveGriffith-Prof3ssorSt3v3]

Great! Good luck. I have a play list on Arrays in JavaScript that has a number of videos that use a function approach - kzbin.info/www/bejne/l6OsmZuImZaFhsU Have a look through that and plus my JavaScript from the Start playlist - kzbin.info/www/bejne/sJu5d6icqZaCaLs - some of the stuff in this list will be too low level for you but there are also videos on topics like Prototypes, Closures, and Composition vs. Inheritance too. These are key topics. JavaScript uses Prototypes instead of Classes which has some important differences in how things work.

[@korhad]

Subscribed! :)

[@SteveGriffith-Prof3ssorSt3v3]

Thanks! Oh, also look at how the keyword "this" works in JavaScript. Not the same as Java. I've got videos on "keyword new", "keyword this", Object.create( ) and Object.assign( ). With those four and Prototypes you will have a good idea about how the two languages do some things differently. The latest version of JavaScript added the "class" keyword. The syntax will look familiar to you but it is just syntactic sugar and jazz hands. Under the surface it is still using Prototypes and all the other JavaScript weirdness that we love.

[@PS-dp8yg]

I haven't tested this yet, but normally when creating an object literal, all properties are public by default. If I remember correctly, there is no way of creating private fields in an object literal unless you change to a function constructor and use const/let for internal properties without using the this keyword or just use object descriptors. Does creating a getter and setter automatically creates the fields private? Also, what is the difference of creating a getter and setter vs plain methods that can return and set an object properties?

[@SteveGriffith-Prof3ssorSt3v3]

Thanks for the question. Everything in JavaScript is effectively public, you are correct there. The getters and setters do not make things private. However, you can define a getter without a setter. You can also obfuscate things with the names of your getters and setters when referencing property names. IF you document your code with the name of the getter and setter then you are protecting the hidden property name from being set directly. Obviously this won't stop someone from reverse engineering your code and finding the property names but it does let you enforce some best practices when someone uses your library. If I really wanted to keep something "private" in Javascript (those are air-quotes around private), then I would use a closure to keep a reference to a variable that is used inside a function but declared outside the function. Here is another video where I talk about that - kzbin.info/www/bejne/oX6xeXSZbNKSbKM The only practical difference between plain methods and the getter and setter is where they are defined. plain methods are externally created and can be attached to an object directly or through a prototype. Getters and Setters are built into the object as property descriptors. They become part of the definition of the object.

[@deylenergy5761]

Valuable video. Keep'em coming!

[@igorking9903]

thanks for the video! Greatly explained !

[@esakkijeyaraman2859]

Great information

[@vinaysoni5192]

Just greatly explained !

[@lavdixit2267]

Good Explanation

[@HoanNguyen-fc8vb]

Thanks! It is easy to understand.

[@noaakshay]

sir we cannot use set method separately like let obj={ a:1979, set c(_v){ this.a=_v; }, prop3(){ console.log('prop3 called') } };

[@SteveGriffith-Prof3ssorSt3v3]

Sure you can. Do this: obj.c = 1980 Then console.log(a) to see that a was changed. Without the get c, it just means that you get undefined as the value of c

[@fahadhafeez8086]

Can you please tells us where we can use these getters and setters in real-world applications!

[@SteveGriffith-Prof3ssorSt3v3]

If you have a property whose value can be changed but you want to do some validation on the value before the update, use a setter. If you want to format the value of a property so it is returned as a string but kept internally as a number, use a getter.

[@romeojoseph766]

4:57 why don't we have to add '()' while calling the prop4 method in the obj unlike other methods in an object where we should add () to get the returned result and why do I get an error when I call it with '()' like this obj.prop4()

[@SteveGriffith-Prof3ssorSt3v3]

prop4 is not a method. It is a property value. Outside the object it is seen as `obj.prop4`. When you add a get and/or set in front of the property name, inside the object, you are adding a handler method that controls the flow of values into and out of the property so you can do validation or formatting on that data. Outside the object it is still just obj.prop console.log(obj.prop4); // calls get prop4( ){ } obj.prop4 = "new value"; // calls set prop4( ) { }

[@fahadhafeez8086]

Thanks very helpfull.

[@mejuay3950]

Thanks man!

[@gekoskipatric]

isn't it true that you can always view the javascript code (unless you're running it on a server via node)? If that's the case, you can alter the value of a variable without using the getters and setters right? So how are they then protected?

[@SteveGriffith-Prof3ssorSt3v3]

Private and protected have nothing to do with someone looking at the source code. It means preventing someone else who has written code that is running on the page from being able to alter or access the values of your variables in your code.

[@gekoskipatric]

I guess I'm missing something. If they can see the source code then they know the name of your variables. Can't they then just assign a value (ex. objectName.variableName = newValue) without using the setter function? Is the idea behind this just to prevent accidentally altering variables values when writing other code? In other words, how do you truly prevent them from accessing these variables. Thanks in advance. I'm used to Java where you can set access modifiers

[@SteveGriffith-Prof3ssorSt3v3]

Ok. That explains where you are coming from to me. By default in JavaScript everything is public. We can create things that mimic private - kzbin.info/www/bejne/oX6xeXSZbNKSbKM - with the access modifiers we are really just trying to control the process for code that is being run on the same page. Like you said it is more of an accident prevention thing to be able to do some validation on data being passed to the variables.

[@romeojoseph766]

what if we write like obj.prop1(1980) in our setter function

[@SteveGriffith-Prof3ssorSt3v3]

prop1 is a property not a method. you can get its value with obj.prop1 and set its value as obj.prop1 = 1980. It needs the equal sign to trigger the set method.

[@yamacode9958]

Is this part of the js playlist or there is a separate es5 playlist that I cant find?

[@SteveGriffith-Prof3ssorSt3v3]

pazira love there is a playlist called Javascript from the start. It has most of the non es6 videos

[@kyambadderonald7205]

What's the difference between log and console.log.??

[@SteveGriffith-Prof3ssorSt3v3]

kyambadde ronald log is just my shortcut to console.log. you can see the assignment at the top of the file.

[@JD-kf2ki]

In real life, in what scenario we can utilize getter and setter?

[@SteveGriffith-Prof3ssorSt3v3]

Similarly as Proxies, when you want to protect and control access to object properties

[@JD-kf2ki]

@@SteveGriffith-Prof3ssorSt3v3 Thanks

[@matthewdavies269]

your videos are excellent

[@SteveGriffith-Prof3ssorSt3v3]

Thanks Matthew.

[@matthewdavies269]

I am doing Codecademy but I refer to your videos when I don't understand a concept. However, I think it would be easier if your output window was less crowded and didn't have that "steve pages griff node" thing. I might sound ignorant there , sorry! :D

[@SteveGriffith-Prof3ssorSt3v3]

Thanks for the feedback Matthew. I'm glad the videos help you understand concepts, especially when Codecademy is falling short. As for the Terminal window, those are default display values. "Steves-MBP" is the name of my computer. "video-pages" is the name of my current folder. "griffis" is my current username on the MacBook. "node" is the command that am using to start the node program and run the script "es6-object-methods.js". Hope that helps.

[@serkan1804]

Thanks.

[@igorr4682]

just like structures in C#

[@igorr4682]

This also allows you to have read only properties buy removing set which is pretty useful at times

[@aideoropeza5545]

The name change and the underscore kinda confused me😩

[@SteveGriffith-Prof3ssorSt3v3]

That was to demonstrate how you can hide the internal variable name to code that is outside the object. The name beside get and set is the name seen outside the object. The variable is hidden from the outside world.

[@joeyng1282]

Starts at 3:34. Anytime.