This course has been updated! We now recommend you take the Deep JavaScript Foundations, v3 course.

Check out a free preview of the full Deep JavaScript Foundations course:
The "ES6 Class" Lesson is part of the full, Deep JavaScript Foundations course featured in this preview video. Here's what you'd learn in this lesson:

Kyle dives into E6S class, stating that it's "syntactic sugar" and still prototype system.

Get Unlimited Access Now

Transcript from the "ES6 Class" Lesson

>> Kyle Simpson: Speaking of classes, let's talk about the class keyword added in ES6. And I'm gonna use our running example that we've been talking about to try to help illustrate a little bit what the class keyword is gonna give us. Here's making class foo as a replacement for that whole thing that we were just doing with our prototypes.

[00:00:23] So we have a class foo that gets a constructor function of sorts, and we have an identify method that's gonna be available on the class prototype. And we can still do a1 = new Foo, if you squint it sure looks like a class system doesn't it? I mean, they definitely improved the syntax compared to what were just doing with all the .prototype crap that we had to do.

[00:00:49] This is extremely attractive to JavaScript developers. I don't think I've seen anything in JavaScript get so much excitement, as when they said I wanna do classes, I've been doing it with prototypes all along and it sucked, and now you give me this syntax. People are flocking in droves to it.

[00:01:08] There's a couple of things I wanna point out. First, it is definitely true that the syntax is nicer, but it is mostly just syntactic sugar. It really is kind of some duct tape, or to borrow another metaphor, it really is kinda some lipstick on a pig, because this is not a brand new system.

[00:01:30] This is still the prototypes underneath the covers. It's still bound by all the exact same rules, and we're gonna have a lot of the same limitations. Just the syntax goes a long way to making it so that's not obvious. Now, some people prefer to have problems not be obvious.

[00:01:47] I on the other hand prefer for problems to be super obvious so that I can deal with them. So, the syntax that we've created here hides a bunch of problems until you run into them, and then you're like, my God, where did that come from? I have tried to use classes to model certain things, and I run into these problems.

[00:02:09] The major takeaway is that classes are designed to essentially codify the static nature of inheritance, as opposed to the dynamic nature of the prototype system. They're designed to sort of pretend that there's a copying going on, because that's the way that classes worked in Java and C++. But what that really does is throw away most of the power of the system that underlies it.

[00:02:40] All that capability that we use to have to take a function and use it against a different object, and all that dynanicism and stuff, it mostly just falls apart when you opt into this class way of thinking. So it's kind of an all or nothing approach, and I'm not a big fan of all or nothing approaches.

[00:03:02] No question this code is nicer than what we had before, if you start with the presupposition that you have to use classes to design your software. No question that inheritance such as it is looks nicer. I just get this extends keywords so I can make a child Bar that extends Foo, and all I have to define is the new overridden method, and I can call this.identify and it automatically goes up the prototype chain, that's cool.

>> Kyle Simpson: There's no question that that's a lot nicer syntax.
>> Kyle Simpson: We even have a super keyword now. You even have the ability to explicitly go up the prototype chain with a super keyword. That fixed one of the major frustrations of prototype oriented code, is that now we actually have a way instead of saying this.__proto__ or any of that other crap, now we have a super keyword.

[00:04:06] See you might feel like, well super, that's pretty super, it fixed one of the big pain points.
>> Speaker 2: Does that a help with shadowing?
>> Kyle Simpson: It allows you to do shadowing. You notice that I made an identify here that's shadowed on the prototype chain, and yet the super still works.

[00:04:25] This is an amazing amount of duct tape that they put in to make it work. They didn't change the system, they just put in a ton of duct tape to make it work. And as long as you're okay with duct tape, cool. But there are problems with the super keyword, and you will expose those problems if you try to color outside of the lines.

[00:04:46] If you try to do anything remotely dynamic with your class structure, everything will start to fall apart. So my caution to you is, if you're gonna pick the classes as the way to go, you just sort of use them and don't think about how they work. And, you don't try to push any edges or do anything sophisticated with them, cuz they're designed to keep you very much within the lines, and they're really good at that.

[00:05:12] So I'll give credit where it's due, it did a really good job of designing for one very specific mindset. Just happens to not be the mindset that I approach JavaScript with.
>> Kyle Simpson: Another set of things that they added which actually is not something that's just syntactic sugar, these are things that did not exist prior.

[00:05:34] So when people claim classes are just syntax sugar, that's not fully true. There are some extra things that you could not do before, that you can now do with classes, one of them is static methods. When you declare something as static, it actually adds it to the class instead of to the instance.

[00:05:53] And that means that the classes themselves have an inheritance between them. You notice that I can say Bar.hello even though it's only Foo that has a hello. So the classes themselves have an inheritance, not just the instances. That is entirely different from anything we ever did in JavaScript before.

[00:06:17] We never had a Bar that delegated to Foo, that's not even possible pre ES6. So, that's not just syntax sugar, that's a whole different mechanism that they just kind of snuck in there.
>> Kyle Simpson: I guess it's cool, but it's not just syntax sugar.