Review of new

[00:00:00]
>> Will Sentance: Benefits of this approach, years for us to write. And still fairly typical practice in professional engineering. And we're actually gonna see that when we want to create what's called sub-classes, these approaches including solution four are definitely cleaner to write. But the downsides 99% of developers fail into whose because they have no idea how this is working under the hood.

[00:00:25]
And by the way, it's not a great design. We have to uppercase. That function up there to let other developers know. You usually uppercase the first letter to let other developers know, hey hey, this function needs the new keyword to be run to work. Otherwise if I ran user creator without the new keyword.

[00:00:50]
>> Will Sentance: It's referring to a this that hasn't been auto-created. It's referring to an object by the name of this that hasn't been auto-created. So what would that this refer to, Terry?
>> Terry: Don't know.
>> Will Sentance: Basically exactly. That would be nice. But it doesn't anyone know what it does refer to?

[00:01:09]
>> Terry: Is it the global content?
>> Will Sentance: It refers to this weird old thing called the window object or the global object which, has everything in JavaScript stored on it. So if you went to it, so this in global, first the global window object, or what's called the global object, which has every feature of JavaScript stored on it, and you suddenly now will have a name and score property on it as well.

[00:01:36]
That is a bad design decision, in my view. But functions could sit there and fundamentally fail when someone else picks up the code if they don't know to call the new keyword. Now, you might say, but I can see the this, so I should probably know I need to call renew.

[00:01:52]
Yeah, but a lot of the time you create sub-functions in these. User-created type functions that return out objects, you create a sub-function on the top, and you don't see the first this reference until way down, and you think your function's gonna work fine, and you call it, it does nothing because you needed to run it with a new keyword.

[00:02:12]
So developers help each other out by uppercasing the first letter as an indicator saying, you better run me with a new keyword. But it doesn't change anything under the hood, it's literally developers helping each other out, so that we know to use a new keyword. Okay, that's changed in solution four, that's one of the benefits about solution four is that solves that problem.

[00:02:31]
>> Speaker 3: There was a quick question.
>> Will Sentance: Yeah, go ahead.
>> Speaker 3: Going back to that code, or I guess the increment and login, those functions, those are object prototype combos as well.
>> Will Sentance: Yeah. Functions that are stored, they maybe sort on objects, they maybe sort on a sub-object of an object, but if it's a function, it has a function object combo.

[00:03:00]
Now, all functions are. Do we care in this situation?
>> Will Sentance: We do not, we're not that bothered about it in this situation. We're gonna see we are always, because it's why we have the ability to use call, apply and bind. We'll see that in a moment but yes to our online friend, that is absolutely a function object combo but it doesn't have any relevance really particularly here.

[00:03:26]
Yet all functions are function object combos. And just remember when you have thousands and thousands of lines of code, having some organizing approach. If all we really do when we write code is saving data. Like for user's score and name, saving functionality that can then be applied to that data.

[00:03:44]
Wouldn't it be a nice organizing approach to put the right functionality with the right data, bundle it up? That you see how readable and how easy that makes our lives as developers. No hunting for the right function, notice like a massive laundry list of functions, and then a massive laundry lists of data to save.

[00:04:00]
But instead, kind of pass all them off appropriately that is very, very nice allowing us to do, run our functionality on our data directly. That is our dream, that is our dream. Now, we start off by putting the function directly on the object, untenable. We couldn't have that because we've got 100 functions we want user one to have, but the same 100 functions we want user two to have.

[00:04:26]
So we got have them all copied on every single object. That would be ridiculous. So we said okay, use the prototypal nature of JavaScript, that prototypal feature, such that when we don't find. We do not store it on the object itself. JavaScript looks in this little bound up to what we called user function stored.

[00:04:43]
We call it whatever we want, but we hand crafted that bond for each of the objects that got returned out of, if you remember, calling user creator. We hand crafted that each of those objects that have a link, a reference up to a single object where our functions were stored.

[00:05:00]
We call it user function store, as long as we called it the same thing we were fine. As long as we called it the same thing as when we created the object and made that link we were fine. But this was a lot of hand crafting, hand creating the object, hand making the bond, hand returning the object.

[00:05:15]
So JavaScript's designers said don't panic, we will save you that work, we will give you the new keyword such that your function that creates the object will be much easier to make. You don't to make the object yourself at all. You don't have to make the bond to the set of functions yourself at all.

[00:05:32]
We'll make a bond to an object where you can put your functions, and that object will be on the prototype property of the function that creates the individual objects. You could imagine that this object would be separate but it kind a make sense to put an own the functional object combo of the function that creates the objects that need that, need those functions.

[00:05:55]
It may much easier. It is still fairly typical best practice, we're gonna see solution for, says, you know what? This bit here is funny to call it a functional object combo. It's funny to create it as a function and then use its prototype property to attach the functions to that prototype object.

[00:06:16]
Why don't we do it all in one go? And we call that a class. But under the hood, it's gonna be this. Before we get to that, we are going to see it interlude. So here, our increment function is attached to prototype object, so that when we call user1.increment, we're not going to find user one, on, is it increment on user one object, so JavaScript is looking at the proto reference up to the prototype object, we know that because the user one object was created with a new keyword.

[00:06:52]
Folk, nothing has changed between this code that we just saw and this code here, except that I've slightly change how the increment function is working. Let's go back. Let's see that again. Nothing has change except there's slightly change how the increment function is working here. Because I want you to see something here that could often, what if we want to organize our code inside our shared functions, increment login, perhaps, by defining a new inner function inside the shared function.

[00:07:28]
This often happens, so right here we have one line in code this starts called plus plus. But of to me want much more than that.