Check out a free preview of the full JavaScript: The Hard Parts course:
The "new operator" Lesson is part of the full, JavaScript: The Hard Parts course featured in this preview video. Here's what you'd learn in this lesson:

Will introduces the new operator, which creates an instance of a user-defined object type.

Get Unlimited Access Now

Transcript from the "new operator" Lesson

[00:00:00]
>> Will Sentance: In the challenges, we started to encounter this magic keyword, new. So we're gonna remind ourselves that we wanted a function, that when called, when run, would return out little baby objects, user1. Call them, first one user1, next one, user2, user5,000, user whatever. But we wanna have available on each of the objects our functionality.

[00:00:24] Have I mentioned this yet? I know, I mentioned this many times. This is our fundamental goal. Can I call this function on the object, is it available right there on the object. That's all I want. But I don't wanna have multiple copies of this function on user1, user2, user5000.

[00:00:39] So along comes this special shed store, of the functions that I could ever want on user1 user, it wouldn't just be increment login, it would increment login, logout and change avatar, display avatar, etc, etc. All those functions on user function store would be available when I call user1.thatfunction.

[00:01:00] Cuz if I don't find that function on user1, my prototypal nature of JavaScript means I check the _proto_ where I find a bond through the prototype chain to the next object up, user function store, okay. But I'm sure you'll agree Mohamed, quite a lot of space here. Of our typing has been taken up by creating that new user object in here, and creating that bond to that shared function store, and returning our other object.

[00:01:34] Who comes from a true OOP language? Do you do all that stuff by hand there? No, you do not. And JavaScript increasingly wants us to feel liberated, from all this manual work of making our prototype bonds, Mohamed.
>> Will Sentance: All these prototype bonds. I hate putting away from the pairing, I'm sorry.

[00:01:58] I feel very bad, the pairing is where the real value's at, it really is. But right now we're gonna see our solution three in a moment. We're gonna get, let's see our review with this approach problem. No problems, this a beautiful approach. I love this approach maybe a little long-winded.

[00:02:14] We've declared a new variable with an object associated with a bond to function store. We've returned that object. Six words it's not that bad but, I will say this is super sophisticated but it is none standard. This is a non standard way of creating our objects with shared functionality.

[00:02:36] This is a non standard way, we have a standardized way. In the down side of this approach yes six was but also, once you start creating objects in which you have your data and functionality, you start doing this for everything. Are you creating a quiz game you generate a quiz board as an object with functionality attached to it.

[00:02:56] It's a single instance the of the quiz. You're not gonna create more of them. You just start thinking OOP for everything and therefore if you are manually doing this inside each time. Yeah, may be it is not as, may be there is a better way. Another language you are not doing this, if you are trying to achieve oop.

[00:03:09] But I will say if this way, sophisticated. We get to see every precise bit, we get to manually set our bond to hey, we now know what's actually going on, but a lot of this stuff gets automated. It's still happening under the hood, but it's getting typed in for us, essentially, by JavaScript when we use this magic keyword new.

[00:03:33] Not magic, I don't know why magic there. This keyword new. When we run this user created function, with the new keyword in front of it, it behaves in a totally under the hood, similar way to this, not identical, but similar. But it's gonna automate so much of the hard work we did here, declaring the and so forth.

[00:03:57] Let's see. When we call the constructor function, this guy here is known as our constructor function, with new in front, we automate two things. We automatically create the new user object. We automatically return out that user object when complete and store in user1 for example. Who can see why we have to rethink how we write this code then?

[00:04:19] Cuz right now, I declare an object code new user, it's an empty object, and then to fill in the properties name, how do I refer to that object, Katie? What label do I use to refer to the object to fill in the name property?
>> Katie: New user.
>> Will Sentance: New user, if I'm automatically creating this line, JavaScript is going to automate this line for us.

[00:04:42] What's the label for my object? That label's gone, that's automatically done for me. The object is created for me by Java, everything in red is stuff that the new keyword when I run the user created function, instead of rekali but instead with a new keyword in front of it.

