"Build an Interactive Story App (Retired)" was retired on April 30, 2017. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introducing ES2015!
You have completed Introducing ES2015!
Preview
Review what makes a class object, and what happens when a class is instantiated.
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
[MUSIC]
0:00
Classes are a common feature of many
object oriented programming languages.
0:04
You'll often find them in Java, Python,
Rails, PHP, and many other languages.
0:09
And now you'll find them in JavaScript.
0:13
A class is really just a blueprint for
0:16
creating objects that share
similar properties and methods.
0:17
For example, say you're building an online
version of the card game, solitaire.
0:21
You could create a class to
quickly create a deck of cards.
0:25
In other words, classes simplify
creating similar objects like a card but
0:29
with different properties,
like a different suit and card value.
0:33
We've always been able to
create objects in JavaScript.
0:37
But instead of classes, we've used
JavaScript constructor functions and
0:40
prototype all inheritance to do it.
0:44
ES2015 introduces the keyword class,
making creating objects a bit simpler and
0:46
a little more like other object
oriented programming languages.
0:51
However, under the hood, JavaScript
is still a prototype-based language.
0:55
So you won't find all the features of a
true object oriented language like, Java.
0:59
Classes are not a radically
new feature of ES2015.
1:05
The new class keyword is simply
a constructor function in disguise.
1:09
Meaning, its main purpose is
to provide a more convenient
1:13
syntax to create regular
constructor functions.
1:16
And a constructor function as a function
that you call with the new keyword to
1:18
create an instance of an object.
1:23
So let's take a look at some examples.
1:25
And if you're following along, launch
the latest workspace for this video.
1:27
In the file, constructor-function.js,
1:31
I have a constructor function called,
student.
1:33
It has one parameter called a data, which
should have two properties, name and age.
1:37
And right below,
I create two new students, Joey and Sarah.
1:43
So let's see what gets
logged to the console.
1:48
And as expected, both students Joey and
Sarah are logged.
1:53
Now, I'll open up the file class.js.
1:59
And the only difference between
constructor function.js and
2:02
class.js is how the student is defined.
2:06
In this case, I'm using a class
declaration, instead of a let statement.
2:09
Now, the body of a class begins and
ends with curly brackets.
2:15
And within the body you
can define methods and
2:20
other members of your class
including its constructor.
2:23
Now the code inside
the constructor block is executed
2:26
when the class is called
with the new keyword.
2:30
So this is where we create a student and
define their name and age.
2:33
When I run this file in the console,
2:38
I get something similar to the output we
saw earlier with constructor-function.js.
2:41
The only difference is that it logs
the student class before the properties.
2:45
Now, this is great but
we can do more with the class.
2:50
So when a student joins our class,
2:53
it's good to assess up front
the level of interest in the class.
2:56
So I'm going to add a property to this
student class called, interestLevel.
3:00
And interestLevel will be
an integer between one and ten.
3:09
At the low end, the student is not
at all interested in the class and
3:14
at the high end, the student is
very interested in the class.
3:18
And if the student doesn't
provide this information.
3:21
I'll set a default value of five,
I think that's a decent default.
3:24
To do that, I could write something like,
data.interestLevel, double pipe five.
3:28
Here, the double pipe is checking to
see if data.interestLevel is true,
3:35
then return its value.
3:40
Otherwise, use the default of five.
3:41
But do I really wanna put
conditional logic here?
3:44
Probably not, so
I'm going to re-factor this.
3:47
The destructuring feature you learned
about in the previous stage is a good
3:50
pattern for assigning default values.
3:54
So first, I'll assign the student
constructor an object
3:56
with no properties as a default value.
4:01
So we'll pass name, age and
interestLevel equals five.
4:04
This allows me to use destructuring
to create a default value of five for
4:11
interestLevel.
4:16
The student constructor will always pass a
value and I can store it on the instance.
4:18
And we're no longer
passing a data parameter,
4:23
so we can remove it from the properties.
4:25
I'll also get rid of the conditional
logic for interestLevel,
4:31
since we're setting the default
value in this new object.
4:34
Okay, so the student has some
basic information which is great.
4:38
And when I run the file in the console,
everything looks like it did earlier,
4:42
except now we see the interestLevel
property in default value of five for
4:47
both Joey and Sara.
4:51
Now, we need a way to add grades for
the student.
4:54
To do this, I'm going to add
a new property called, grades and
4:56
set a default value to a map object.
5:01
And now I can add grades to a student.
5:07
So let's give Sarah some grades.
5:09
By typing sarah.grades.set.
5:12
We'll give Sarah a grade for history.
5:19
Let's make it a B.
5:23
And let's do one more,
let's do sarah.grades.set math,
5:26
and we'll give her an A for math.
5:32
Next, I'll console.log
Sarah's grades only.
5:36
Inside the parens,
I'll say Array.from, sarah.grades.
5:43
So here,
we're returning an array instance from
5:51
the sarah.grades map using
the Array.from method.
5:54
All right, so I'll save the file and
when I run it in the console.
5:58
Cool, we see Sarah's grades for
both history and math.
6:03
Take a look at the link in the teacher's
notes to learn more about using
6:08
classes in your code.
6:11
The class syntax is new to JavaScript.
6:13
But it's familiar to Java, Python,
PHP, Ruby and C# developers.
6:16
Classes are also at the core of new and
6:21
popular JavaScript frameworks like,
Angular 2 and Aurelia.
6:23
You learned that a big advantage of using
classes over regular constructor functions
6:28
is that classes are more convenient
to write and easier to read.
6:31
In the next video,
6:36
I'll show you how you can extend the class
to inherit its properties and methods.
6:36
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