1
00:00:00,000 --> 00:00:04,945
[MUSIC]

2
00:00:04,945 --> 00:00:09,560
Classes are a common feature of many
object oriented programming languages.

3
00:00:09,560 --> 00:00:13,800
You'll often find them in Java, Python,
Rails, PHP, and many other languages.

4
00:00:13,800 --> 00:00:16,120
And now you'll find them in JavaScript.

5
00:00:16,120 --> 00:00:17,940
A class is really just a blueprint for

6
00:00:17,940 --> 00:00:21,064
creating objects that share
similar properties and methods.

7
00:00:21,064 --> 00:00:25,229
For example, say you're building an online
version of the card game, solitaire.

8
00:00:25,229 --> 00:00:29,160
You could create a class to
quickly create a deck of cards.

9
00:00:29,160 --> 00:00:33,426
In other words, classes simplify
creating similar objects like a card but

10
00:00:33,426 --> 00:00:37,296
with different properties,
like a different suit and card value.

11
00:00:37,296 --> 00:00:40,260
We've always been able to
create objects in JavaScript.

12
00:00:40,260 --> 00:00:44,553
But instead of classes, we've used
JavaScript constructor functions and

13
00:00:44,553 --> 00:00:46,640
prototype all inheritance to do it.

14
00:00:46,640 --> 00:00:51,301
ES2015 introduces the keyword class,
making creating objects a bit simpler and

15
00:00:51,301 --> 00:00:55,760
a little more like other object
oriented programming languages.

16
00:00:55,760 --> 00:00:59,550
However, under the hood, JavaScript
is still a prototype-based language.

17
00:00:59,550 --> 00:01:03,810
So you won't find all the features of a
true object oriented language like, Java.

18
00:01:05,450 --> 00:01:09,370
Classes are not a radically
new feature of ES2015.

19
00:01:09,370 --> 00:01:13,230
The new class keyword is simply
a constructor function in disguise.

20
00:01:13,230 --> 00:01:16,192
Meaning, its main purpose is
to provide a more convenient

21
00:01:16,192 --> 00:01:18,800
syntax to create regular
constructor functions.

22
00:01:18,800 --> 00:01:23,446
And a constructor function as a function
that you call with the new keyword to

23
00:01:23,446 --> 00:01:25,710
create an instance of an object.

24
00:01:25,710 --> 00:01:27,470
So let's take a look at some examples.

25
00:01:27,470 --> 00:01:31,340
And if you're following along, launch
the latest workspace for this video.

26
00:01:31,340 --> 00:01:33,810
In the file, constructor-function.js,

27
00:01:33,810 --> 00:01:37,330
I have a constructor function called,
student.

28
00:01:37,330 --> 00:01:43,770
It has one parameter called a data, which
should have two properties, name and age.

29
00:01:43,770 --> 00:01:48,750
And right below,
I create two new students, Joey and Sarah.

30
00:01:48,750 --> 00:01:50,280
So let's see what gets
logged to the console.

31
00:01:53,140 --> 00:01:57,890
And as expected, both students Joey and
Sarah are logged.

32
00:01:59,000 --> 00:02:02,374
Now, I'll open up the file class.js.

33
00:02:02,374 --> 00:02:06,705
And the only difference between
constructor function.js and

34
00:02:06,705 --> 00:02:09,572
class.js is how the student is defined.

35
00:02:09,572 --> 00:02:15,780
In this case, I'm using a class
declaration, instead of a let statement.

36
00:02:15,780 --> 00:02:20,620
Now, the body of a class begins and
ends with curly brackets.

37
00:02:20,620 --> 00:02:23,120
And within the body you
can define methods and

38
00:02:23,120 --> 00:02:26,345
other members of your class
including its constructor.

39
00:02:26,345 --> 00:02:30,245
Now the code inside
the constructor block is executed

40
00:02:30,245 --> 00:02:33,365
when the class is called
with the new keyword.

41
00:02:33,365 --> 00:02:37,305
So this is where we create a student and
define their name and age.

42
00:02:38,855 --> 00:02:41,235
When I run this file in the console,

43
00:02:41,235 --> 00:02:45,795
I get something similar to the output we
saw earlier with constructor-function.js.

44
00:02:45,795 --> 00:02:50,420
The only difference is that it logs
the student class before the properties.

45
00:02:50,420 --> 00:02:53,440
Now, this is great but
we can do more with the class.

46
00:02:53,440 --> 00:02:56,280
So when a student joins our class,

47
00:02:56,280 --> 00:03:00,960
it's good to assess up front
the level of interest in the class.

48
00:03:00,960 --> 00:03:06,376
So I'm going to add a property to this
student class called, interestLevel.

49
00:03:09,852 --> 00:03:14,465
And interestLevel will be
an integer between one and ten.

50
00:03:14,465 --> 00:03:18,053
At the low end, the student is not
at all interested in the class and

