Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Getter and Setter methods have long been available in objects, but now they are available in classes, too!
Resources
Want to learn more? Check out some of these resources:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Quite often when developing
an application, we need to consider
0:00
a chain of events or how our data is
going to flow from one input to the next.
0:03
Getters and
setters give us a way of accessing and
0:08
changing data within an object.
0:10
Getters and setters are common across
programming languages like Ruby,
0:12
Java, and C#.
0:16
And ES5 already provides a way to
define getters and setters, but
0:17
the syntax is cumbersome and it often
involves creating extra utility functions.
0:20
ES2015 introduces the get and
set keywords, which provide a clean and
0:25
easier way of defining getters and
setters within a class.
0:30
We use get to retrieve and return a value
and set to assign or set a value.
0:34
If you're following along,
0:41
you'll see the getset.js file when you
launch the workspace for this video.
0:42
In our file, the Student class looks great
but I'd like to split name into two parts.
0:47
First name and last name.
0:54
So in the constructor properties I'll
replace name with firstName and lastName.
0:56
Then I'll change the properties to
1:04
this.firstName = firstName.
1:08
And then right below,
I'll say this.lastName = lastName.
1:13
And using what's called a getter, I'll
be able to still access the full name,
1:25
so both first name and last name,
via the name property.
1:29
Now a getter is a function that has no
parameters and must return a value.
1:33
So right above the constructor,
using the get keyword,
1:38
I'll create a getter for name.
1:42
The name function will return the values
of firstName and lastName only.
1:48
So I'll use back ticks to
create a template string and
1:54
interpolate the values of firstName and
lastName.
1:58
So I'll say this.firstName,
Then this.lastname.
2:02
So now, any time I create a new student,
2:13
I'll need to pass both a firstName and
a lastName.
2:16
So right below,
let's create a new student.
2:20
We'll say let stevenJ = new Student.
2:22
And we'll pass an object
where firstName is Steven,
2:29
lastName is Jones.
2:40
And let's add an age of 22.
2:45
And to access the getter method,
2:49
all I need to do is reference
it like a property.
2:51
So right below,
let's say console.log stevenJ.name.
2:55
Let's run the file in the console and
see what we get.
3:04
Great, the console logs the full name,
Steven Jones.
3:10
But now if I try to set the name value for
stevenJ,
3:13
for example I'll type
stevenJ.name = Steven Jones,
3:19
And run the file in the console,
I get an error that reads
3:28
cannot set property name of
student which has only a getter.
3:33
Well the interpreter is telling me, hey,
3:39
before you can set the name property,
you need to create the set method.
3:42
So currently to set the full name,
3:48
I need to change both the firstName and
lastName values on the student.
3:49
I'd much rather change the full name and
have it split the two names apart.
3:53
To do this, I need to declare
a setter method using the set method.
3:57
So right below my get method,
I'll say set name.
4:02
Now my setter has the same name as
my getter and it takes an input.
4:08
First, to split the two names apart,
4:16
I'll say let name = input.split.
4:20
In a setter method, you write
the properties, in our case firstName and
4:28
lastName, on the left
side of an equal sign.
4:32
So this input is the value that you'll
place to the right side of the equal sign.
4:35
So right below, we'll say this.firstName
4:41
= name and we'll place it first
by setting its index to 0.
4:48
And then we'll say this.lastName, and
4:52
we'll place it second by
setting its index to 1.
4:57
Right, so now let's see how this works.
5:02
At the bottom of the file,
5:04
I'll change the name to
let's say Steven Jennings.
5:07
And then right below,
I'll do another console.log of stevenJ.
5:12
I'll save the file and
run it in the console and perfect.
5:18
Stephen Jones is now Stephen Jennings.
5:24
We covered a lot of
material in this course so
5:29
you should be excited about
the latest features in JavaScript.
5:32
JavaScript has a evolved into
a remarkable language for
5:35
both beginners and seasoned developers.
5:38
ES2015 is just the beginning
of a new era of JavaScript.
5:40
We'll see annual releases which will push
the language forward in more amazing ways.
5:44
Even though today's web browsers
are adopting these new features rapidly,
5:49
we still need to be cautious with
how we implement them in our code.
5:53
We can use transpilers like Babel which
allow us to write modern JavaScript that
5:57
is backwards compatible for
older browsers.
6:01
Be sure to check the teachers notes for
courses and
6:04
workshops that will help
you get started with Babel.
6:06
I've also posted a link to a compatibility
table that gives you a complete overview
6:10
of ES2015 features that are supported
by both transpilers and browsers.
6:14
And if you're curious about JavaScript
features beyond ES2015, check out
6:19
the resources on ES2016, the recently
finalized seventh edition of ECMAScript.
6:23
Remember, we're here to help.
6:29
So if you have questions about
anything covered in this course,
6:30
feel free to reach out to the tree house
staff or other students in the community.
6:33
Thanks everyone.
6:38
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up