The new Keyword

[00:00:00]
>> Will Sentance: We have a new, haha, a new approach, Solution 3: Introducing the keyword that automates the hard work. We're going to introduce people, a keyword that we're going to be able to insert here before we run a function, 3 letters. New. It's always weird when you spell a word out, especially a short one, new. That is going to automate the creation of the object. It's going to automate the setting up of a link to a shared store of functions.

[00:00:38]
It is going to automate the creation of the object. It's going to automate the returning out of the object. It can't automate the assignment of the properties, so let's not highlight those, it can't automate the assignment of the properties because we've actually got to do the work of that. But it is going to automate the creation of the object, the link to the shared store of functions, and the returning of the object out, all for us, all by inserting these three letters in front of the function.

[00:01:09]
In fact, we're not going to need to do anything else, and to be honest, that's going to be a problem. We're going to be able to run a function with that keyword in front and know that it's going to insert a bunch of behaviors automatically in this function. That's also a bit strange because I don't want to get ahead of myself here, we'll talk about this, but that's a bit strange, right, that you can have a function who, if you wrote it and you're expecting it to take in the new keyword to have the new keyword, you're expecting a bunch of automated stuff to happen.

[00:01:35]
But if the person doesn't put the new keyword there, none of that automatic stuff's going to happen, and it ain't going to work the way you want. That's going to be a bit strange. When we call the function that returns an object with new, we're going to automate two, well, three things, the creation of the object. The bond of that to the shared store of functions and the returning of that new object.

[00:01:59]
But now we're going to need to rethink about how we write the body of user creator. For example, how can we refer to an object, to an object that's automatically created? What keyword would we use potentially to refer to an object that's automatically created? Anyone think what keyword, hopefully it's not a keyword we've also used elsewhere for something entirely different. Yes, it would be exactly right, the keyword this.

[00:02:27]
For a fundamentally different thing. Here, it's an automatically created object. That wasn't down here. Genius design. And how are we going to know where to put our single copies of our functions? Here we manually said declare an object, user function store, and make that bond using object.create. Now we're going to need to rely on JavaScript having a default place that for the function, for the objects that come out of running user creator with the new keyword, that they're automatically going to know to link up to.

[00:02:59]
Where could that be? I think we need an interlude here, yeah, the new keyword automates a lot of our manual work, it's going to get rid of the object creation step, it's going to get rid of the bonding to our function store step. We saw the keyword, this is going to be used to refer to it, it's going to automatically create the object for us, and it's going to automatically return it out. We're going to need a reference for that object automatically created, and as we heard, it's unfortunately the same keyword as before, even though it's a very different object, and it's to this keyword again.

[00:03:30]
But we're also going to need a place to put our functions, and to understand that, we're going to need an interlude where we come to terms with the fact that functions are both objects and functions. So, here we go, we're going to try and keep this code fairly small because we want to be able to just play with it for a bit and then move on, but let's declare our first function here in global memory.

[00:03:56]
Austin, what are we declaring? We're declaring multiply by 2. We're declaring multiply by 2, and it is a function, beautiful, excellent, but in the next line, Tenzin, what are we doing to our multiply by 2 function? I believe we're accessing the stored, or, well, I think we're declaring it. Yeah, we're creating a stored property, not unreasonable to think it might be there, good point, not unreasonable to think it might be there, and we're assigning, we're creating a stored property and we're assigning it the value of what?

[00:04:31]
5. Where the heck does that go on my function? It turns out in JavaScript, functions are both functions and they're also objects, yay. And if we treat them as an object, and what tells us we're treating it as an object here, what little, yeah, Tenzin, what little symbol tells us we're treating it as an object? The dot. The dot. Well done to Tenzin. Exactly. If we treat it as an object, it will behave as an object, and we can assign the property on it of stored and the value of 5.

[00:05:12]
But maybe that's overridden its function behavior. Well, let's see in our next line. Tenzin, in my next line, what am I doing? You're calling the, yep, it's parting word argument? 3, beautiful. When I treat it as a function, people, I get access to its function bit. Those are my little parens saying treat it as a function, I get access to my function bit. But maybe using it as a function has overridden its object bit.

[00:05:44]
What am I doing below Tenzin? I think you're just calling it. Well, I'm accessing the, well, I'm looking for what dot, what notation am I using here? The dots. Dot, exactly, which tells me go look for multiply by 2 and use it object bit, where I find what property stored and has what value? 5. Beautiful. OK, functions in JavaScript are both objects and functions, and if you treat it as an object, you get access to its object bit.

[00:06:17]
And if you treat it as a function, you get access to its function bit. This might allow us people, we could use, well, actually, you know what, we suggested that our, that our object bit was an empty object, but actually it has in it, not a hidden property, people, very unhelpfully, a very real property called prototype. This is not our square bracket square bracket prototype, but a very real property called prototype, which is automatically a big old empty object.

[00:06:54]
In fact, all functions in JavaScript automatically are also objects and automatically also have on them a prototype property which is a big old empty object. That is not the same as our square bracket square bracket proto, that's why I like to use, used to like to call it proto, which was a hidden reference off to somewhere else. This is an explicit, we can go and look at multiply by 2.prototype and we will see it as a big old empty object because we declared a function, it's also an object, also with a built-in object on it by the name of a prototype.

[00:07:33]
We could use the fact that all functions by default have a property prototype on their object bit, itself an object, to replace our function store. When we had our user creator function, we didn't just get a function, it also had associated an object which also had a prototype property on it, which was a big old empty object. What if we could put into there the functions that we want when user creator gets run and out comes an object that that object would have access to our functions in that user creator dot prototype, and that is exactly where JavaScript with a new keyword puts our function store.

[00:08:20]
So, let's look at it, the new keyword automates a lot of our hard work. And whereas before we had function store, let's say it was an object, and then we set in it the increment function. If you remember, we had our user function store with increment and login. Now that we no longer get to manually make that bond to user function store when we create our new object using object.create, but instead, new keyword is going to automatically create that object for us.

[00:08:48]
We need somewhere to automatically know that the functions that are going to be accessible by that object via the prototype chain will be found by JavaScript, that it's going to go look there automatically. Believe it or not, people, it's going to be the name of the function in its object form, which has a prototype property, no, not a prototype property, an object stored on it under the prototype key, and it's there that those functions are going to be stored.