This course has been updated! We now recommend you take the ES6: The Right Parts course.

Check out a free preview of the full JS.Next: ES6 / ES2015 course:
The "Class Syntax" Lesson is part of the full, JS.Next: ES6 / ES2015 course featured in this preview video. Here's what you'd learn in this lesson:

From a functionality standpoint, declaring a class is the same as declaring a function. They both can use the new keyword and be executed when instantiated. Aaron walks through the syntax and demonstrates that most of the features in classes can be implemented today using functions.

Get Unlimited Access Now

Transcript from the "Class Syntax" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Aaron Frost: So again, I showed you this earlier today. I'm going to go back down to the bottom in case someone didn't see it. But even here on this class proposal, like they're like hey, be warned. Be ye warned, if you even think about modifying this spec, it will kill it.

[00:00:21] Basically if you read this, those are the same don't, don't, don't. You know you want to shush up you know he's like this don't know like push it to the next release. We're releasing this and everyone every kind of agrees. So yeah, that's where we ended up. And that's that's what we got today.

[00:00:44] We got this max and minimal class system. So here's a class, this is what a class looks like. Okay, these guys are functionally the same. So I showed you this because I wanted to point out that the classicism, the class system is only sugar on top of things you can already do today.

[00:01:08] And we're not gonna do anything right now that you cant do today, okay. And so I think we should state that up front. I think it's a little more elegant in the class syntax and I'm going to embrace it until we start seeing crazy, crazy. The first time I see an IMBO in JavaScript, I'm out.

[00:01:36] So fortunately these are the same though I can new on both up there both can execute what I call new, this is the same thing. Okay, again remember earlier though, I said if we got rid of all function constructors and only had class constructors, then functions could be lightweight long term.

[00:01:57] Which means they could take up less memory and less footprint in memory, which means JavaScript applications could potentially weigh less and maybe run faster. So, the long term performance, we're not getting rid of constructors on functions for years, right? Just because of legacy. But, it could potentially, if everyone only used class stuff, and like maybe they do some opt in someday in the future where you're like, I opt in to never use function constructors and only class constructors.

[00:02:29] It might be able to have some performance gains but for now it's just sugar, okay. All right, so a class has a constructor function and it's just called constructor. Other languages, if you have a class called foo, what's your constructor called? Foo, right? So, in here it's constructor, right.

[00:02:50] And if someone passes it, like if I have this animal class, I make it a constructor called name and I can say this .name = name, right. Again, can you do this in JavaScript today with functions? You can right, easy. So I wanted to kind of point out private properties, because a lot of people were like, dude, private properties, so cool.

[00:03:22] They're all right, I mean, it's not amazing, they're only kind of cool and it's really only private because of obscurity. So who here is familiar with symbols? You are, okay, I'm gonna use a symbol in the console real quick to see you guys kinda get what it is.

[00:03:41]
>> Aaron Frost: Is that big enough can you guys see that?
>> Aaron Frost: Var so I'm just gonna just say new no I don't have to call new Symbol.
>> Aaron Frost: Come on, man.
>> Aaron Frost: Dude, why aren't you working?
>> Aaron Frost: Why isn't my symbol working? So, okay, screw this, let's go to-

[00:04:26]
>> Off Camera 1: Is it the constructor?
>> Aaron Frost: No, it's just say use call, or it's like a static function.
>> Aaron Frost: Actually Traceur doesn't have it, I don't think, maybe it does.
>> Aaron Frost: Okay, so this is what they look like, they've kind of got like a one key value? So it's basically like making a unique ID, right?

[00:04:59] It's kind of like having a GUI generator, okay, but make sure you don't have two of the same one. So then, you would have like your own, you would wrap all your code inside of an IIFE or inside of a function instead of a closure, so that people can't see.

[00:05:16] So okay, sorry, I'm getting ahead of myself, I'm gonna go back to the slides.