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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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