51
00:03:18,053 --> 00:03:21,795
at the high end, the student is
very interested in the class.

52
00:03:21,795 --> 00:03:24,478
And if the student doesn't
provide this information.

53
00:03:24,478 --> 00:03:28,445
I'll set a default value of five,
I think that's a decent default.

54
00:03:28,445 --> 00:03:35,709
To do that, I could write something like,
data.interestLevel, double pipe five.

55
00:03:35,709 --> 00:03:40,167
Here, the double pipe is checking to
see if data.interestLevel is true,

56
00:03:40,167 --> 00:03:41,875
then return its value.

57
00:03:41,875 --> 00:03:44,590
Otherwise, use the default of five.

58
00:03:44,590 --> 00:03:47,540
But do I really wanna put
conditional logic here?

59
00:03:47,540 --> 00:03:50,650
Probably not, so
I'm going to re-factor this.

60
00:03:50,650 --> 00:03:54,030
The destructuring feature you learned
about in the previous stage is a good

61
00:03:54,030 --> 00:03:56,710
pattern for assigning default values.

62
00:03:56,710 --> 00:04:01,568
So first, I'll assign the student
constructor an object

63
00:04:01,568 --> 00:04:04,845
with no properties as a default value.

64
00:04:04,845 --> 00:04:11,974
So we'll pass name, age and
interestLevel equals five.

65
00:04:11,974 --> 00:04:16,865
This allows me to use destructuring
to create a default value of five for

66
00:04:16,865 --> 00:04:18,096
interestLevel.

67
00:04:18,096 --> 00:04:22,470
The student constructor will always pass a
value and I can store it on the instance.

68
00:04:23,610 --> 00:04:25,795
And we're no longer
passing a data parameter,

69
00:04:25,795 --> 00:04:27,660
so we can remove it from the properties.

70
00:04:31,018 --> 00:04:34,011
I'll also get rid of the conditional
logic for interestLevel,

71
00:04:34,011 --> 00:04:36,790
since we're setting the default
value in this new object.

72
00:04:38,740 --> 00:04:42,610
Okay, so the student has some
basic information which is great.

73
00:04:42,610 --> 00:04:47,180
And when I run the file in the console,
everything looks like it did earlier,

74
00:04:47,180 --> 00:04:51,471
except now we see the interestLevel
property in default value of five for

75
00:04:51,471 --> 00:04:52,689
both Joey and Sara.

76
00:04:54,650 --> 00:04:56,824
Now, we need a way to add grades for
the student.

77
00:04:56,824 --> 00:05:01,714
To do this, I'm going to add
a new property called, grades and

78
00:05:01,714 --> 00:05:04,498
set a default value to a map object.

79
00:05:07,785 --> 00:05:09,630
And now I can add grades to a student.

80
00:05:09,630 --> 00:05:12,968
So let's give Sarah some grades.

81
00:05:12,968 --> 00:05:19,115
By typing sarah.grades.set.

82
00:05:19,115 --> 00:05:21,260
We'll give Sarah a grade for history.

83
00:05:23,680 --> 00:05:24,540
Let's make it a B.

84
00:05:26,080 --> 00:05:32,671
And let's do one more,
let's do sarah.grades.set math,

85
00:05:32,671 --> 00:05:36,231
and we'll give her an A for math.

86
00:05:36,231 --> 00:05:40,040
Next, I'll console.log
Sarah's grades only.

87
00:05:43,680 --> 00:05:51,050
Inside the parens,
I'll say Array.from, sarah.grades.

88
00:05:51,050 --> 00:05:54,757
So here,
we're returning an array instance from

89
00:05:54,757 --> 00:05:58,852
the sarah.grades map using
the Array.from method.

90
00:05:58,852 --> 00:06:02,880
All right, so I'll save the file and
when I run it in the console.

91
00:06:03,910 --> 00:06:07,190
Cool, we see Sarah's grades for
both history and math.

92
00:06:08,350 --> 00:06:11,270
Take a look at the link in the teacher's
notes to learn more about using

93
00:06:11,270 --> 00:06:12,280
classes in your code.

94
00:06:13,840 --> 00:06:16,230
The class syntax is new to JavaScript.

95
00:06:16,230 --> 00:06:21,020
But it's familiar to Java, Python,
PHP, Ruby and C# developers.

96
00:06:21,020 --> 00:06:23,270
Classes are also at the core of new and

97
00:06:23,270 --> 00:06:26,950
popular JavaScript frameworks like,
Angular 2 and Aurelia.

98
00:06:28,130 --> 00:06:31,840
You learned that a big advantage of using
classes over regular constructor functions

99
00:06:31,840 --> 00:06:36,010
is that classes are more convenient
to write and easier to read.

100
00:06:36,010 --> 00:06:36,780
In the next video,

101
00:06:36,780 --> 00:06:40,810
I'll show you how you can extend the class
to inherit its properties and methods.