Preview
Video Player
00:00
00:00
Structure of Class
6:41Review what makes a class object, and what happens when a class is instantiated.
[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