[00:05:00] I get an object automatically created. And that object gets automatically, again, everything in red is automatically done for us, gets returned out. But how do I fill in properly that is something that is being auto created. Anyone got an idea how JavaScript might allow me to point to refer to that object?

[00:05:17] What might be a useful place holder keyword or word that we could use to point to that object, Katie? What do you think might be an useful word, Griffin?
>> Griffin: This.
>> Will Sentance: It's this. It's a different use to the word this. Totally different use but it still refer, JavaScript when we use new, create a new object by default and gives it the label of this.

[00:05:42] So behind the scenes we are sought of going, not new user but behind the scenes we're sought of going, this is equal to object.create empty object but it is automatic. When we see which bit get cut in a second that cuz we're not writing this JavaScript inserts this for us, because we use the new keyword in front of using a creator.

[00:06:00] So who can now see another problem? We now know how you can refer to our object, but who can see another problem but this automation by automating this line, by automatically creating the object, what's another problem here that someone can see?
>> Speaker 4: There's still a bond.
>> Will Sentance: How do we get that bond?

[00:06:16] Cuz before, we manually made that bond, didn't we? We said object.create parentheses user function store. Now, we don't get a chance to make that bond. That's gonna be automatically done for us. The bond here is also gonna be automated. But if it's automated, what's it gonna refer to?

[00:06:36]
>> Speaker 5: This.
>> Will Sentance: This is this object here. We want something out here that is gonna be a shared function store.
>> Will Sentance: Something like where do we end up actually storing our shared functions? Well Java is a default place and it's a default place and it chooses the default place for the user creator function of the other functions like quiz question creator, gameboard creator.

[00:07:06] Anything that's gonna return an object with all the data of the associated and it's a default place. Before I tell you what a default place is, you need to know something. Which many of you already know we've said it many times, functions in JavaScript are really just what?

[00:07:24] Anyone remember?
>> Group: Objects.
>> Will Sentance: Objects, okay so, if that's the case, user creator is a function. Yeah, no problem. It's a function. There it is. It's a function. So if I treat user creator as a function and put parenths on the end, it runs it's functionality. Hurray but what is user creator also Andrew?

[00:07:48]
>> Andrew: An object.
>> Will Sentance: An object, it's also an Object. So if I treat user creator as an object, it behaves as an object. If I try and store on user creator, user creator.andrew = 3 that has no consequences on my function. The next line I can still go userCreater ().

[00:08:19] If I treat it like an object, it does its object stuff. If I treat it like a function, it does its function stuff. Who feels that it's a bit weird. Raise your hands if you think that's a bit weird. Feels a bit, no that's odd to me okay.

[00:08:35] At least we're being honest, it is a bit weird. So if I did this line here what would I have in using a creator in this object version, Andrew?
>> Andrew: An Andrew.
>> Will Sentance: Andrew as a property and the value would be-
>> Andrew: 3.
>> Will Sentance: 3 yeah. Now, there is one way I've heard, I think it's quite a smart way of thinking about this.

[00:08:58] In reality, userCreator, it's a function, but it really is like an object first. It's an object first. With a special property on it called Call. Which is the running of the functionality. This is this not necessarily respective of how we actually have it, but think of JavaScript functions as really just an object.

[00:09:18] And when we do use a creator parenths, what we're really doing is say go run user creator and it's cool property, which is the functionality. And that sounds weird, but that's really what we're doing. Think of it being the functionality as sort of there under a call property, a run me property.

[00:09:39] So if you're thinking how can it be both things at the same time? Well really it's just an object with some functionality can be run. Even though we think of it as a function first, it's really an object first. But we obviously use this functionality far more, but it really is an object first with functionality attached.

[00:09:56] But we always when we add when we do parenths, we speak to it's functionality bit. Okay let's have thumbs on that, cuz it really is important for us to understand this is our final piece of knowledge we need to understand for us to be able to use the new key word effectively let's have thumbs.