Previous Lecture Complete and continue  

  ES5 - Getters & Setters

Video Summary

Getters and Setters in Javascript are not new, but have only recently gained popularity in practical use since they were are supported on legacy browsers like IE8.

What they are:

- get is a property that enables you to dynamically retrieve the value of properties based on the internal state of the object

- set is the opposite and enables you to dynamically set the state of an internal property for an object.

Why they're valuable:

Getters and Setters allow you to dynamically generate properties based on the current state of the object and to dynamicaly modify the values of an objects properties by setting them.

37 comments
vikin
Wow, JavaScript had the get and set it!!!!!
Chloe Boylan
Can anyone provide any real world examples of when you would want to use getters and setters? (existing code is fine by me)
Chasen Bettinger
You can use Getters whenever you need to return a value or discover the contents of a variable. For example, a getter could be: getType(). You can't set an object's type, you can only view it. Therefore, you can only "get" it. You can use Setters whenever you need to manipulate a value.In this scenario, pretend you are editing the contents of a grocery store's webpage. Prices of items go up and down, right? Use a setter in this situation to SET the new price of a particular item.
JS Collins
I think examples like this are what is missing from a lot of tuts that I see out there. I am pretty new to JS and a lot of time when I am shown a new concept I end up being like " OK, I guess that's cool", but do not have a great grasp on when to reach for the tool or solution. After that it kinda goes down the memory hold until I need to learn it again.
John Hampton
getters/setters are a great replacement for $scope.watch when using Angular w/ the controller-as syntax, especially if using Typescript.
JS Collins
I wish slowing this down did not have all the audio artifacts. Can we get a 80% or 90%?
Sree Panchajanyam D
What Javascript editor is the instructor using in this videos?
rosely kumoi
Probably sublime text
Sree Panchajanyam D
Thank you. Any idea what is the plugin that is running the code as the instructor is still typing?
Roberto R Galindo
This is a great tutorial: Run JavaScript in Sublime Text with a NodeJS Build System https://www.youtube.com/watch?v=1iPs43TppOY
rosely kumoi
http://www.wikihow.com/Create-a-Javascript-Console-in-Sublime-Text
Adeosun Abiola Olalekan
Useful
birante
Usefull
goto => jsbin.com and have fun with this editor.
Petar Mihaylov
"Getters and Setters in Javascript are not new, but have only recently gained popularity in practical use since they were are supported on legacy browsers like IE8."

Should be:

Getters and Setters in Javascript are not new, but have only recently gained popularity in practical use since they were not supported on legacy browsers like IE8.

Kristan
Not sure what the advantage of this over ...

var obj = {
getFullName: function () {
return this.firstName + " " + this.lastName;
}
}
Luis Jose Martinez Perez
I think it's maybe because of standarization
David Maislin
psudo is misspelled in your bullet :). It is spelled pseudo.
carina fu
I create a Javascript-Console in Sublime, but when I run Destructuring, rest parameters, Spread Opterator...it keep on having errors. seems can not recognize operators like var {a,b}=object; ...args..
satish
Where are you testing your js code?
shailesh
good work
Jonathan Creasman
I Love jacket weather!!
T.J. Maher
Typo: "Pseudo-properties" are spelled incorrectly.
QianYong
The magic is they are dynamical.
Phillip Mwaniki Nzuli
Kind of weird how setting is obj.fullName = "John Doe" and not obj.fullName("John Doe") . Can the two be substituted?
Daniel
getters & setters ? It's a jungle out there!
Kelvin
Hello, what kind of editor are you using?
Mark Oliver
I used the Atom editor and Windows PowerShell to implement the "NPM" video in "Browserless JavaScript with Node.js" on this page. Elsewhere on this site the $70 Sublime editor is used, I prefer the free Atom - it has better syntax error checking for JavaScript and TypeScript.
SanketDG
What are you using in http://courses.angularclass.com/courses/modern-javascript/lectures/1249397 ?
Mark Oliver
Just starting, too much trouble getting code to run here - moved to the Angular Deep Dive video on Safari Books Online, all the code works there.
Matt
dynamic
cglfai
Short and concise. I like it!
Roland Müller
"[...] since they were are [sic] supported on legacy browsers like IE8." -> "[...] since they were NOT supported on legacy browsers like IE8."
DENNIS NJOROGE
true
Moshood Temitope
Great piece of information there!
Munyandilikirwa
is it common to call
"console( obj.fullName)"
before seting the value in the attribute "fullName" ?

or here we must suppose it is already set
Manuel Bisono
The value of obj.fullName is dynamically generated based on the getter function. You don't technically need set it before you console.log it, but it really depends on what your getter does and what data is already on the object.

In this example the object already had a first name and a last name.
Ramon Gutierrez
Excellent info. ES2015 made getters setters easy to learn and implement.