JavaScript: The Hard Parts Class Syntactic Sugar

Transcript from the "Class Syntactic Sugar" Lesson

[00:00:00]
>> Will Sentance: Solution 4, our last solution. We're writing our shared methods separately from our object constructor itself, off in the User.prototype.increment.login. Other languages let us do this all in one place, and people like Griffin go, what? [SOUND] I wanna do it all in one place. Even though I hope it's clear, Griffin, that these functions, they're not attached to this object.

[00:00:25] They're just being given a reference to them in this. They're attached to userCreator in global memory. I could go console log, userCreator.prototype.increment and I'd see that function. It's there in global memory. It is never on user1. Prototype is on the constructor function, and I just happened to get a bond to those shared functions on each of these objects, a reference to those shared functions on each of these objects.

[00:00:48] So why are you complaining? Well, you're not the only one. Others complain, too. So year 2015 gave us the class 'syntactic sugar'. It does not change anything about what we did here, but it looks like Python. It is not like Python under the hood, let's be really clear.

[00:01:06] This is why I find this getting increasingly separate from the reality of how JavaScript's actually working is somewhat problematic. Under the hood nothing's changed here, but now the function that we, well, here we go, look at that, how helpful is that? The function that we previously called, so let's just remind ourselves, user is what we were calling userCreator.

[00:01:29] Typically people don't call them creator, even though they are creating users they just say the name of the thing they're gonna create, everyone clear on that? So they just call it user. So why put an uppercase letter for the first letter? Well it's because what I think is a flaw of the whole design of this, is that that userCreator function up there, if I called it without the new keyword, is it gonna work?

[00:01:54] If I ran that function at the top without a new keyword, it's not gonna create an empty object called this. So what am I sticking my this.name into? Actually by the way, the this, there, will default to what? The global object, which is just an object available in all of JavaScript, which definitely is not what we wanted to point to.

[00:02:10] So, the problem with that function is, if we don't tell our other developers in the team that it's the kind of function that needs a new keyword in front of it, they're going to try and run it and go, man, why is that not working? So instead, JavaScript developers literally had to go, fine.

[00:02:25] We've got to come up with a way of making, fixing JavaScript ourselves. And the one they use is any function like this that needs to be run with a new keyword, we uppercase the first letter. So we wouldn't actually call this userCreator. If we were to call it creator at all, it would be UserCreator upper case U.

[00:02:44] Most of the time we just get rid of the Creator bit and call it User. That it's gonna create users. So with that in mind, we get a last solution here where, there's our solution 3 and 4. A function called User that when run, it's just userCreator, when run with Eva and nine returns out, inside of it creates this as an empty object and a bond to user.

[00:03:10] Let's actually switch these up now. So, no longer userCreator, we're now going to call it, instead we're going to call it just User. It's the same, nothing's changed, just User. There it is. Okay, so User has two parts to it, right? Its functionality that gets run that creates an object, and its object self which has this prototype property which has an object on it with a bunch of functions stored on it.

[00:03:41] Okay, it has two parts. At the moment, in solution 3, we fill those parts out separately. We fill the function out at the top by saying this is a function. And we fill out its associated methods, these guys here. They're gonna be available on the objects that get returned out of running User.

[00:03:59] We fill these functions up by going very specifically, very precise, very explicit. User.prototype.increment as a function. User.prototype.login as a function. It's very explicit, we say exactly what we do. Apparently, this is not what we want, why, I like this. Instead we have a new solution 4 that says exactly the same thing.

[00:04:24] These are absolutely identical. There are ways in which this new syntax class actually changes stuff under the hood. But for this, we don't need to think of there being any ways. It's achieving the same thing. So instead, let's try it out.