class Keyword

[00:00:00]
>> Will Sentance: Let's see, solution 3, the keyword that automates the hard work, new. Benefits, faster to write, I get it. Look at all the blue, that wasn't us writing anymore. Often still used professionally. And a big part of it is, but we'll see, solution 4 changes it slightly. Problems, 95% of developers have no idea how it's working under the hood.

[00:00:19]
I think therefore fail interview, there's a slightly mercenary motivation to learn, and therefore can't debug and build clean and reliable code all the time. Here's another little problem with it, this is the design, I would say, flow not a flow, it's a not smart design move. That user create a function if I ran it without the new keyword, I found it in the code base.

[00:00:42]
And when I was running my team and I started running without the new keyword. What would the this end up that I refer to in order to six stuff in the object? What would it point to Braden?
>> Braydon: The global.
>> Will Sentance: The global object, as know great as it and yet, you might say, well, it's kinda obvious I need to have the new keyword, right?

[00:01:02]
So we're gonna get this so early. It kind of isn't because I might have other code before that this is even there. I might have like a function declared that I am using it, that this might be inside the function that this equals. The point is I do not know when I look at that function that it requires a new keyword in order to do its job.

[00:01:19]
That is probably not the smartest design decision, right? You probably tend to want to be able to look at the function and go, I know that that requires a new key word to do anything useful. So developers helped each other out. If you can imagine the language where if it's going to be a function that requires is going to automate stuff, you wouldn't declare it with function you declare it with and the constructor is a typical term for anything that creates constructs an object.

[00:01:45]
But JavaScript didn't do that. They said no problem is functions, leaving it as regular function. And then insert three letters beforehand new when you run the function. I don't know. That's not ideal for your team members who are like if you write comments to tell them but. So what did developers in a short hand do to help each other out so that they know when they see a function that it needs a new keyword in front of it in order to do it's job?

[00:02:12]
Yeah, go ahead Adam.
>> Adam: Capitalize.
>> Will Sentance: Capitalize the first letter. And that's why you won't see, whenever you see a new keyword being used in front of a function the function will have an upper case. It doesn't have any meaning, it doesn't have any impact to the code.

[00:02:25]
Is just to help each other help folk out to be able to spot that this function needs a new keyword. That is clearly something that probably needed to be improved. And that is where solution 4 came in. We had to advocate first one of the functions we know it requires new keywords we've worked.

[00:02:41]
And that's where solution 4 came along. The cloth syntactic sugar. But it is a syntactic sugar. That means something that changes the way it looks, but doesn't change it under the hood. For our purposes, for this bit here, the way we're going to use it here, it doesn't change anything under the hood.

[00:02:56]
Two things motivate this. It came along in the year 2015, ES6, In declaring our function user creator, when executed automatically with the new keywords help returns out an object into user1. Run it again will return an object into user2, there's two important parts to it. There's the function that produces the object automatically.

[00:03:23]
And then there's the shared store of functions. They're all bundled up on the same functional object combo. But we announced to JavaScript the two parts separately. We declare user creator, that creates a function and an object with a prototype property on it with an object to it. Which we can store then totally, independently, the functions.

[00:03:45]
In other languages, these two things are so kind of intimately connected, right? It makes sense, this function when it runs creates an object, returns it out, and that object has access to these functions. So they're like intimately connected. In other languages you. Even in JavaScript, they're intimately connected and they're on the same functional object combo.

[00:04:05]
But in other languages you can declare them together. Know declaring the function who when run returns out an object that has access to totally separately declared. The functions that go into the prototype object sold on the project property, sorry that the objects on the project property, all that function object combo.

[00:04:24]
So yes, they are stored together, but they're not declared that means we don't write them to JavaScript together. We don't write the instructions of jobs to achieve those two things together. We don't write them together, we run separately. Another language is we do that all in one construct, in all in one go, all in one format.

[00:04:45]
And that format people, anyone know what that construct's called that allows us to do these together, save these at the same time, Peter?
>> Adam: A class.
>> Will Sentance: A c;ass exactly. It's pronounced class, Peter.
>> Adam: Sorry.
>> Will Sentance: That's a joke, obviously joke, a class exactly, there we go. But Peter, you're so kind that you were pointed out you do not.

[00:05:06]
You truly in a very, very nice person. Unclearly unlike myself, so we're writing I shared methods, these methods that get shared by all others. Actually let's just to help ourselves out here have a user 701, which would have come out of running user creator again, let's actually do it here just in case, user 701 with a result of another call to user Creator.

[00:05:36]
Let's say with Sarah and 19 and the new key word of course in front and that would have returned out into user 701. And this time let's get this right, have the object with the proto property up to the shared object and then name, Sarah, score 19. Everyone gets this portion here, I hope that's not throwing people.

