The class Keyword

[00:00:00]
>> Will Sentance: Solution 3, introducing the keyword that automates all the hard work, new. Benefits: faster to write, pretty much the standard in professional code. Problems: 95% of developers have no idea how it works and therefore can't pass those fancy interviews. I actually did, someone very kindly wrote me a message a few days ago and said the understanding this stuff did get them senior plus journey. And I think it's, that's never to say that being an engineer, especially, I like to sort of distinguish junior engineer can tackle problems they've seen before, using tools they've used before, mid-level engineer, tackle problems they haven't seen before, using tools they haven't used before, senior engineer can enable other people in their team to tackle problems they haven't seen before, using tools they haven't used before.

[00:00:48]
So it's never to reduce senior engineer just to that, but it is to say that if you can map out these fundamental principles, everything else follows from this, and it is a powerful way for you then to be able to show the code in Node or the code in React, or the code in Next, whatever it might be, how it's really working, which is a powerful thing to be able to do for your colleagues and help them understand how these pieces are really working because 95% of developers do not know how these things work and therefore fail interviews.

[00:01:18]
Other problem with Solution 3, I mean, I gotta say. We sort of saw a hint of it there from Chris, Chris is like, wait, so you're saying I can create a function that constructs objects that all share access to a shared function store on that function object. That bit. And I can even go and overwrite prototype and set userCreator.prototype is the number 7. No, you wouldn't do that for anything other than, you know, to prove that you could.

[00:01:47]
That seems a pretty strange implementation of object-oriented programming. Well, because JavaScript is not an intrinsically object-oriented language, it is back patching to turn a prototypal language into what appears more like an object-oriented language. And with that, including the fact that you could technically overwrite that prototype that has the shared functions and break all of your user objects, suddenly increment would return.

[00:02:18]
Doesn't exist. That is part of a bigger set of problems, potentially, that JavaScript continued to try to almost patch, and that is very clear with the new keyword solution. My userCreator there, if I ran that without the new keyword in front, no automatic object will be created in front of it, in its call. No prototypes, proto reference will be set, and no return will be automatically. What will actually happen?

[00:02:48]
I'm calling userCreator without the new keyword. I'm referencing this. There's no automatically created object there cause I didn't use the new keyword. What will the this point to refer to at this moment at window. So it's undefined might be more useful, Joe, cause undefined, I can't add a property to and silently error. Undefined would go, sorry, you can't add a property to undefined. The window, you're happily adding name, now it's window.name and window.score, no problem.

[00:03:24]
So we need to somehow tell our colleagues that this userCreator function, now you might be like, well I can tell that the userCreator function needs a new keyword because it's got a reference to this in the very first line. So there must be like, I'm not trying to reference a window, so presumably this needs a new keyword. Yeah, but in a lot of sophisticated functions, you're going to have some functions to find at the top of userCreator, some other stuff going on, you might not see the first this until further down.

[00:03:49]
So how do we tell our colleagues this function needs to be used only with the keyword new in front of it? Does anyone know what technique we've used historically to. A block comment above it. Yeah, that nice, a comment above. Capital, an upper, who said it? Matt, exactly, a capital letter, an uppercase for the first. Now that's a rigorous approach. And that is exactly right, we have to uppercase the first letter of the function, so we know it requires new to work.

[00:04:25]
Great. So, we actually would have our userCreator function be uppercase. Is that a rigorous, fault resistant approach? I mean, it technically I guess would help, but it's not changing anything in JavaScript, it's just to help your colleagues know to use the new keyword in front of it. Flipping heck. We don't love that, do we? So, we have now finally a approach that has become standard, which is the use of the class syntactic sugar, syntactic sugar means stuff that doesn't change under the hood what's happening, but looks nicer and easier to read, now in fact.

[00:05:07]
As we're going to see, at this point, classes have developed a whole bunch of useful features in addition. But at least initially, we're going to see all it does is move some of this declaration stuff around, move some of this declaration, we had to note, define userCreator, and then separately we added these functions to the prototype object on userCreator. That is very antithetical to how a classical OOP language would work.

[00:05:37]
You wanna have functions available to the return of a function that produces objects, you want those objects to have access to functions, you don't have to separately define, add them to a prototype. Instead, you define them all within this class structure. We're writing our shared methods, the methods increment login. Separately from the thing, the function that constructs our objects itself, often the userCreator.prototype object.

[00:06:10]
Other languages let us do this all in one place, and ES6 and onwards do as well. So, we now have a way, nothing has changed here, this is exactly the same code under the hood, but we have now wrapped the definition of the function. The assignment of increment and login to the object userCreator.prototype, we have now wrapped it in this new construct called a class. But it is exactly the same. The first piece in the class, subtitled Constructor, is our userCreator function.

[00:06:48]
Oh, by the way, I didn't really stress enough, I call therefore these function object combos. They are both a function and an object. A class is just going to be a function object combo. Nothing changed. So when we have our constructor bit, the subtitle, that is actually the saving of the userCreator function. So this now is our constructor portion. When we declared userCreator, we were declaring the function bit.

[00:07:26]
When we then assign to prototype on the userCreator function object combo, increment in the little side box there, and then login. Now we can do that within this larger wrapper, this bigger box known as class, and just list them out, and they will automatically be added to userCreator, the function object combo in the prototype property of its object, increment and login. Absolutely nothing changed here.

[00:07:55]
Look at it really closely, userCreator has now wrapped, we now call the function. UserCreator piece that we saved, we now call that bit subtitle constructor, but it's just going to grab that function, input name, score, and then this.name equals name, this.score equals score, we're just going to grab all that and put it here. This bit. And then the two functions, increment and login, that we previously manually put into userCreator's object portion under prototype, we just get to list them out.

[00:08:28]
And we know that they will be added here and here. But absolutely nothing changed. I think we're going to actually, for the first time, map through this code again, not, you know, with such an obsessive detail, we're going to map through it again in order to truly realize we end up with exactly the same thing here, because after this, as I say, we're going to also get to add, I'm going to give you a little preview here, we're going to add a static public field, a method describe, which, by the way, is going to look like it's doing something fancy, in fact, it's just going to on userCreator, add another method.

[00:00:00]
Describe. So I want to actually make sure we fully understand that userCreator class is still just a regular function, object combo.