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.