[00:06:17]
Those two objects, they both have access to these shared functions, methods. We're saving them on the same functional combo, but we're declaring them,
>> Will Sentance: Separately. Let's do it all in one place. And the class construct lets us do that. Here it is, it's syntactic sugar folk, I'm actually going to go straight to here.

[00:06:43]
These were the two parts we did before, right? Remember, we got our function user created, which creates a function object combo. Though when it's run Will create inside of itself with a new keyword, an object storing user1 first time, storing user 701, 701st time that each have access to this object full of functions.

[00:07:05]
User creator.prototype.increment. User creator.prototype.login. We save them there. Now nothing has changed under the hood. We just get to do these two separate declarations or assignments in one construct, we call it a class. We take the label of the function and we make you the label of the class.

[00:07:33]
As soon as you declare a class, what do we think we get people?
>> Will Sentance: Dan?
>> Dan: An object.
>> Will Sentance: We get a function object combo.
>> Will Sentance: We get an object, yes. We get an object ready to receive a function and an object. As soon as we do it we're gonna deal with the first bit inside it.

[00:07:51]
So as soon as we declare it, we get a functional object combo. If not, we've got a functional object combo. And the first bit of the function object combo, we give the subtitle constructor, and that's the function bit, or the function object combo there it is. We don't know.

[00:08:20]
We give it a subtitle, constructor.
>> Will Sentance: And of course it gets on it in the function object combo in the object bit, a prototype property, which is an object full of function, well not yet, what do we immediately store though, and no longer do we manually have to assign them look we just list them out.

[00:08:42]
Not even commas in between, we just list them out. We can list as many out as we want and they're all gonna be taken one by one and behind the scenes what's JavaScript running? It saying user creator.prototype.increment, and it's sticking them into that object. People, nothing has changed under the hood here.

[00:09:00]
We have as soon as we declare a class before we did it by declaring a function. Which implicitly created an object attached to it a function object combo into which had a prototype property which was an object itself. Into which we stored our shared functions. Now, we create a class which is a function object combo.

[00:09:25]
And the first bit of it, we give a subtitle constructor and you can see it's identical. That first thing we pass into this other constructor first in your path, sorry. First thing we store in it. And give ourselves a constructor is the function bit of the function object combo.

[00:09:41]
And then all the functions we list out below, we're just gonna literally list them out by name. Behind the scenes JavaScript is taking the first one and going "ah!", off we go to our function object combo that is the class. And look on the object bit of it and look on its prototype property and look at that object and store a method, called increment.

[00:10:00]
And then the next slide it goes login. Off we go to a user creator class, which is really just a function object combo and look on the prototype property. We insert a login property on it and assign a function. And after that it's the same. When we run user creates I've done the upper case here no change.

[00:10:20]
When we run user creator with the key word knew which bit do we run of the function object combo, Dan? When we run user creator with either a nine with the keyword new in front of it, which bit of the function object combo do we run.
>> Dan: The constructor.

[00:10:34]
>> Will Sentance: The function, yeah we call it constructor now but it's really just the same function, yeah. And when out returns from it an object, it's gonna link to which bit of the function object combo Dan?
>> Dan: The prototype.
>> Will Sentance: Prototype object exactly, nothing has changed. But it does look a lot more like other languages.

[00:10:57]
But that to me, I don't even know, because is it doing what other languages are doing under the hood? No, it's definitely not. And that's almost more, I don't know, it makes again more legible. It makes it more apparently readable. But behind the scenes, nothing's changed. Meaning if we wanna really understand and debug and use these techniques, it's even more pertinent that we now understand what's going on under the hood.

[00:11:31]
Going on under the hood because even more now it looks like other languages. Meaning will bring all our views of how those other languages implement these features, but ain't doing in real life behind the scenes. It's exactly the same model by the way, as we saw all the way back and solution 2.

[00:11:48]
It's just been wrapped by the automation the new key well, it's a lot of the codes been automated by the new key word. And now wrapped the setting up of our starting point of our function which when run returns out objects. And has act lose objects have access to the shares or functions there now, we now through the process of setting this up in one go In the class constructs, in the class setup.

[00:12:12]
But it ain't changing anything under the hood, it just makes us write less code. It's what's called a syntactic sugar, makes it look prettier, I'm assuming it's like icing sugar on a cake, I have no idea. Syntactically you're like, makes it look prettier, but it ain't changing anything under the hood.

[00:12:29]
All right folk, benefits emerging as a new standard no doubt feels more like the start of other languages Python and Java. It looks a lot like the style of other languages, languages, problems. I say 95 for solution 3, 99% of developers have no idea how it works. Again, why it's fail interviews?

[00:12:48]
I don't know this is a very but can't solve the problems that they want to solve the way they want to solve them. But you will not be one of those people.